Merge pull request #148 from gethinode/color

Transparent navbar
Fix linting issues
2025-10-17 15:03:20 +00:00 · 2023-02-16 09:44:04 +01:00 · 2023-02-16 09:36:19 +01:00 · 2023-02-16 09:28:38 +01:00 · 2023-02-16 09:28:13 +01:00 · 2023-02-16 09:27:55 +01:00
10 changed files with 45 additions and 26 deletions
--- a/assets/js/navbar.js
+++ b/assets/js/navbar.js
@@ -0,0 +1,16 @@
+const navbar = document.querySelector('.navbar')
+const toggler = document.getElementById('main-nav-toggler')
+
+// set the navbar background color to opaque when scrolling past a breakpoint
+window.onscroll = () => {
+  if (window.scrollY > 75) {
+    navbar.classList.add('nav-active')
+  } else {
+    navbar.classList.remove('nav-active')
+  }
+}
+
+// set the navbar background color to opaque when expanded
+toggler.onclick = () => {
+  navbar.classList.toggle('navbar-expanded')
+}
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -2,6 +2,15 @@

 // Source: https://jsfiddle.net/njhgr40m/

+.navbar {
+    transition: 0.5s ease-in-out;
+    background-color: none;
+}
+
+.nav-active, .navbar-expanded {
+    background-color: var(--bs-body-bg);
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
    border: 0 !important;
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -16,13 +16,13 @@
    sections = ["blog", "projects"]
    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
    fullCover = false
+    style = ""
 # toml-docs-end home

 # toml-docs-start navigation
 [navigation]
    logo = "/img/logo_icon.svg"
    color = "body"
-    style = "light"
    fixed = true
    offset = "4em"
    search = true
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -63,6 +63,8 @@
  translation: "Dunkel"
 - id: colorAuto
  translation: "Automatisch"
+- id: toggleMainNav
+  translation: "Hauptmenü anzuzeigen oder auszublenden"

 # 404 page
 - id: pageNotFound
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -54,7 +54,7 @@
 - id: paginationLast
  translation: "Last"
 - id: toggleSidebar
-  translation: "Toggle sidebar navigation"  
+  translation: "Toggle sidebar navigation"
 - id: colorMode
  translation: "Color mode"
 - id: colorLight
@@ -63,6 +63,8 @@
  translation: "Dark"
 - id: colorAuto
  translation: "Auto"
+- id: toggleMainNav
+  translation: "Toggle main navigation"

 # 404 page
 - id: pageNotFound
--- a/i18n/nl.yaml
+++ b/i18n/nl.yaml
@@ -54,7 +54,7 @@
 - id: paginationLast
  translation: "Laatste"
 - id: toggleSidebar
-  translation: "Toon of verberg navigatie"  
+  translation: "Toon of verberg navigatie"
 - id: colorMode
  translation: "Modus"
 - id: colorLight
@@ -63,6 +63,8 @@
  translation: "Donker"
 - id: colorAuto
  translation: "Automatisch"
+- id: toggleMainNav
+  translation: "Toon of verberg hoofdnavigatie"

 # 404 page
 - id: pageNotFound
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,12 +7,12 @@
    </head>

    <body>
-        <div class="d-flex flex-column min-vh-100">
+        <div class="d-flex flex-column min-vh-100{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
            <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
                {{- partial "assets/navbar.html" (dict
                    "page" .
                    "fixed" (string .Site.Params.navigation.fixed)
-                    "color" (default "white" .Site.Params.navigation.color)
+                    "color" (.Site.Params.navigation.color)
                    "style" (default "light" .Site.Params.navigation.style))
                -}}
            </div>
--- a/layouts/partials/assets/navbar.html
+++ b/layouts/partials/assets/navbar.html
@@ -3,7 +3,6 @@
    "page"          Required object reference to the current page.
    "menus"         Optional name of the menu configuration, defaults to "main".
    "size"          Optional size of the button, either "sm", "md" (default), or "lg".
-    "style"         Optional style of the navbar, either "light" (default) or "dark".
    "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
    "color"         Optional background color of the navbar, either "primary", "secondary", "success",
                    "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
@@ -37,13 +36,6 @@
    {{- errorf "Invalid value for param 'size': %s" $size -}}
 {{- end -}}

-{{- $style := "light" -}}
-{{- with .style }}{{ $style = . }}{{ end -}}
-{{- $supportedStyles := slice "light" "dark" -}}
-{{- if not (in $supportedStyles $style) -}}
-    {{- errorf "Invalid value for param 'style': %s" $style -}}
-{{- end -}}
-
 {{- $fixedParam := "false" -}}
 {{- $fixed := false -}}
 {{- with .fixed }}{{ $fixedParam = . }}{{ end -}}
@@ -53,9 +45,6 @@
    {{- errorf "Invalid value for param 'fixed': %s" $fixedParam -}}
 {{- end -}}

-{{- $inverseStyle := "light" -}}
-{{- if eq $style "light" }}{{ $inverseStyle = "dark" }}{{ end -}}
-
 {{- $color := "" -}}
 {{- with .color -}}
    {{- $color = . -}}
@@ -112,9 +101,8 @@
        </a>

        <!-- Insert main navigation toggler -->
-		<button class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="Toggle main navigation">
-            <!-- TODO: add i18n translation -->
+		<button id="main-nav-toggler" class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
+			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
 			<span class="toggler-icon top-bar emphasis"></span>
 			<span class="toggler-icon middle-bar emphasis"></span>
 			<span class="toggler-icon bottom-bar emphasis"></span>
--- a/package-lock.json
+++ b/package-lock.json
@@ -5128,9 +5128,9 @@
      }
    },
    "node_modules/stylelint-config-standard-scss": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.0.tgz",
