Rework header and navbar

static/icons/glyphicons-halflings-227-menu.svg

@@ -0,0 +1,3 @@
+<svg id="glyphicons-halflings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path id="menu" d="M17,4V5a1,1,0,0,1-1,1H4A1,1,0,0,1,3,5V4A1,1,0,0,1,4,3H16A1,1,0,0,1,17,4ZM16,8H4A1,1,0,0,0,3,9v1a1,1,0,0,0,1,1H16a1,1,0,0,0,1-1V9A1,1,0,0,0,16,8Zm0,5H4a1,1,0,0,0-1,1v1a1,1,0,0,0,1,1H16a1,1,0,0,0,1-1V14A1,1,0,0,0,16,13Z"/>
+</svg>

themes/zenn/sass/_components.scss

@@ -1,34 +1,50 @@
 /**
  * Logo banner.
  */
-header#banner .logo {
+header#banner {
-    display: inline-block;
+    .logo {
-    margin: 0.5em 0;
+        display: inline-block;
-    padding: 1rem 1.75rem;
+        margin: 0.5em 0;
-    overflow: visible;
+        padding: 0.5em 1em;
-    white-space: nowrap;
+        overflow: visible;
-    text-decoration: none;
+        white-space: nowrap;
-    user-select: none;
+        text-decoration: none;
-    transition: border-color 0.2s ease-in-out,
+        user-select: none;
-        color 0.2s ease-in-out,
+        transition: border-color 0.2s ease-in-out,
-        background-color 0.2s ease-in-out;
+            color 0.2s ease-in-out,
-    color: $logo-color;
+            background-color 0.2s ease-in-out;
-    border: $logo-color solid 5px;
+        color: $logo-color;
-    font-family: $font-logo;
+        border: $logo-color solid 0.2em;
-    font-size: 2rem;
+        font-family: $font-logo;
-    font-weight: 700;
+        font-size: 1.2rem;
-    letter-spacing: 0.075em;
+        font-weight: 700;
-    line-height: 1;
+        letter-spacing: 0.075em;
-    text-transform: uppercase;
+        line-height: 1;
+        text-transform: uppercase;
 
-    &:hover {
+        &:hover {
-        border-color: $logo-color-hover !important;
+            border-color: $logo-color-hover !important;
-        color: $logo-color-hover !important;
+            color: $logo-color-hover !important;
+        }
+        &:active {
+            border-color: $logo-color-hover !important;
+            color: $logo-color-hover !important;
+            background-color: rgba($logo-color-hover, 0.2) !important;
+        }
     }
-    &:active {
+
-        border-color: $logo-color-hover !important;
+    section.actions {
-        color: $logo-color-hover !important;
+        a.theme-toggle,
-        background-color: rgba($logo-color-hover, 0.2) !important;
+        a.navbar-toggle {
+            padding: 0.35em;
+            width: 1.5em;
+            height: 1.5em;
+
+            svg {
+                max-width: none !important;
+                max-height: none !important;
+            }
+        }
     }
 }
 
@@ -105,15 +121,6 @@ content {
     }
 }
 
-/**
- * Theme toggle button.
- */
-.theme-toggle {
-    font-size: 1.1rem;
-    line-height: 2.2em;
-    float: right;
-}
-
 /**
  * Text style modifiers.
  */

themes/zenn/sass/_config_dark.scss

@@ -18,6 +18,7 @@ $color-link: #02c39a;
 $color-link-hover: lighten($color-link, 15%);
 
 // Top logo and landing page
-$logo-color: #ddd;
+// $logo-color: #ddd;
+$logo-color: $color-text;
 $logo-color-hover: $color-link-hover;
 $landing-color-shadow: $color-main-border;

themes/zenn/sass/_layout.scss

