working drawer menu (wip missing desktop collapsed state)

src/angular/frontend/src/app/components/shell/drawer/drawer.component.html

@@ -1,17 +1,17 @@
 <div class="drawer-wrapper" [ngClass]="{'ready': viewInitialized, 'collapsed': isCollapsed()}">
   <div class="drawer-container">
     <ng-content select="drawer-content"></ng-content>
-  </div>
+    <button class="menu-button secondary" (click)="handleMenuButton($event)">
-</div>
-<div class="main-content-container">
-  <button class="menu-button secondary" (click)="handleMenuButton($event)">
     <span class="material-symbols-outlined collapsed-icon" [ngClass]="{'active': isCollapsed()}">
       &#xE5D2;
     </span>
-    <span class="material-symbols-outlined open-icon" [ngClass]="{'active': !isCollapsed()}">
+      <span class="material-symbols-outlined open-icon" [ngClass]="{'active': !isCollapsed()}">
       &#xE9BD;
     </span>
-  </button>
+    </button>
+  </div>
+</div>
+<div class="main-content-container">
   <div class="top-nav-container">
     <ng-content select="top-nav-container"></ng-content>
   </div>

src/angular/frontend/src/app/components/shell/drawer/drawer.component.scss

@@ -3,7 +3,7 @@
   height: 100%;
   overflow: auto;
 
-  --transition-duration: .3s;
+  --transition-duration: .2s;
   --menu-trasition-duration: calc(var(--transition-duration) / 2);
 
   .material-symbols-outlined.collapsed-icon {
@@ -22,95 +22,89 @@
     }
   }
 
-  &:has(.open-icon.active) {
-
-    // todo fix when closing drawer animation is missing because all these styles are gone
-
-    --menu-trasition-duration: .3s;
-
-    @media (max-width: 768px) {
-      .drawer-wrapper {
-        display: block;
-
-        &.ready {
-          .drawer-container {
-            @starting-style {
-              width: 0;
-              display: block;
-              padding-inline: 0;
-            }
-          }
-        }
-      }
-      .drawer-container {
-        display: block;
-        z-index: 1000;
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 250px;
-        height: 100dvh;
-        overflow: hidden;
-        min-width: 0;
-
-        transition:
-          width var(--transition-duration) ease-in-out,
-          padding-inline var(--transition-duration) ease-in-out,
-          display var(--transition-duration) ease-in-out;
-
-        transition-behavior: allow-discrete;
-      }
-      .main-content-container {
-        .menu-button {
-          top: calc(5rem - 1rem);
-          left: calc(250px - 1rem);
-        }
-      }
-    }
-
-  }
-
   .drawer-wrapper {
+
+    position: relative;
     height: 100%;
-
-    flex-shrink: 0;
-
     width: 250px;
     display: block;
-
+    flex-shrink: 0;
-    overflow: hidden;
+    //overflow: hidden;
 
     transition:
-      width var(--transition-duration) ease-in-out,
+      width var(--transition-duration) linear;
-      display var(--transition-duration) ease-in-out;
 
     transition-behavior: allow-discrete;
 
-    &.ready {
+    //&.ready {
-      @starting-style {
+    //  @starting-style {
-        width: 0;
+    //    width: 0;
-        display: block;
+    //    display: block;
+    //  }
+    //}
+
+    .drawer-container {
+
+      position: absolute;
+
+      left: 0;
+      top: 0;
+      height: 100dvh;
+
+      width: 250px;
+      min-width: 250px;
+
+      display: flex;
+      flex-direction: column;
+      padding: 1rem;
+      background-color: var(--neutral-70);
+      z-index: 1000;
+
+      box-sizing: border-box;
+
+      transition: left var(--transition-duration) linear;
+
+      .menu-button {
+        position: absolute;
+        padding: .3333333rem;
+        border-radius: 50%;
+        z-index: 9999;
+        top: calc(5rem - 1rem);
+        right: -1rem;
+        width: 2rem;
+        height: 2rem;
+
+        transition: top var(--menu-trasition-duration) linear, right var(--menu-trasition-duration) linear;
+
+        @media (max-width: 768px) {
+          top: calc(2.5rem - 1rem);
+          right: 1rem;
+        }
+
+        .material-symbols-outlined {
+          font-size: 1.3333333rem;
+          font-weight: 700;
+        }
       }
+
     }
 
+
     @media (max-width: 768px) {
       width: 0;
-      display: none;
+
+      &.collapsed {
+        .drawer-container {
+          left: -250px;
+
+          .menu-button {
+            right: -3rem;
+          }
+        }
+      }
     }
   }
 
-  .drawer-container {
-
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
-    background-color: var(--neutral-70);
-
-    box-sizing: border-box;
-    min-width: fit-content;
-  }
-
   .main-content-container {
     display: flex;
     flex-direction: column;
@@ -120,29 +114,6 @@
 
     flex-grow: 1;
 
-    .menu-button {
-      position: absolute;
-      padding: .3333333rem;
-      border-radius: 50%;
-      z-index: 9999;
-      top: calc(5rem - 1rem);
-      left: -1rem;
-      width: 2rem;
-      height: 2rem;
-
-      transition: top var(--menu-trasition-duration) ease-out, left var(--menu-trasition-duration) ease-out;
-
-      @media (max-width: 768px) {
-        top: calc(2.5rem - 1rem);
-        left: 1rem;
-      }
-
-      .material-symbols-outlined {
-        font-size: 1.3333333rem;
-        font-weight: 700;
-      }
-    }
-
     .top-nav-breadcrumb-container, .top-nav-container {
       margin-right: 1rem;
     }

src/angular/frontend/src/app/components/shell/shell.component.scss

@@ -15,7 +15,7 @@
 
       margin-left: 0;
 
-      transition: margin-left var(--menu-trasition-duration) ease-out;
+      transition: margin-left var(--menu-trasition-duration) linear;
 
       @media (max-width: 768px) {
         margin-left: 3rem;

src/angular/frontend/src/styles.scss

@@ -11,7 +11,7 @@ html, input, button {
   font-style: normal;
   font-variation-settings: "wdth" 100;
 
-  transition: font-size 0.3s ease-in-out;
+  transition: font-size 0.2s linear;
 
   @media (max-width: 768px) {
     font-size: 14px;