-      "integrity": "sha512-rHgydRJxN4Q9lDcwrLFoiFA3S8CRqsUcyBBCLwEMjIwzJViluFfsOKFPSomx6hScVQgQ4//Fx0hRKiSHyO0ihw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.1.tgz",
+      "integrity": "sha512-m5sRdtsB1F5fnC1Ozla7ryftU47wVpO+HWd+JQTqeoG0g/oPh5EfbWfcVHbNCEtuoHfALIySiUWS20pz2hX6jA==",
      "dev": true,
      "dependencies": {
        "stylelint-config-recommended-scss": "^9.0.0",
@@ -9350,9 +9350,9 @@
      }
    },
    "stylelint-config-standard-scss": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.0.tgz",
-      "integrity": "sha512-rHgydRJxN4Q9lDcwrLFoiFA3S8CRqsUcyBBCLwEMjIwzJViluFfsOKFPSomx6hScVQgQ4//Fx0hRKiSHyO0ihw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.1.tgz",
+      "integrity": "sha512-m5sRdtsB1F5fnC1Ozla7ryftU47wVpO+HWd+JQTqeoG0g/oPh5EfbWfcVHbNCEtuoHfALIySiUWS20pz2hX6jA==",
      "dev": true,
      "requires": {
        "stylelint-config-recommended-scss": "^9.0.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.9.0-alpha3",
+  "version": "0.9.0-beta",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
Author	SHA1	Message	Date
Mark Dumay	0abf604d2a	Merge pull request #148 from gethinode/color Transparent navbar	2023-02-16 09:44:04 +01:00
mark	ca51130286	Fix linting issues	2023-02-16 09:36:19 +01:00
mark	28e96deb73	Bump package version	2023-02-16 09:28:38 +01:00
mark	9173b6eaaa	Add optional style for homepage	2023-02-16 09:28:13 +01:00
mark	492420d13f	Remove redundant style element	2023-02-16 09:27:55 +01:00
mark	d2ec492827	Remove redundant style element	2023-02-16 09:27:38 +01:00
mark	d12cdc7a76	Suppor transparent navbar	2023-02-16 07:23:36 +01:00
Mark Dumay	a4f49ffb18	Merge pull request #147 from gethinode/dependabot/npm_and_yarn/stylelint-config-standard-scss-7.0.1 Bump stylelint-config-standard-scss from 7.0.0 to 7.0.1	2023-02-14 18:22:10 +01:00
dependabot[bot]	6599912985	Bump stylelint-config-standard-scss from 7.0.0 to 7.0.1 Bumps [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss) from 7.0.0 to 7.0.1. - [Release notes](https://github.com/stylelint-scss/stylelint-config-standard-scss/releases) - [Changelog](https://github.com/stylelint-scss/stylelint-config-standard-scss/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint-scss/stylelint-config-standard-scss/compare/v7.0.0...v7.0.1) --- updated-dependencies: - dependency-name: stylelint-config-standard-scss dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2023-02-14 14:10:02 +00:00