Merge pull request #14310 from craftcms/feature/sidebar-improvements

More sidebar improvements
craftcms · Feb 6, 2024 · 7dc495e · 7dc495e
2 parents 40a347f + 57504a0
commit 7dc495e
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 17 deletions.
diff --git a/packages/craftcms-sass/_mixins.scss b/packages/craftcms-sass/_mixins.scss
@@ -742,15 +742,28 @@ $menuBorderRadius: $mediumBorderRadius;
   width: var(--touch-target-size);
 }
 
+// https://tailwindcss.com/docs/screen-readers#undoing-screen-reader-only-elements
 @mixin visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
-  margin: 0;
+  margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
-  border: 0;
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@mixin not-visually-hidden {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
 }
 
 @mixin readable {

diff --git a/src/templates/_layouts/components/global-sidebar.twig b/src/templates/_layouts/components/global-sidebar.twig
@@ -74,6 +74,10 @@
                             {{ _self.action(item) }}
 
                             {% if item.subnav %}
+                                {% set icon = item.sel ? 'angle-down' : 'angle-right' %}
+                                <div type="button" class="nav-item__indicator">
+                                    <span class="cp-icon">{{ iconSvg(icon) }}</span>
+                                </div>
                                 <ul class="nav-item__subnav">
                                     {% for itemId, item in item.subnav %}
                                         {% set itemIsSelected = (

diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_global-sidebar.scss b/src/web/assets/cp/src/css/_global-sidebar.scss
@@ -46,7 +46,7 @@
 .global-nav > ul {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--xs);
 }
 
 .global-nav > ul > li {
@@ -58,7 +58,10 @@
 }
 
 .nav-icon {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   width: 1rem;
   aspect-ratio: 1;
   line-height: 0;
@@ -67,18 +70,17 @@
 
   > svg {
     @include svg-mask(currentColor);
-    max-width: 100%;
+    width: 100%;
+    height: 100%;
   }
 }
 
-.nav-item {
-}
-
 .nav-item__subnav {
   --prefix-ratio: 4/3;
+  @include visually-hidden;
 
-  [data-sidebar='collapsed'] & {
-    display: none;
+  .sel & {
+    @include not-visually-hidden;
   }
 }
 
@@ -97,7 +99,7 @@
 }
 
 .sidebar-actions {
-  padding: var(--s);
+  padding: 10px; // match padding of #system-info
 }
 
 .sidebar-action {
@@ -111,6 +113,7 @@
   color: currentColor;
   cursor: pointer;
   gap: 7px; // magic number to align with system name
+  min-height: 30px;
 
   &:before {
     content: '';
@@ -122,23 +125,52 @@
     width: var(--xs);
   }
 
+  &:focus-visible,
   &:hover {
     background-color: var(--gray-200);
   }
 
   &.sel {
     &:before {
+      --indicator-size: 6px;
       background-color: currentColor;
     }
   }
 }
 
+.nav-item__indicator {
+  --icon-size: 10px;
+  position: absolute;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  z-index: 1;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 100%;
+  top: 15px;
+  transform: translateY(-50%);
+  right: calc(var(--m) + var(--xs));
+
+  .cp-icon {
+    position: relative;
+    top: 0.5px;
+  }
+}
+
 .sidebar-action--sub {
+  --indicator-size: 4px;
+  font-size: 0.9em;
+  min-height: 26px;
+
   &:before {
-    width: 8px;
-    height: 8px;
+    width: var(--indicator-size);
+    height: var(--indicator-size);
     border-radius: 100%;
-    left: 11px; // magic number to align with center of the prefix icons
+    left: calc((30px / 2) - (var(--indicator-size) / 2));
+    top: 50%;
+    background-color: var(--gray-300);
   }
 }
 
@@ -209,8 +241,15 @@
 }
 
 .sidebar-action__badge {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   padding: 0 var(--s);
   margin-left: auto;
+
+  [data-sidebar='expanded'] .has-subnav & {
+    margin-right: var(--l);
+  }
 }
 
 /**
@@ -222,7 +261,14 @@ States
       width: var(--collapsed-width);
     }
 
+    .nav-item__indicator {
+      right: -1px;
+    }
+
     .sidebar-action {
+      width: 30px;
+      min-height: 30px;
+
       &:focus-visible,
       &:hover {
         .sidebar-action__label {
@@ -242,6 +288,7 @@ States
       color: var(--text-color);
       border-radius: var(--medium-border-radius);
       padding: var(--xs) var(--s);
+      pointer-events: none;
 
       @media screen and (prefers-reduced-motion: no-preference) {
         transition:
@@ -258,6 +305,16 @@ States
       transform: translateY(25%);
       padding: 0;
     }
+
+    .sidebar-action--sub {
+      min-height: 26px;
+
+      &:before {
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
+    }
   }
 
   [data-sidebar='expanded'] {

diff --git a/src/web/twig/variables/Cp.php b/src/web/twig/variables/Cp.php
@@ -366,7 +366,9 @@ public function nav(): array
                 $item['linkAttributes']['aria']['current'] = $item['url'] === $path ? 'page' : 'true';
             } else {
                 $item['sel'] = false;
-                $item['subnav'] = false;
+                if (!isset($item['subnav'])) {
+                    $item['subnav'] = false;
+                }
             }
 
             if (!isset($item['id'])) {