Merge pull request #732 from gethinode/develop

Support navbar overlay

assets/js/navbar.js

@@ -1,8 +1,14 @@
 const navbar = document.querySelector('.navbar')
 const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
+const colorsBG = ['body', 'secondary', 'tertiary']
 
 if (navbar !== null && togglers !== null) {
+  // initialize background color
+  const color = (navbar.getAttribute('data-navbar-color') || 'body')
+  const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
+  navbar.style.setProperty('--bs-navbar-expanded-color', bg)
+
   // set the navbar background color to opaque when scrolling past a breakpoint
   window.onscroll = () => {
     if (window.scrollY > 75) {

assets/scss/common/_styles.scss

@@ -22,13 +22,13 @@ a:active {
 }
 
 .fullscreen {
-    --navbar-offset: #{$navbar-offset};
+    --overlay-offset: #{$overlay-offset};
 
-    min-height: calc(100vh - var(--navbar-offset));
+    min-height: calc(100vh - var(--overlay-offset));
 }
 
 .main-content {
-    margin-top: $navbar-offset;
+    margin-top: $overlay-offset;
 }
 
 $utilities: map-merge(

assets/scss/common/_variables-dart.scss

@@ -20,6 +20,7 @@ strong {
 
 $navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
+$overlay-offset:                h.$overlay-offset;
 $primary:                       h.$primary;
 $secondary:                     h.$secondary;
 $success:                       h.$success;

assets/scss/components/_img.scss

@@ -19,3 +19,11 @@
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
 }
+
+.background-img {
+    --overlay-offset: #{$overlay-offset};
+
+    height: calc(100vh - var(--overlay-offset));
+    width: 100vw;
+    object-fit: cover;
+}

assets/scss/components/_navbar.scss

@@ -2,13 +2,20 @@
 
 // Source: https://jsfiddle.net/njhgr40m/
 
+
 .navbar {
+    --bs-navbar-expanded-color: var(--bs-body-bg);
+
     transition: 0.5s ease-in-out;
     background-color: transparent;
+
+    @each $state, $val in $theme-colors {
+        --bs-navbar-color-#{$state}: #{$val};
+    }
 }
 
 .nav-active, .navbar-expanded {
-    background-color: var(--bs-body-bg);
+    background-color: var(--bs-navbar-expanded-color);
 }
 
 .nav-link {
@@ -31,6 +38,30 @@
     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};
+}
+
+.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};
+}
+
+.nav-item .vr {
+    color: var(--bs-navbar-color);
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 if($enable-important-utilities, !important, null);

config/_default/params.toml

@@ -63,6 +63,8 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
+    overlay = false
+    overlayMode = "dark"
     horizontal = false
     offset = "5.5rem"
     search = true

data/structures/navbar.yml

@@ -100,6 +100,26 @@ arguments:
     default: false
     comment: Flag to indicate the navbar should stick to the top.
     group: partial
+  overlay:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag to indicate if the navbar should render as an overlay on the current
+      page.
+    group: partial
+    release: v0.22.6
+  overlayMode:
+    type: select
+    optional: true
+    default: dark
+    comment: Color mode of the overlay.
+    options:
+      values:
+        - light
+        - dark
+    group: partial
+    release: v0.23.0
   logo:
     type: path
     optional: true

exampleSite/config/_default/params.toml

@@ -52,6 +52,8 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
+    overlay = false
+    overlayMode = "dark"
     horizontal = false
     offset = "5.5rem"
     search = true

go.mod

@@ -10,7 +10,7 @@ require (
 	github.com/gethinode/mod-katex v1.0.5 // indirect
 	github.com/gethinode/mod-leaflet v0.4.0 // indirect
 	github.com/gethinode/mod-lottie v1.4.1 // indirect
-	github.com/gethinode/mod-utils v1.0.2 // indirect
+	github.com/gethinode/mod-utils v1.0.3 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 // indirect
 	github.com/twbs/bootstrap v5.3.2+incompatible // indirect
 )

go.sum

@@ -124,6 +124,8 @@ github.com/gethinode/mod-utils v1.0.1 h1:jhZGlGFHHL1f5HXbBMXfiZ2gCz4TVafAzjnRPTI
 github.com/gethinode/mod-utils v1.0.1/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
 github.com/gethinode/mod-utils v1.0.2 h1:0b3i+/bBHY1Td9N6khDbL1nf3d5HGc4QzI4BbEWHoU4=
 github.com/gethinode/mod-utils v1.0.2/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
+github.com/gethinode/mod-utils v1.0.3 h1:FF6lnam0Bcdj7G1E5P+qi5ByPrl1npL+3uS5YoPx1C0=
+github.com/gethinode/mod-utils v1.0.3/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3 h1:H/qVR5O4BXjRjD+5PZB+r4ug2BSJ2Of4RtwOntd+OKo=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
 github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 h1:re7L8FxbXQpnX8BgzkdUnDpsUmloGNyLmiy2ZCln8pg=

layouts/_default/baseof.html

@@ -71,6 +71,8 @@
                 {{- partial "assets/navbar.html" (dict
                     "page" .
                     "fixed" site.Params.navigation.fixed
+                    "overlay" site.Params.navigation.overlay
+                    "overlayMode" site.Params.navigation.overlayMode
                     "color" site.Params.navigation.color
                     "style" (default "light" site.Params.navigation.style)
                     "size" (default "md" site.Params.navigation.size))

layouts/partials/assets/navbar.html

@@ -110,6 +110,8 @@
 
 {{- $size := .size | default "md" -}}
 {{- $fixed := .fixed | default false -}}
+{{- $overlay := .overlay | default false -}}
+{{- $overlayMode := .overlayMode | default "dark" -}}
 {{- $color := .color | default "" -}}
 {{- $search := .search | default site.Params.navigation.search -}}
 {{- $searchModal := and $search site.Params.navigation.searchModal -}}
@@ -170,7 +172,13 @@
 <!-- Main code -->
 <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 {{ if $fixed }}navbar-fixed-top{{ end }} navbar-expand-{{ $size }}{{ if $contrast }} navbar-contrast{{ end }}{{ with $color }} bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+    <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 $overlay }}data-navbar-color="{{ $color }}"{{ end }}
+        >
         <div class="container-xxl p-0">
             <!-- Insert sidebar toggler when applicable -->
             <div class="d-flex align-items-center">

layouts/partials/head/stylesheet.html

@@ -26,8 +26,10 @@
     {{- errorf "partial [head/stylesheet.html] - Invalid value for site param 'style.darkModeTint': %s" site.Params.style.darkModeTint -}}
 {{ end}}
 
-{{- $navbarOffset := "0em" -}}
-{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4em" }}{{ end }}
+{{- $navbarOffset := "0rem" -}}
+{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}{{ end }}
+{{- $overlayOffset := $navbarOffset -}}
+{{- if site.Params.navigation.overlay }}{{ $overlayOffset = "0rem" }}{{ end }}
 {{- $vars := dict 
     "theme-font"              (default "Inter" site.Params.style.themeFont)
     "font-size-base"          (default "1rem" site.Params.style.fontSizeBase)
@@ -39,8 +41,9 @@
     "danger"                  (default "#dc3545" site.Params.style.danger)
     "light"                   (default "#f8f9fa" site.Params.style.light)
     "dark"                    (default "#212529" site.Params.style.dark)
-    "navbar-height"           (site.Params.navigation.offset | default "4em")
+    "navbar-height"           (site.Params.navigation.offset | default "4rem")
     "navbar-offset"           $navbarOffset
+    "overlay-offset"          $overlayOffset
     "enable-dark-mode"        (printf "%t" ((default true site.Params.main.enableDarkMode)))
     "import-fonts"            (printf "%t" (not (hasPrefix (lower site.Params.style.themeFontPath) "http")))
     "dark-mode-shade"         (default "0%" site.Params.style.darkModeShade)

package-lock.json

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

package.json

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