Expandable sidebar nav

craftcms · Feb 7, 2024 · 5056b88 · 5056b88
1 parent 3b6e763
commit 5056b88
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 38 deletions.
diff --git a/packages/craftcms-sass/_mixins.scss b/packages/craftcms-sass/_mixins.scss
@@ -270,9 +270,11 @@ $menuBorderRadius: $mediumBorderRadius;
   border: solid $color;
   border-width: 0 $width $width 0;
   opacity: 0.8;
+  position: relative;
 
   @if $dir == up {
     transform: rotate(225deg);
+    top: 2px;
   } @else if $dir == down {
     transform: rotate(45deg);
   } @else if $dir == left {

diff --git a/src/templates/_layouts/components/global-sidebar.twig b/src/templates/_layouts/components/global-sidebar.twig
@@ -74,9 +74,9 @@
                             {{ _self.action(item) }}
 
                             {% if item.subnav %}
-                                <craft-disclosure>
-                                  <button type="button" class="nav-item__trigger" aria-controls="{{ item.id }}-subnav" aria-expanded="{{ item.sel ?  'true' : 'false' }}">
-                                      <span class="cp-icon">{{ iconSvg('angle-down') }}</span>
+                                <craft-disclosure class="nav-item__trigger">
+                                  <button type="button" class="btn menubtn hairline" aria-controls="{{ item.id }}-subnav" aria-expanded="{{ item.sel ?  'true' : 'false' }}">
+                                      <span class="visually-hidden">{{ 'Open subnavigation' |t('app') }}</span>
                                   </button>
                                 </craft-disclosure>
                                 <ul class="nav-item__subnav {{ item.sel ? 'is-open' : '' -}}" id="{{ item.id }}-subnav">

diff --git a/src/web/assets/cp/src/css/_global-sidebar.scss b/src/web/assets/cp/src/css/_global-sidebar.scss
@@ -45,12 +45,11 @@
 .global-nav > ul {
   display: flex;
   flex-direction: column;
-  gap: var(--xs);
+  gap: var(--s);
 }
 
 .global-nav > ul > li {
   position: relative;
-  padding: 0 10px; // match padding of #system-info
 }
 
 .global-nav > ul > li.sel {
@@ -76,14 +75,53 @@
 
 .nav-item {
   display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-areas: 'action trigger' 'subnav subnav';
+  grid-template-columns: 10px 1fr var(--prefix-size) 10px;
+  grid-template-areas: '. action trigger .' 'subnav subnav subnav subnav';
   align-items: center;
+  width: 100%;
+
+  > .sidebar-action {
+    grid-area: action;
+  }
+
+  [data-sidebar='collapsed'] & {
+    grid-template-areas: '. action .' '. trigger .' 'subnav subnav subnav';
+    grid-template-columns: 10px var(--prefix-size) 10px;
+  }
 }
 
 .nav-item__trigger {
+  --icon-size: 10px;
+  --trigger-size: var(--touch-target-size);
   grid-area: trigger;
-  margin-inline: var(--xs);
+  display: flex;
+  z-index: 1;
+
+  .menubtn {
+    padding: 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: var(--trigger-size);
+    height: var(--trigger-size);
+    border: transparent;
+
+    &:hover {
+      background-color: var(--ui-control-bg-color);
+    }
+
+    &[aria-expanded='true']:not(:hover) {
+      background-color: transparent;
+    }
+
+    &[aria-expanded='true']:after {
+      @include angle(up);
+    }
+
+    &:after {
+      margin-left: 0 !important;
+    }
+  }
 }
 
 .nav-item__subnav {
@@ -150,33 +188,6 @@
   }
 }
 
-.nav-item__trigger {
-  --icon-size: 10px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  z-index: 1;
-  border: 1px solid var(--hairline-color);
-  border-radius: var(--medium-border-radius);
-  width: var(--touch-target-size);
-  height: var(--touch-target-size);
-
-  &:hover,
-  &:focus-visible {
-    background-color: var(--gray-200);
-  }
-
-  .cp-icon {
-    position: relative;
-    top: 0.5px;
-  }
-
-  &[aria-expanded='true'] > .cp-icon {
-    transform: rotate(180deg);
-  }
-}
-
 .sidebar-action--sub {
   --indicator-size: 4px;
   font-size: 0.9em;
@@ -292,9 +303,18 @@ States
       }
     }
 
+    .nav-item__trigger {
+      .menubtn {
+        width: 100%;
+        height: auto;
+        padding-block: 2px var(--xs);
+      }
+    }
+
     .sidebar-action__label {
       position: absolute;
-      left: calc(100% + (var(--s) * 2));
+      z-index: 10;
+      left: calc(100% + (var(--xs) * 2));
       top: 50%;
       transform: translateY(-50%) translateX(-5px);
       opacity: 0;
@@ -314,8 +334,8 @@ States
     .sidebar-action__badge {
       z-index: 100;
       position: absolute;
-      right: 0;
-      bottom: 0;
+      right: calc(var(--xs) * -1);
+      bottom: var(--xs);
       transform: translateY(25%);
       padding: 0;
     }
@@ -329,6 +349,21 @@ States
         transform: translateX(-50%) translateY(-50%);
       }
     }
+
+    .global-nav > ul > li + li {
+      --separator-width: 28px;
+
+      &:before {
+        position: absolute;
+        top: calc(var(--s) / -2);
+        left: calc((var(--global-sidebar-width) - var(--separator-width)) / 2);
+        content: '';
+        width: var(--separator-width);
+        height: 1px;
+        margin: 0 auto;
+        background-color: var(--hairline-color);
+      }
+    }
   }
 
   [data-sidebar='expanded'] {