feat: stop using a hamburger menu on mobile, use a CSS Grid powered sub-nav

Author: vivshaw

.notes/todo.md

@@ -23,10 +23,6 @@
   - [ ] Fix janky width changing when scrollbar shows or hides, again. now it's on smaller screens?
   - [ ] more accessible focus states
   - [ ] new icon. dark mode icon would be sick whilst I'm at it.
-  - [ ] selecting a menu option in mobile menu should close that menu
-  - [ ] mobile menu should disable scroll
-  - [ ] fix navbar appearance & alignment in mobile menu- mobile menu options should be left-aligned with navbar
-    - [ ] navbar also aligns jankily with Home and Blog, and shifts jankily when scrollbar is present. maybe a bigger fix needed
 - [ ] styling
   - [ ] find a more ergonomic solution for light/dark/system mode
   - [ ] stop using global transition variables, and standardize transitions more generally
@@ -35,7 +31,7 @@
   - [ ] obliterate `pageStyles` directory
   - [ ] restyle so all pages can share `.centeringWrapper` etc. and Navbar can be pulled into the main layout
     - [ ] could then expand the use of grid from something that lives inside the blog post, to something used globally
-    - [ ] that'd also let me make footer spacing really consistent, by defining it on the main wrapepr
+    - [ ] that'd also let me make footer spacing really consistent, by defining it on the main wrapper
 - [ ] make a better README
 - [ ] get rid of ugly typecasts and disorganized logic in the metadata helpers
 - [ ] stop using Adobe fonts so I can host locally and preload. go directly through Canada Type

src/app/_components/DarkModeToggle.css.ts

@@ -8,6 +8,9 @@ import {
 } from "#viriditas/theme/theme.css"
 
 export const root = style({
+  position: "relative",
+  top: -1, // for visual centering with the display font
+
   selectors: {
     // One can only toggle the color mode when JS is active to control the color mode.
     // If the default `SYSTEM_COLOR_MODE_CLASS` is still set, then we can't control the color mode.

src/app/_components/MobileMenu.css.ts

@@ -2,31 +2,15 @@ import { style } from "@vanilla-extract/css"
 
 import { breakpoints, tokens } from "#viriditas/theme/theme.css"
 
-export const interactionHover = style({
-  opacity: 0.5,
-  transition: "opacity 0.3s ease",
-
-  ":hover": {
-    opacity: 1,
-  },
-})
-
-export const iconButton = style([
-  interactionHover,
-  {
-    alignItems: "center",
-    borderRadius: "5px",
-    display: "flex",
-    height: "25px",
-    justifyContent: "center",
-    position: "relative",
-    width: "40px",
-  },
-])
-
 export const root = style({
-  display: "flex",
-  height: "40px",
+  alignItems: "center",
+  display: "grid",
+  gridTemplateColumns: "min-content 1fr min-content",
+  gridTemplateRows: "auto",
+  gridTemplateAreas: `
+    "logo    controls right-button"
+    "sub-nav sub-nav  sub-nav"
+  `,
   justifyContent: "space-between",
   marginTop: "100px",
   maxWidth: "1440px",
@@ -48,9 +32,33 @@ export const root = style({
   },
 })
 
+export const interactionHover = style({
+  opacity: 0.5,
+  transition: "opacity 0.3s ease",
+
+  ":hover": {
+    opacity: 1,
+  },
+})
+
+export const iconButton = style([
+  interactionHover,
+  {
+    alignItems: "center",
+    borderRadius: "5px",
+    display: "flex",
+    gridArea: "right-button",
+    height: "25px",
+    justifyContent: "center",
+    position: "relative",
+    width: "40px",
+  },
+])
+
 export const logoLink = style({
   color: tokens.color.primary,
   fontSize: "27px",
+  gridArea: "logo",
   transition: "color 0.3s ease",
 
   ":hover": {
@@ -59,13 +67,18 @@ export const logoLink = style({
 })
 
 export const controls = style({
+  // By default, the control are in the top row, between the logo and dark mode toggle.
   alignItems: "center",
   display: "flex",
+  gridArea: "controls",
+  justifyContent: "flex-end",
   position: "relative",
 
   "@media": {
     [breakpoints.tablet]: {
-      display: "none",
+      // On small screens, the controls go in a second row.
+      gridArea: "sub-nav",
+      justifyContent: "flex-start",
     },
   },
 })
@@ -82,5 +95,11 @@ export const link = style([
   {
     color: tokens.color.primary,
     fontSize: "27px",
+
+    "@media": {
+      [breakpoints.tablet]: {
+        fontSize: "18px",
+      },
+    },
   },
 ])

src/app/_components/MobileMenu.tsx

@@ -2,8 +2,7 @@ import Link from "next/link"
 
 import { centeringWrapper } from "#pageStyles/main.css"
 import { DarkModeToggle } from "./DarkModeToggle"
-import { MobileMenu } from "./MobileMenu"
-import { logoLink, root, controls, linkList, link } from "./Navbar.css"
+import { controls, link, linkList, logoLink, root } from "./Navbar.css"
 
 export function Navbar() {
   return (
@@ -31,10 +30,9 @@ export function Navbar() {
               </Link>
             </li>
           </ul>
-          <DarkModeToggle />
         </div>
 
-        <MobileMenu />
+        <DarkModeToggle />
       </nav>
     </div>
   )