Merge pull request #206 from gethinode/develop

Bump release version

assets/js/navbar.js

@@ -1,5 +1,6 @@
 const navbar = document.querySelector('.navbar')
 const toggler = document.getElementById('main-nav-toggler')
+const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 
 // set the navbar background color to opaque when scrolling past a breakpoint
 window.onscroll = () => {
@@ -14,3 +15,10 @@ window.onscroll = () => {
 toggler.onclick = () => {
   navbar.classList.toggle('navbar-expanded')
 }
+
+// invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
+for (let i = 0; i < modeSelectors.length; ++i) {
+  modeSelectors[i].onclick = () => {
+    toggler.click()
+  }
+}

assets/scss/components/_navbar.scss

@@ -4,13 +4,17 @@
 
 .navbar {
     transition: 0.5s ease-in-out;
-    background-color: none;
+    background-color: transparent;
 }
 
 .nav-active, .navbar-expanded {
     background-color: var(--bs-body-bg);
 }
 
+.navbar-expanded {
+    box-shadow: $box-shadow-sm;
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 if($enable-important-utilities, !important, null);

layouts/partials/assets/navbar.html

@@ -26,19 +26,19 @@
         </a>
         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
             <li>
-                <a class="dropdown-item" data-bs-theme-value="light" href="#!" {{ if $collapsed }}data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"{{ end }}>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
                     {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
                     {{ T "colorLight" }}
                 </a>
             </li>
             <li>
-                <a class="dropdown-item" data-bs-theme-value="dark" href="#!" {{ if $collapsed }}data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"{{ end }}>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
                     {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
                     {{ T "colorDark" }}
                 </a>
             </li>
             <li>
-                <a class="dropdown-item" data-bs-theme-value="auto" href="#!" {{ if $collapsed }}data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"{{ end }}>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
                     {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
                     {{ T "colorAuto" }}
                 </a>
@@ -182,7 +182,7 @@
                                     <li><a class="dropdown-item {{ if $child_active }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a></li>
                                 {{- end -}}
                             </ul>
-                          </li>
+                        </li>
                     {{- else -}}
                         <li class="nav-item">
                             {{- $external := ne $url.Host $baseurl.Host -}}
@@ -199,9 +199,10 @@
 
 
                 {{- if or $enableLanguage $enableDarkMode -}}
-                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto">
+                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
                         <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
                     </li>
+                    <li><hr class="dropdown-divider-bg"></li>
                 {{- end -}}
 
                 <!-- Insert language switcher if applicable -->

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.11.6",
+  "version": "0.11.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.11.6",
+      "version": "0.11.7",
       "license": "MIT",
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",

package.json

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