Merge pull request #765 from gethinode/develop

Refactor navbar to use color themes in overlay mode

.github/workflows/lint-build.yml

@@ -41,10 +41,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [windows-latest, ubuntu-latest]
-        # 2024-02-07: temp disabled macOS due to Dart Sass installation error
-        # see https://github.com/sass/homebrew-sass/issues/57 
-        # os: [macos-latest, windows-latest, ubuntu-latest]
+        os: [macos-latest, windows-latest, ubuntu-latest]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
         node-version: [18.x, 20.x]
 

assets/js/navbar.js

@@ -13,8 +13,12 @@ if (navbar !== null && togglers !== null) {
   window.onscroll = () => {
     if (window.scrollY > 75) {
       navbar.classList.add('nav-active')
+      const storedTheme = localStorage.getItem('theme')
+      navbar.setAttribute('data-bs-theme', storedTheme)
     } else {
       navbar.classList.remove('nav-active')
+      const defaultTheme = navbar.getAttribute('data-bs-overlay')
+      navbar.setAttribute('data-bs-theme', defaultTheme)
     }
   }
 

assets/scss/components/_navbar.scss

@@ -41,28 +41,6 @@
     box-shadow: $box-shadow-sm;
 }
 
-.navbar-overlay-dark {
-    --bs-navbar-color: #{$navbar-dark-color};
-    --bs-navbar-hover-color: #{$navbar-dark-hover-color};
-    --bs-navbar-disabled-color: #{$navbar-dark-disabled-color};
-    --bs-navbar-active-color: #{$navbar-dark-active-color};
-    --bs-navbar-brand-color: #{$navbar-dark-brand-color};
-    --bs-navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
-    --bs-navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
-    --bs-navbar-toggler-color: white;
-}
-
-.navbar-overlay-light, .navbar-overlay-dark.nav-active, .navbar-overlay-dark.navbar-expanded {
-    --bs-navbar-color: #{$navbar-light-color};
-    --bs-navbar-hover-color: #{$navbar-light-hover-color};
-    --bs-navbar-disabled-color: #{$navbar-light-disabled-color};
-    --bs-navbar-active-color: #{$navbar-light-active-color};
-    --bs-navbar-brand-color: #{$navbar-light-brand-color};
-    --bs-navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
-    --bs-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-    --bs-navbar-toggler-color: black;
-}
-
 .nav-item .vr {
     color: var(--bs-navbar-color);
 }

exampleSite/hugo_stats.json

@@ -15,6 +15,7 @@
       "form",
       "h2",
       "h3",
+      "h5",
       "head",
       "hr",
       "html",
@@ -307,6 +308,11 @@
       "navbar-toggler",
       "next",
       "no-js",
+      "offcanvas",
+      "offcanvas-body",
+      "offcanvas-header",
+      "offcanvas-start",
+      "offcanvas-title",
       "order-0",
       "order-1",
       "order-first",
@@ -520,6 +526,8 @@
       "navbar-sample-collapse",
       "navigation",
       "notification",
+      "offcanvas-label",
+      "offcanvass-sidebar",
       "persona",
       "projecten",
       "projects",

layouts/_default/single.html

@@ -3,8 +3,18 @@
     {{ $sidebar := .Render "single/sidebar" }}
     {{ $toc := .Render "single/panel-toc" }}
 
-    {{ $sidebar | safeHTML }}
-    
+    {{ with $sidebar }}
+        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
+            <div class="offcanvas-header">
+                <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper $.Section }}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{ T "close" }}"></button>
+            </div>
+            <div class="offcanvas-body">
+                {{ . | safeHTML }}
+            </div>
+        </div>
+    {{ end }}
+
     <div class="container-xxl flex-fill p-4 px-xxl-0">
         {{ if $sidebar -}}
             <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2 row-cols-{{ $breakpoint.next }}-3">

layouts/_default/single/sidebar.html

@@ -2,18 +2,6 @@
 {{- $version := .Scratch.Get "version" -}}
 {{ $sidebar := "" }}
 {{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
-{{ if and $menu $hasSidebar  }}{{ $sidebar = partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}{{ end }}
-
-{{ if $sidebar -}}
-    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
-        <div class="offcanvas-header">
-            <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper $.Section }}</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{ T "close" }}"></button>
-        </div>
-        <div class="offcanvas-body">
-            {{ $sidebar | safeHTML }}
-        </div>
-    </div>
-{{ else if .Site.Params.navigation.sidebar }}
-    &nbsp;
+{{ if and $menu $hasSidebar  }}
+    {{ partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}
 {{ end }}

layouts/partials/assets/button.html

@@ -16,8 +16,8 @@
 {{- $title := trim .title " \r\n" -}}
 {{- $icon := .icon }}
 {{- if not (or $title $icon) -}}
-    {{- errorf "partial [assets/button.html] - Missing element title or icon" -}}
-    {{ $error = true }}
+    {{- warnf "partial [assets/button.html] - Missing element title or icon" -}}
+    {{ $title = T "linkPlaceholder" }}
 {{- end -}}
 
 {{- $id := .id }}

layouts/partials/assets/navbar.html

@@ -173,10 +173,13 @@
 <div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
     <nav class="navbar p-4
-        {{ if $overlay }}navbar-overlay-{{ $overlayMode }}{{ else }}{{ with $color }}bg-{{ . }}{{ end }}{{ end }}
-        {{ if $fixed }}navbar-fixed-top{{ end }} navbar-expand-{{ $size }}
-        {{ if $contrast }}navbar-contrast{{ end }}"
-        {{ with $theme }}data-bs-theme="{{ . }}"{{ end }}
+        {{- if not $overlay }}{{ with $color }} bg-{{ . }}{{ end }}{{ end -}}
+        {{ if $fixed }} navbar-fixed-top{{ end }} navbar-expand-{{ $size -}}
+        {{ if $contrast }} navbar-contrast{{ end }}"
+        {{ if $overlay }}
+        data-bs-theme="{{ $overlayMode }}"
+        data-bs-overlay="{{ $overlayMode }}"
+        {{ else }}{{ with $theme }}data-bs-theme="{{ . }}"{{ end }}{{ end }}
         {{ if $overlay }}data-navbar-color="{{ $color }}"{{ end }}
         >
         <div class="container-xxl p-0">

netlify.toml

@@ -4,8 +4,8 @@
     command = "npm run build:example"
 
 [build.environment]
-    DART_SASS_VERSION = "1.69.7"
-    HUGO_VERSION = "0.121.1"
+    DART_SASS_VERSION = "1.70.0"
+    HUGO_VERSION = "0.122.0"
     HUGO_ENV = "production"
     HUGO_ENABLEGITINFO = "true"
     NODE_VERSION = "18.19.0"

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-beta2",
+  "version": "0.23.0-beta4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.0-beta2",
+      "version": "0.23.0-beta4",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-beta2",
+  "version": "0.23.0-beta4",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",