diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html
index 7346e4a..c6b1df0 100644
--- a/frontend/src/app/layout/main-layout/layout.component.html
+++ b/frontend/src/app/layout/main-layout/layout.component.html
@@ -48,6 +48,15 @@
-
open', [animate('200ms ease-in-out')]),
]),
+ trigger('drawerAnimation', [
+ state(
+ 'open',
+ style({
+ width: '16rem', // 256px
+ })
+ ),
+ state(
+ 'compact',
+ style({
+ width: '4rem', // 64px
+ })
+ ),
+ state(
+ 'closed',
+ style({
+ width: '0',
+ })
+ ),
+ transition('closed <=> open', [animate('300ms ease-in-out')]),
+ transition('open <=> compact', [animate('200ms ease-in-out')]),
+ transition('compact <=> closed', [animate('200ms ease-in-out')]),
+ ]),
+ trigger('backdropAnimation', [
+ state('visible', style({ opacity: 1 })),
+ state('hidden', style({ opacity: 0 })),
+ transition('hidden <=> visible', [animate('200ms ease-in-out')]),
+ ]),
+ trigger('mainContentAnimation', [
+ state(
+ 'shifted',
+ style({
+ marginLeft: '4rem',
+ })
+ ),
+ state(
+ 'normal',
+ style({
+ marginLeft: '0',
+ })
+ ),
+ transition('shifted <=> normal', [animate('200ms ease-in-out')]),
+ ]),
],
})
export class LayoutComponent implements OnInit, OnDestroy {