@@ -1,10 +1,71 @@
 body > header {
-    text-align: center;
     margin: 1em 0;
+    padding: 0 2.5em 0 2.5em;
+}
+
+body > header {
+    display: grid;
+    column-gap: 1em;
+
+    grid-template-columns: min-content auto min-content;
+    grid-template-areas:
+        "logo nav actions";
+
+    a.logo {
+        grid-area: logo;
+        place-self: center;
+    }
+
+    section.navbar {
+        grid-area: nav;
+
+        ul {
+            list-style: none;
+            padding: 0;
+
+            li {
+                display: inline;
+                line-height: 2;
+                width: 100%;
+
+                a {
+                    display: inline-block;
+                    padding: 0 1em;
+                    font-family: $font-main;
+
+                    &.active {
+                        background-color: rgba($color-link, 0.1);
+                    }
+                    &:active {
+                        background-color: rgba($color-link-hover, 0.2);
+                    }
+                }
+            }
+
+            li.sub > a {
+                padding-left: 3rem;
+            }
+        }
+    }
+
+    section.actions {
+        grid-area: actions;
+        justify-self: end;
+        align-self: center;
+        display: flex;
+
+        a {
+            margin-left: 1em;
+        }
+
+        a.navbar-toggle {
+            display: none;
+        }
+    }
 }
 
 main {
-    margin: 0 1em 3em 1em;
+    margin: 0 0 3em 0;
     display: flex;
     color: $color-text;
     transition: color 0.2s ease;
@@ -12,8 +73,7 @@ main {
 
 content {
     font-family: $font-read;
-    padding: 2.5em;
+    padding: 0.5em 2.5em 2.5em 2.5em;
-    background: $color-main-bg;
     flex: 1;
     overflow-x: auto;
     overflow-y: visible;

themes/zenn/sass/_responsive.scss

@@ -9,30 +9,43 @@
 
     sidebar {
         width: auto;
+        border-left: none;
+        border-top: 1px dashed $color-main-border;
+    }
+
+    header#banner {
+        grid-template-columns: min-content auto;
+        grid-template-rows: min-content auto;
+        grid-template-areas:
+            "logo actions"
+            "nav nav";
+
+        // Use vertical navbar under header
+        section.navbar {
+            display: none;
+            &.visible {
+                display: block;
+            }
+
+            ul li a {
+                display: block;
+            }
+        }
+
+        section.actions .navbar-toggle {
+            display: block;
+        }
     }
 }
 
 @media (max-width: $responsive-mini) {
-    header#banner {
-        font-size: 0.7rem;
-        margin: 0.5em 0;
-
-        p.greeting.top {
-            margin-top: 2.5em;
-        }
-        a {
-            font-size: 1.3rem;
-        }
-    }
-
-    header#banner .logo {
-        padding: 0.7rem 1.25rem;
-        font-size: 1.5rem;
-        border-width: 4px;
-    }
-
     content {
-        padding: 1.5em 1em;
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    body > header {
+        padding: 0 1em 0 1em;
     }
 }
 

themes/zenn/static/js/theme.js

@@ -29,3 +29,7 @@ theme_set(localStorage.getItem('theme-toggled'));
 document.addEventListener("DOMContentLoaded", function(event) {
     document.body.classList.remove('notransition');
 });
+
+function navbar_toggle() {
+    document.getElementById('navbar').classList.toggle('visible');
+}

themes/zenn/templates/site.html

@@ -99,6 +99,33 @@
             {% block header %}
                 <header id="banner">
                     <a href="/" class="logo">{{ config.extra.zenn_title }}</a>
+
+                    {% if config.extra.zenn_menu -%}
+                        <section id="navbar" class="navbar">
+                            <ul>
+                                <nav itemscope itemtype="http://schema.org/SiteNavigationElement">
+                                    {% for item in config.extra.zenn_menu %}
+                                        <li>
+                                            <a itemprop="url"
+                                                    class="{% if item.url | replace(from="$BASE_URL", to=config.base_url) == current_url %}active{% endif %}"
+                                                    href="{{ item.url | safe | replace(from="$BASE_URL", to=config.base_url) }}">
+                                                <span itemprop="name">{{ item.name }}</span>
+                                            </a>
+                                        </li>
+                                    {% endfor %}
+                                </nav>
+                            </ul>
+                        </section>
+                    {%- endif %}
+
+                    <section class="actions">
+                        <a href="#" class="theme-toggle" onclick="theme_toggle(); return false;" title="Toggle light/dark mode">
+                            {{ load_data(path="static/icons/glyphicons-halflings-51-contrast.svg") | safe -}}
+                        </a>
+                        <a href="#" class="navbar-toggle" onclick="navbar_toggle(); return false;" title="Show/hide navbar">
+                            {{ load_data(path="static/icons/glyphicons-halflings-227-menu.svg") | safe -}}
+                        </a>
+                    </section>
                 </header>
             {% endblock header %}
         {%- endif -%}
@@ -106,10 +133,6 @@
         {% block main %}
             <main>
                 <content>
-                    <a href="#" class="theme-toggle" onclick="theme_toggle(); return false;" title="Toggle light/dark mode">
-                        {{ load_data(path="static/icons/glyphicons-halflings-51-contrast.svg") | safe -}}
-                    </a>
-
                     {% if section.title -%}
                         <header>
                             <h1>