feat: brand new header layout flex

BREAKING CHANGE: config.toml is changed

This commit removes some configuration params. Please be sure to
check the modification history of the configuration file and
modify related items after the update!

https://github.com/reuixiy/hugo-theme-meme/commits/master/config-examples

assets/js/header.js

@@ -0,0 +1,20 @@
+// Header Inner Width
+
+const headerInner = document.querySelector('.header-inner');
+const mainInner = document.querySelector('.main-inner');
+
+function setHeaderInnerWidth() {
+    const mainInnerWidth = window.getComputedStyle(mainInner, null).getPropertyValue('width');
+
+    headerInner.style.setProperty('--main-inner', mainInnerWidth);
+}
+
+if (mainInner !== null) {
+    setHeaderInnerWidth();
+
+    window.addEventListener('resize', setHeaderInnerWidth);
+} else {
+    {{ with .Site.Params.headerFallbackWidth | default "32em" }}
+        headerInner.style.setProperty('--main-inner', '{{ . }}');
+    {{ end }}
+}

assets/js/nav-toggle.js

@@ -0,0 +1,68 @@
+// Create nav toggle icon
+
+const navToggleLabel = document.querySelector('.nav-toggle');
+const navToggleLabelInner = document.createElement('div');
+
+navToggleLabelInner.className = 'nav-toggle-inner';
+navToggleLabel.appendChild(navToggleLabelInner);
+
+for (let i = 0; i < 3; i++) {
+    const span = document.createElement('span');
+
+    navToggleLabelInner.appendChild(span);
+}
+
+
+// Main function
+
+const navToggle = document.getElementById('nav-toggle');
+const header = document.querySelector('.header');
+const navCurtain = document.querySelector('.nav-curtain');
+
+navToggle.addEventListener('change', (e) => {
+    if (e.target.checked) {
+        header.classList.add('open');
+        navToggleLabel.classList.add('open');
+
+        header.classList.remove('fade');
+
+        navCurtain.style = 'display: block';
+    } else {
+        header.classList.remove('open');
+        navToggleLabel.classList.remove('open');
+
+        header.classList.add('fade');
+
+        // Cannot remove `display: block` immediately, or CSS animation
+        // will failed. The workaround is down below.
+
+        // navCurtain.removeAttribute('style');
+    }
+});
+
+
+// Fix animation failed caused by removing `display: block`
+
+navCurtain.addEventListener('animationend', (e) => {
+    if (!navToggle.checked) {
+        e.target.removeAttribute('style');
+    }
+});
+
+
+// Close nav when window is scrolled or resized by user
+
+window.addEventListener('scroll', closeNav);
+
+window.addEventListener('resize', closeNav);
+
+function closeNav() {
+    if (navToggle.checked) {
+        navToggle.checked = false;
+
+        header.classList.remove('open');
+        navToggleLabel.classList.remove('open');
+
+        header.classList.add('fade');
+    }
+}

assets/scss/base/_base.scss

@@ -25,6 +25,12 @@ body {
     display: block;
 }
 
+@if ($headerLayoutFlex) {
+    .main {
+        padding-top: 7em;
+    }
+}
+
 .main-inner {
     margin: 0 auto;
     display: block;

assets/scss/base/_responsive.scss

@@ -7,12 +7,129 @@
         transform: none;
         float: right;
     }
