Merge pull request #1124 from gethinode/develop

Fix navbar behavior

.eslintignore

@@ -2,6 +2,7 @@ assets/js/critical/languageSelector.js
 assets/js/critical/color.js
 assets/js/analytics.js
 assets/js/flexsearch.js
+assets/js/navbar.js
 assets/js/sharing.js
 assets/js/vendor
 node_modules

assets/js/navbar.js

@@ -1,3 +1,4 @@
+const fixed = {{ site.Params.navigation.fixed }}
 const navbar = document.querySelector('.navbar')
 const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
@@ -20,7 +21,7 @@ function updateNavbar () {
 
 if ((navbar !== null) && (window.performance.getEntriesByType)) {
   if (window.performance.getEntriesByType('navigation')[0].type === 'reload') {
-    updateNavbar()
+    fixed && updateNavbar()
   }
 }
 
@@ -32,7 +33,7 @@ if (navbar !== null && togglers !== null) {
     attributeFilter: ['data-bs-theme']
   }
   const Observer = new MutationObserver((mutationrecords) => {
-    updateNavbar()
+    fixed && updateNavbar()
   })
   Observer.observe(html, config)
 
@@ -43,7 +44,7 @@ if (navbar !== null && togglers !== null) {
 
   // set the navbar background color to opaque when scrolling past a breakpoint
   window.onscroll = () => {
-    updateNavbar()
+    fixed && updateNavbar()
   }
 
   // set the navbar background color to opaque when expanded

assets/scss/components/_navbar.scss

@@ -315,3 +315,7 @@
     }
 }
 
+.navbar-overlay {
+    position: absolute;
+    z-index: $zindex-fixed;
+}

config/_default/params.toml

@@ -172,16 +172,16 @@
     # linkedIn = ""
     github = "https://github.com/gethinode/hinode"
     section = "blog"
-    [author]
+    [schema.author]
         name = "Mark Dumay"
         # twitter = "https://twitter.com/markdumay"
         linkedin = "https://www.linkedin.com/in/markdumay/"
         github = "https://github.com/markdumay"
-    [logo]
+    [schema.logo]
         url = "img/logo512x512.png"
         width = 512
         height = 512
-    [image]
+    [schema.image]
         url = "img/logo1280x640.png"
         width = 1280
         height = 640

exampleSite/config/_default/params.toml

@@ -165,16 +165,16 @@
     # linkedIn = ""
     github = "https://github.com/gethinode/hinode"
     section = "blog"
-    [author]
+    [schema.author]
         name = "Mark Dumay"
         # twitter = "https://twitter.com/markdumay"
         linkedin = "https://www.linkedin.com/in/markdumay/"
         github = "https://github.com/markdumay"
-    [logo]
+    [schema.logo]
         url = "img/logo512x512.png"
         width = 512
         height = 512
-    [image]
+    [schema.image]
         url = "img/logo1280x640.png"
         width = 1280
         height = 640

exampleSite/hugo_stats.json

@@ -15,7 +15,6 @@
       "form",
       "h2",
       "h3",
-      "h5",
       "head",
       "hr",
       "html",
@@ -238,7 +237,6 @@
       "fade",
       "fas",
       "figure-caption",
-      "fixed-top",
       "flex-column",
       "flex-fill",
       "flex-grow-1",
@@ -334,19 +332,14 @@
       "navbar-container",
       "navbar-contrast",
       "navbar-expand-md",
-      "navbar-fixed-top",
       "navbar-mode-selector",
       "navbar-nav",
       "navbar-nav-scroll",
+      "navbar-overlay",
       "navbar-title",
       "navbar-toggler",
       "next",
       "no-js",
-      "offcanvas",
-      "offcanvas-body",
-      "offcanvas-header",
-      "offcanvas-start",
-      "offcanvas-title",
       "order-0",
       "order-1",
       "order-first",
@@ -594,8 +587,6 @@
       "navbar-sample-collapse",
       "navigation",
       "notification",
