Suppor transparent navbar

gethinode · Feb 16, 2023 · d12cdc7 · d12cdc7
1 parent d4bf047
commit d12cdc7
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 6 deletions.
diff --git 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');
+}
diff --git 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;

diff --git 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

diff --git 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

diff --git 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

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -12,7 +12,7 @@
                 {{- 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>

diff --git a/layouts/partials/assets/navbar.html b/layouts/partials/assets/navbar.html
@@ -112,9 +112,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>