-    .menu {
-        display: flex;
-        justify-content: space-around;
-        word-break: break-all;
-    }
-    .menu-item {
-        margin: 0;
+    @if ($headerLayoutFlex) {
+        @if ($enableNavToggle) {
+            .header-inner {
+                display: block;
+                margin: 0;
+            }
+            .header-inner {
+                width: 100%;
+            }
+            .site-brand {
+                margin-left: 1em;
+            }
+            .nav-toggle {
+                display: block;
+            }
+            .nav {
+                display: none;
+                text-align: center;
+                margin: 2em 0;
+            }
+            .menu {
+                display: grid;
+                grid-template-columns: 1fr 1fr 1fr;
+                align-items: center;
+            }
+            .menu-item {
+                margin: 0;
+                padding: 1em;
+                .icon {
+                    margin: 0;
+                }
+            }
+            .menu-item-name {
+                display: block;
+                margin: 0;
+            }
+            .header.open {
+                .nav {
+                    display: block;
+                    animation: appear $duration;
+                    animation-iteration-count: 1;
+                    animation-fill-mode: forwards;
+                }
+                @keyframes appear {
+                    0% {
+                        opacity: 0;
+                        height: 0;
+                        margin: 0;
+                        transform: scaleY(0);
+                        transform-origin: top;
+                    }
+                    100% {
+                        opacity: 1;
+                        height: $navHeight;
+                        margin: 2em 0;
+                        transform: scaleY(1);
+                        transform-origin: top;
+                    }
+                }
+                .nav-curtain {
+                    animation: appearCurtain $duration;
+                    animation-iteration-count: 1;
+                    animation-fill-mode: forwards;
+                }
+                @keyframes appearCurtain {
+                    0% {
+                        visibility: hidden;
+                        opacity: 0;
+                    }
+                    100% {
+                        visibility: visible;
+                        opacity: 1;
+                    }
+                }
+            }
+            .header.fade {
+                .nav {
+                    display: block;
+                    animation: fade $duration;
+                    animation-iteration-count: 1;
+                    animation-fill-mode: forwards;
+                }
+                @keyframes fade {
+                    0% {
+                        opacity: 1;
+                        height: $navHeight;
+                        margin: 2em 0;
+                        transform: scaleY(1);
+                        transform-origin: top;
+                    }
+                    100% {
+                        opacity: 0;
+                        height: 0;
+                        margin: 0;
+                        transform: scaleY(0);
+                        transform-origin: top;
+                    }
+                }
+                .nav-curtain {
+                    animation: fadeCurtain $duration;
+                    animation-iteration-count: 1;
+                    animation-fill-mode: forwards;
+                }
+                @keyframes fadeCurtain {
+                    0% {
+                        visibility: visible;
+                        opacity: 1;
+                    }
+                    100% {
+                        visibility: hidden;
+                        opacity: 0;
+                    }
+                }
+            }
+        }
+    } @else {
+        .menu {
+            display: flex;
+            justify-content: space-around;
+            word-break: break-all;
+        }
+        .menu-item {
+            margin: 0;
+        }
     }
 }

assets/scss/components/_dark-mode.scss

@@ -1,11 +1,25 @@
 #theme-switcher {
-    padding: 1em;
     cursor: pointer;
-    float: right;
     position: relative;
     z-index: 4;
 }
 
-[data-theme="dark"] img {
-    filter: brightness(50%);
+[data-theme="dark"] {
+    img {
+        filter: brightness(50%);
+    }
+    #theme-switcher, #lang-switcher {
+        opacity: 0.5;
+    }
+}
+
+@if ($headerLayoutFlex) {
+    #theme-switcher {
+        padding: 0;
+    }
+} @else {
+    #theme-switcher {
+        padding: 1em;
+        float: right;
+    }
 }

assets/scss/components/_multilingual.scss

@@ -1,13 +1,27 @@
 #lang-switcher {
-    padding: 1em;
-    float: left;
     position: relative;
     z-index: 4;
 }
 
 #langs {
+    display: none;
+    position: absolute;
     margin: 0;
     padding: 0;
     list-style: none;
-    display: none;
+}
+
+@if ($headerLayoutFlex) {
+    #lang-switcher {
+        padding: 0;
+    }
+    #langs {
+        left: 0;
+        right: 0;
+    }
+} @else {
+    #lang-switcher {
+        padding: 1em;
+        float: left;
+    }
 }

assets/scss/components/_nav-toggle.scss

@@ -0,0 +1,63 @@
+#nav-toggle {
+    display: none;
+}
+
+.nav-toggle {
+    display: none;
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    margin-right: 1em;
+    width: 1em;
+    height: 1em;
+    cursor: pointer;
+}
+
+.nav-toggle-inner {
+    padding: 1em;
+    display: inline-block;
+}
+
+.nav-toggle {
+    span {
+        display: block;
+        position: absolute;
+        height: 0.1em;
+        width: 1em;
+        background-color: var(--color-contrast-high);
+        transition: all $duration;
+        &:nth-child(1) {
+            top: 0.4em;
+        }
+        &:nth-child(2) {
+            top: 0.7em;
+        }
+        &:nth-child(3) {
+            top: 1em;
+        }
+    }
+    &.open {
+        span {
+            &:nth-child(1) {
+                top: 75%;
+                transform: rotate(225deg);
+            }
+            &:nth-child(2) {
+                width: 0;
+                opacity: 0;
+                transform: rotate(-135deg);
+            }
+            &:nth-child(3) {
+                top: 75%;
+                transform: rotate(-45deg);
+            }
+        }
+    }
+}
+
+.nav-curtain {
+    height: 100vh;
+    width: 100vw;
+    backdrop-filter: saturate(180%) blur(1em);
+    background: $headerBackground rgba(0, 0, 0, 0.5);
+}