compact navbar on mobile

Author: postpop

_layouts/default.html

@@ -28,6 +28,11 @@
         <header class="site-header">
             <div class="container site-header__inner">
                 <a class="site-title" href="{{ '/' | relative_url }}">{{ site.title }}</a>
+                <input class="site-nav-toggle" id="site-nav-toggle" type="checkbox" aria-label="Toggle main navigation">
+                <label class="nav-toggle" for="site-nav-toggle">
+                    <span class="nav-toggle__icon" aria-hidden="true"></span>
+                    <span class="visually-hidden">Menu</span>
+                </label>
                 <nav class="site-nav" aria-label="Main navigation">
                     {% for x in site.data.nav %}
                         <a class="nav-link" href="{{ x.link | relative_url }}">{{ x.name }}</a>

_sass/_style.scss

@@ -102,12 +102,18 @@ img {
     text-decoration: none;
 }
 
+.site-nav-toggle,
+.nav-toggle {
+    display: none;
+}
+
 .site-nav {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 24px;
     flex-wrap: wrap;
+    margin-left: auto;
 }
 
 .nav-link {
@@ -645,16 +651,6 @@ img {
         font-size: 17px;
     }
 
-    .site-header__inner {
-        align-items: flex-start;
-        flex-direction: column;
-    }
-
-    .site-nav {
-        justify-content: flex-start;
-        width: 100%;
-    }
-
     .page-hero h1 {
         font-size: 42px;
     }
@@ -700,6 +696,117 @@ img {
     }
 }
 
+@media (max-width: 760px) {
+    .site-header__inner {
+        position: relative;
+        min-height: 68px;
+        padding-right: 100px;
+        gap: 16px;
+    }
+
+    .site-title {
+        max-width: calc(100% - 100px);
+        font-size: 16px;
+    }
+
+    .nav-toggle {
+        position: absolute;
+        top: 50%;
+        right: 40px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        min-height: 40px;
+        padding: 0;
+        transform: translateY(-50%);
+        border: 1px solid var(--rule);
+        border-radius: 6px;
+        background: var(--paper);
+        color: var(--ink);
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 750;
+        line-height: 1;
+        list-style: none;
+    }
+
+    .site-nav-toggle {
+        position: absolute;
+        display: block;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .nav-toggle:hover,
+    .site-nav-toggle:checked + .nav-toggle {
+        border-color: var(--teal);
+        color: var(--teal);
+    }
+
+    .site-nav-toggle:focus-visible + .nav-toggle {
+        outline: 2px solid var(--accent);
+        outline-offset: 3px;
+    }
+
+    .nav-toggle__icon {
+        position: relative;
+        width: 16px;
+        height: 12px;
+        display: inline-block;
+        border-top: 2px solid currentColor;
+        border-bottom: 2px solid currentColor;
+    }
+
+    .nav-toggle__icon::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        border-top: 2px solid currentColor;
+        transform: translateY(-50%);
+    }
+
+    .site-nav-toggle:not(:checked) ~ .site-nav {
+        display: none;
+    }
+
+    .site-nav-toggle:checked ~ .site-nav {
+        position: absolute;
+        top: calc(100% + 10px);
+        right: 40px;
+        z-index: 20;
+        width: min(220px, calc(100vw - 32px));
+        display: grid;
+        align-items: stretch;
+        justify-content: stretch;
+        gap: 0;
+        padding: 8px;
+        border: 1px solid var(--rule);
+        border-radius: 6px;
+        background: var(--paper);
+        box-shadow: 0 16px 32px rgba(24, 32, 32, 0.12);
+    }
+
+    .site-nav-toggle:checked ~ .site-nav .nav-link {
+        display: block;
+        padding: 12px;
+        border-radius: 4px;
+        line-height: 1.2;
+    }
+
+    .site-nav-toggle:checked ~ .site-nav .nav-link:hover {
+        background: var(--soft);
+    }
+}
+
 @media (max-width: 580px) {
     .container {
         width: calc(100% - 32px);
@@ -710,12 +817,18 @@ img {
 
     .site-header__inner {
         min-height: auto;
-        padding: 18px 0;
-        gap: 18px;
+        padding-right: 60px;
+        padding-top: 18px;
+        padding-bottom: 18px;
+    }
+
+    .site-title {
+        max-width: calc(100% - 60px);
     }
 
-    .site-nav {
-        gap: 18px 22px;
+    .nav-toggle,
+    .site-nav-toggle:checked ~ .site-nav {
+        right: 0;
     }
 
     .home-hero {