feat(navigation): make <menu> display column on small screen for us…

…ability (#28)
lowlighter · Jun 5, 2024 · fee61db · fee61db
1 parent 0843410
commit fee61db
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 12 deletions.
diff --git a/app/mod.css b/app/mod.css
@@ -274,6 +274,7 @@ details summary a {
 
 /** Example tabs */
 .example-tabs {
+  align-items: end;
   justify-content: end;
   margin-bottom: 0;
   border-bottom: none;

diff --git a/app/mod.html b/app/mod.html
@@ -355,12 +355,12 @@ <h2 id="unstyled-scripting"><a href="#unstyled-scripting">Scripting</a></h2>
       {
         const prefers = matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light'
         document.querySelectorAll(".example-tabs li.color-scheme").forEach(element => {
-          element.querySelector(`svg.${prefers}`).style.display = "block"
+          element.querySelector(`svg.${prefers}`).style.display = "inline-block"
           element.addEventListener("click", event => {
             const example = element.parentNode.nextSibling
             example.dataset.colorScheme = (example.dataset.colorScheme ?? prefers) === 'light' ? 'dark' : 'light'
-            element.querySelector("svg.light").style.display = example.dataset.colorScheme === 'light' ? "block" : "none"
-            element.querySelector("svg.dark").style.display = example.dataset.colorScheme === 'dark' ? "block" : "none"
+            element.querySelector("svg.light").style.display = example.dataset.colorScheme === 'light' ? "inline-block" : "none"
+            element.querySelector("svg.dark").style.display = example.dataset.colorScheme === 'dark' ? "inline-block" : "none"
           });
         })
       }

diff --git a/styles/@layouts/mod.css b/styles/@layouts/mod.css
@@ -47,6 +47,7 @@ body.layout-simple > footer:last-of-type {
 }
 
 body.layout-simple > :is(header:first-of-type, footer:last-of-type) > nav > menu {
+  flex-direction: row;
   justify-content: center;
 }
 

diff --git a/styles/navigation/mod.css b/styles/navigation/mod.css
@@ -1,10 +1,8 @@
 /* Menu */
 menu {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-direction: column;
   padding: 0;
-  border-bottom: 1px solid var(--bd-muted);
   list-style: none;
 }
 
@@ -29,10 +27,10 @@ menu > li.selected {
 
 menu > li.selected::before {
   position: absolute;
-  right: 0;
-  bottom: -.5rem;
-  left: 0;
-  border-bottom: 2px solid currentColor;
+  top: .25rem;
+  bottom: .25rem;
+  left: -.25rem;
+  border-right: 2px solid currentColor;
   content: "";
 }
 
@@ -46,6 +44,23 @@ menu > li > :is(a, a:hover) {
   text-decoration: none;
 }
 
+@media (min-width: 544px) {
+  menu {
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-bottom: 1px solid var(--bd-muted);
+  }
+
+  menu > li.selected::before {
+    top: unset;
+    right: 0;
+    bottom: -.5rem;
+    left: 0;
+    border-bottom: 2px solid currentColor;
+    border-left: none;
+  }
+}
+
 /* Sub-menus */
 menu > li:has(> menu)::after {
   content: "▾";
@@ -75,6 +90,7 @@ menu > li:hover > menu {
 }
 
 menu > li > menu > li {
+  max-width: 70vw;
   margin: 0;
 }
 
@@ -83,8 +99,7 @@ menu > li > menu > li:hover {
 }
 
 menu > li > menu > li > menu {
-  top: 0;
-  left: 100%;
+  top: 100%;
 }
 
 menu > li > menu > li.selected::before {
@@ -95,6 +110,14 @@ menu > li > menu > li.selected::before {
   border-left: 2px solid currentColor;
 }
 
+@media (min-width: 544px) {
+  menu > li > menu > li > menu {
+    top: 0;
+    left: 100%;
+  }
+}
+
+
 /* Navigation */
 
 nav {