fix(layout): toggle icon and animation lag (#1150)

* fix(layout): toggle icon and animation lag * fix: overflow scroll issue
dzangolab · Oct 4, 2024 · f606813 · f606813
1 parent 0a3e77e
commit f606813
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/packages/layout/src/assets/css/components/layout/common/nav-group.css b/packages/layout/src/assets/css/components/layout/common/nav-group.css
@@ -12,15 +12,19 @@
   margin: 0;
   overflow: hidden;
   max-height: 0;
-  transition: padding 0.4s ease-out, box-shadow 0.5s ease-out,
-    max-height 0.5s ease;
+  transition: padding 0.3s ease-out, box-shadow 0.4s ease-out,
+    max-height 0.4s ease;
 }
 
 .dz-nav-group[aria-expanded="true"] > ul.dz-group-submenu {
-  max-height: 500px;
+  max-height: 200px;
   padding: 0.5rem 0;
 }
 
+.dz-nav-group[aria-expanded="true"] > ul.dz-group-submenu:hover {
+  overflow-y: auto;
+}
+
 .dz-nav-group .dz-group-submenu > li {
   width: 100%;
 }
@@ -37,12 +41,12 @@
   transition: transform 0.5s ease;
 }
 
-.dz-nav-group.collapsible > .dz-nav-item .dz-nav-group-toggle {
+.dz-nav-group.collapsible > .dz-group-header .dz-nav-group-toggle {
   transform: rotate(90deg);
 }
 
 .dz-nav-group.collapsible[aria-expanded="true"]
-  > .dz-nav-item
+  > .dz-group-header
   .dz-nav-group-toggle {
   transform: rotate(-90deg);
 }
@@ -63,19 +67,19 @@
 
 .dz-nav-group.collapsible-reverse[aria-expanded="true"] ul.dz-group-submenu {
   box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.1);
-  animation: levitate 1s ease forwards;
+  /* animation: levitate 1s ease forwards; */
 }
 
 .dz-nav-group.collapsible-reverse .dz-group-submenu .dz-nav-item {
   padding-left: var(--_nav-item-padding-h);
 }
 
-.dz-nav-group.collapsible-reverse > .dz-nav-item .dz-nav-group-toggle {
+.dz-nav-group.collapsible-reverse > .dz-group-header .dz-nav-group-toggle {
   transform: rotate(-90deg);
 }
 
 .dz-nav-group.collapsible-reverse[aria-expanded="true"]
-  > .dz-nav-item
+  > .dz-group-header
   .dz-nav-group-toggle {
   transform: rotate(90deg);
 }

diff --git a/packages/layout/src/assets/css/layouts/sidebar-header-layout.css b/packages/layout/src/assets/css/layouts/sidebar-header-layout.css
@@ -20,6 +20,12 @@
   min-width: 100%;
 }
 
+.dz-sidebar-header-layout[data-user-menu-location="sidebar"]
+  > .dz-sidebar
+  > .dz-user-menu {
+  padding: 0.5rem 0;
+}
+
 @media screen and (min-width: 576px) {
   .dz-sidebar-header-layout {
     grid-template-areas:
@@ -61,17 +67,26 @@
   }
 
   /* user-menu-location --> sidebar */
-  .dz-sidebar-header-layout[data-user-menu-location="sidebar"]
-    > .dz-sidebar
-    > .dz-user-menu {
-    display: flex;
-    padding: 0.5rem 0;
-  }
-
   .dz-sidebar-header-layout[data-user-menu-location="sidebar"]
     > header
     .dz-header-menu
     > .dz-user-menu {
     display: none;
   }
+
+  .dz-sidebar-header-layout
+    > .dz-sidebar
+    > .dz-user-menu.collapsible
+    > .dz-group-header
+    .dz-nav-group-toggle {
+    transform: rotate(-90deg);
+  }
+
+  .dz-sidebar-header-layout
+    > .dz-sidebar
+    > .dz-user-menu.collapsible[aria-expanded="true"]
+    > .dz-group-header
+    .dz-nav-group-toggle {
+    transform: rotate(90deg);
+  }
 }
diff --git a/packages/layout/src/assets/css/layouts/sidebar-only-layout.css b/packages/layout/src/assets/css/layouts/sidebar-only-layout.css
@@ -16,6 +16,10 @@
   min-width: 100%;
 }
 
+.dz-sidebar-only-layout > .dz-sidebar > .dz-user-menu {
+  padding: 0.5rem 0;
+}
+
 @media screen and (min-width: 576px) {
   .dz-sidebar-only-layout {
     display: grid;
@@ -31,4 +35,20 @@
   .dz-sidebar-only-layout > main {
     overflow-y: auto;
   }
+
+  .dz-sidebar-only-layout
+    > .dz-sidebar
+    > .dz-user-menu.collapsible
+    > .dz-group-header
+    .dz-nav-group-toggle {
+    transform: rotate(-90deg);
+  }
+
+  .dz-sidebar-only-layout
+    > .dz-sidebar
+    > .dz-user-menu.collapsible[aria-expanded="true"]
+    > .dz-group-header
+    .dz-nav-group-toggle {
+    transform: rotate(90deg);
+  }
 }