Merge pull request #1201 from maxmind/kevin/sidebar-overview

Toggle sidebar sections
maxmind · Oct 9, 2024 · 744e1ba · 744e1ba
2 parents 34eb6f8 + e3ca4b8
commit 744e1ba
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 18 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
diff --git a/assets/js/sidebar.ts b/assets/js/sidebar.ts
@@ -5,7 +5,7 @@ document
     const child = sidebarParent.parentNode.querySelector(
       '.js-sidebar-child-group'
     );
-    const caret = sidebarParent.parentNode
+    const caret = sidebarParent
       .querySelector('.js-sidebar-toggle')
       .querySelector('.caret');
 
@@ -18,17 +18,16 @@ document
   });
 
 // Handle toggle click behaviour
-document.querySelectorAll('.js-sidebar-toggle').forEach((toggle) => {
+document.querySelectorAll('.js-sidebar-parent').forEach((toggle) => {
   toggle.addEventListener('click', (e) => {
     e.preventDefault();
-    const sidebarParent = toggle.parentNode.querySelector('.js-sidebar-parent');
     const child = toggle.parentNode.querySelector('.js-sidebar-child-group');
     const caret = toggle.querySelector('.caret');
 
     // We aren't using the class here because expanded parents are not always active
-    const isExpanded = sidebarParent?.getAttribute('aria-expanded') === 'true';
+    const isExpanded = toggle?.getAttribute('aria-expanded') === 'true';
 
-    sidebarParent?.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
+    toggle?.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
     child?.setAttribute('aria-hidden', isExpanded ? 'true' : 'false');
     child?.classList.toggle('hide', isExpanded);
     caret?.classList.toggle('rotate', isExpanded);

diff --git a/assets/scss/_sidebar.scss b/assets/scss/_sidebar.scss
@@ -129,10 +129,17 @@
   font-size: 16px;
   font-weight: 700;
   margin-bottom: calc(var(--mm-spacing) / 8);
+  outline: none;
+  width: 100%;
 
-  &:hover {
+  &:hover,
+  &:focus {
     text-decoration: none;
   }
+
+  &:hover .caret {
+    fill: var(--mm-color-display-text);
+  }
 }
 
 .sidebar__toggle {

diff --git a/hugo.toml b/hugo.toml
@@ -22,11 +22,16 @@ title = 'MaxMind'
     name = 'minFraud'
     pageRef = '/minfraud'
     weight = 10
+    [[menus.minfraud]]
+      name = 'Overview'
+      pageRef = '/minfraud'
+      parent = 'minFraud'
+      weight = 10
     [[menus.minfraud]]
       name = 'Evaluate a Transaction'
       pageRef = '/minfraud/evaluate-a-transaction'
       parent = 'minFraud'
-      weight = 10
+      weight = 15
     [[menus.minfraud]]
       name = 'Report a transaction'
       pageRef = '/minfraud/report-a-transaction'
@@ -86,11 +91,16 @@ title = 'MaxMind'
     name = 'GeoIP'
     pageRef = '/geoip'
     weight = 10
+    [[menus.geoip]]
+      name = 'Overview'
+      pageRef = '/geoip'
+      parent = 'GeoIP'
+      weight = 10
     [[menus.geoip]]
       name = 'Geolocate an IP'
       pageRef = '/geoip/geolocate-an-ip'
       parent = 'GeoIP'
-      weight = 10
+      weight = 15
       [[menus.geoip]]
         name = 'Databases'
         pageRef = '/geoip/geolocate-an-ip/databases'

diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -8,13 +8,13 @@
         href="{{ .URL }}"
         >
         {{ .Name }}
+        <div aria-label="Toggle sub-menu" class="sidebar__toggle js-sidebar-toggle">
+          <svg aria-hidden="true" class="caret rotate" focusable="false" height="16" role="img" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 10.5L3.5 6l1-1 3.5 3.5L11 5l1 1z"></path>
+          </svg>
+        </div>
         </a>
         {{ if .HasChildren }}
-          <div aria-label="Toggle sub-menu" class="sidebar__toggle js-sidebar-toggle">
-            <svg aria-hidden="true" class="caret rotate" focusable="false" height="16" role="img" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-              <path d="M8 10.5L3.5 6l1-1 3.5 3.5L11 5l1 1z"></path>
-            </svg>
-          </div>
           <ul class="sidebar__child-group js-sidebar-child-group">
             {{ range .Children }}
             <li {{ if or (eq .Name "API Documentation") (eq .Name "minFraud Legacy") }} class="sidebar__group-break" {{ end }}>
@@ -54,13 +54,13 @@
         href="{{ .URL }}"
         >
         {{ .Name }}
+        <div aria-label="Toggle sub-menu" class="sidebar__toggle js-sidebar-toggle">
+          <svg aria-hidden="true" class="caret rotate" focusable="false" height="16" role="img" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 10.5L3.5 6l1-1 3.5 3.5L11 5l1 1z"></path>
+          </svg>
+        </div>
         </a>
         {{ if .HasChildren }}
-          <div aria-label="Toggle sub-menu" class="sidebar__toggle js-sidebar-toggle">
-            <svg aria-hidden="true" class="caret rotate" focusable="false" height="16" role="img" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-              <path d="M8 10.5L3.5 6l1-1 3.5 3.5L11 5l1 1z"></path>
-            </svg>
-          </div>
           <ul class="sidebar__child-group js-sidebar-child-group">
             {{ range .Children }}
               <li {{ if or (eq .Name "Web Services Documentation") (eq .Name "GeoLite2 Free Geolocation Data") }} class="sidebar__group-break" {{ end }}>