Global nav subnav

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 {

src/templates/_layouts/components/global-sidebar.twig

@@ -74,11 +74,12 @@
                             {{ _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">
+                                <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">
                                     {% for itemId, item in item.subnav %}
                                         {% set itemIsSelected = (
                                             (selectedSubnavItem is defined and selectedSubnavItem == itemId) or

src/web/assets/cp/src/Craft.js

@@ -95,3 +95,4 @@ import './js/UserIndex.js';
 
 // Custom elements
 import './js/CraftGlobalSidebar.js';
+import './js/CraftDisclosure.js';

src/web/assets/cp/src/css/_cp.scss

@@ -23,7 +23,6 @@ $badgeColor: var(--gray-800);
   --neg-padding: calc(var(--padding) * -1);
   --sidebar-width: #{$sidebarWidth};
   --global-sidebar-width: #{$sidebarWidth};
-  --max-width: 1920px;
 }
 
 html {
@@ -274,10 +273,6 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-
-  & > .container {
-    flex: 1;
-  }
 }
 
 #alerts {
@@ -1697,9 +1692,3 @@ li.breadcrumb-toggle-wrapper {
     }
   }
 }
-
-.container {
-  width: 100%;
-  max-width: var(--max-width);
-  margin: 0 auto;
-}

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 {
@@ -74,11 +73,63 @@
   }
 }
 
+.nav-item {
+  display: grid;
+  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;
+  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 {
   --prefix-ratio: 4/3;
   @include visually-hidden;
+  grid-area: subnav;
 
-  .sel & {
+  &.is-open {
     @include not-visually-hidden;
   }
 }
@@ -137,27 +188,6 @@
   }
 }
 
-.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;
@@ -245,10 +275,6 @@
   justify-content: center;
   padding: 0 var(--s);
   margin-left: auto;
-
-  [data-sidebar='expanded'] .has-subnav & {
-    margin-right: var(--l);
-  }
 }
 
 /**
@@ -277,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;
@@ -299,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;
     }
@@ -314,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'] {

src/web/assets/cp/src/css/_main.scss

@@ -605,7 +605,7 @@ a.iconlink {
 }
 
 a.sel,
-li.sel a {
+li.sel > a {
   cursor: default !important;
   text-decoration: none;
 }

src/web/assets/cp/src/js/CraftDisclosure.js

@@ -0,0 +1,55 @@
+/**
+ * Very simple disclosure trigger.
+ *
+ * Allows you to wrap a button[type="button"] and target an element to toggle the `is-open` class on.
+ * Set `aria-expanded` on the button
+ */
+class CraftDisclosure extends HTMLElement {
+  connectedCallback() {
+    this.trigger = this.querySelector('button[type="button"]');
+    if (!this.trigger) {
+      console.error(`craft-disclosure elements must include a button`, this);
+      return;
+    }
+
+    this.target = document.getElementById(
+      this.trigger.getAttribute('aria-controls')
+    );
+    if (!this.target) {
+      console.error(`No target found for disclosure`, this.trigger);
+      return;
+    }
+
+    if (!this.trigger.getAttribute('aria-expanded')) {
+      this.trigger.setAttribute('aria-expanded', 'false');
+    }
+
+    this.trigger.addEventListener('click', this.toggle.bind(this));
+
+    this.expanded = this.trigger.getAttribute('aria-expanded') === 'true';
+  }
+
+  toggle() {
+    if (this.expanded) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    this.trigger.setAttribute('aria-expanded', 'true');
+    this.expanded = true;
+    this.target.classList.add('is-open');
+    console.log('opening');
+  }
+
+  close() {
+    this.trigger.setAttribute('aria-expanded', 'false');
+    this.expanded = false;
+    this.target.classList.remove('is-open');
+    console.log('closing');
+  }
+}
+
+customElements.define('craft-disclosure', CraftDisclosure);