-      "offcanvas-label",
-      "offcanvass-sidebar",
       "persona",
       "projecten",
       "projects",

i18n/de.yaml

@@ -23,6 +23,22 @@
   translation: "Artikel"
 - id: more
   translation: "Weitere {{ . }}"
+- id: emptyList
+  translation: "Keine weiteren Artikel gefunden"
+- id: emptyTags
+  translation: "Keine Schlagworte gefunden"
+- id: readMore
+  translation: "Weiterlesen"
+
+# Languages
+- id: lang_de
+  translation: "Deutsch"
+- id: lang_en
+  translation: "Englisch"
+- id: lang_nl
+  translation: "Niederländisch"
+- id: lang_fr
+  translation: "Französisch"
 
 # Sharing
 - id: shareLink

layouts/_default/single.html

@@ -1,6 +1,8 @@
 {{ define "main" -}}
     {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
-    {{ $sidebar := .Render "single/sidebar" }}
+    {{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
+    {{ $sidebar := "" }}
+    {{ if $hasSidebar }}{{ $sidebar = .Render "single/sidebar" }}{{ end }}
     {{ $toc := .Render "single/panel-toc" }}
 
     {{ with $sidebar }}
@@ -16,7 +18,7 @@
     {{ end }}
 
     <div class="container-xxl flex-fill p-4 px-xxl-0">
-        {{ if $sidebar -}}
+        {{ if $hasSidebar -}}
             <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2 row-cols-{{ $breakpoint.next }}-3">
                 <div class="col col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.next }}-block sidebar-overflow sticky-top pt-5">
                     {{ $sidebar | safeHTML }}

layouts/_default/single/sidebar.html

@@ -1,7 +1,5 @@
 {{- $menu := .Scratch.Get "sidebar" -}}
 {{- $version := .Scratch.Get "version" -}}
-{{ $sidebar := "" }}
+{{ if $menu  }}
-{{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
-{{ if and $menu $hasSidebar  }}
     {{ partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}
-{{ end }}
+{{ end -}}

layouts/partials/assets/navbar-item.html

@@ -29,6 +29,7 @@
 {{ end }}
 {{- $pageURL := $page.RelPermalink -}}
 {{- $isActive := or (and (hasPrefix $pageURL $menuURL) (ne $menuURL ("/" | relLangURL))) (eq $pageURL $menuURL) -}}
+{{ if not $menu.PageRef }}{{ $isActive = false }}{{ end }}
 {{- $isAlias := $menu.Params.alias -}}
 {{- $isIcon := $menu.Params.icon -}}
 

layouts/partials/assets/navbar.html

@@ -165,7 +165,7 @@
 {{ end }}
 
 <!-- Main code -->
-<div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
+<div class="container-fluid {{ if $fixed }}fixed-top{{ else if $overlay }}navbar-overlay{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
     <nav class="navbar p-4
         {{- if not $overlay }}{{ with $color }} bg-{{ . }}{{ end }}{{ end -}}
@@ -173,9 +173,9 @@
         {{ if $contrast }} navbar-contrast{{ end }}"
         {{ if $overlay }}
         data-bs-theme="{{ $overlayMode }}"
-        data-bs-overlay="{{ $overlayMode }}"
+        {{ if $fixed }}data-bs-overlay="{{ $overlayMode }}"{{ end }}
-        {{ end }}
+        {{ if $color }}data-navbar-color="{{ $color }}"{{ end }}
-        {{ if $overlay }}data-navbar-color="{{ $color }}"{{ end }}
+        {{ end }}        
         >
         <div class="container-xxl p-0">
             <div class="d-flex navbar-container justify-content-center">

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.26.3",
+  "version": "0.26.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.26.3",
+      "version": "0.26.4",
       "license": "MIT",
       "dependencies": {
         "@fullhuman/postcss-purgecss": "^6.0.0",

package.json

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