Merge pull request #585 from gethinode/develop

Add support for horizontal navbar
gethinode · Oct 29, 2023 · 3779237 · 3779237
2 parents 962835f + e94d9b3
commit 3779237
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 5 deletions.
diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss
@@ -119,3 +119,75 @@
 }
 
 // stylelint-enable annotation-no-unknown
+
+:root {
+    --dropdown-horizontal-bg: var(--#{$prefix}light);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        --dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
+    }
+}
+
+$dropdown-transition: opacity .15s ease-in-out !default;
+
+.dropdown-horizontal {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        $next: breakpoint-next($breakpoint, $grid-breakpoints);
+        $infix: breakpoint-infix($next, $grid-breakpoints);
+
+        @include media-breakpoint-up($next) {
+            &#{$infix} { 
+                position: static !important; 
+            } 
+
+            &#{$infix} > .dropdown-menu {
+                opacity: 0;
+                display: block;
+                visibility: hidden;
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+                width: 100%;
+                height: auto;
+                text-align: center;
+                border-radius: 0;
+                border: 0;
+                margin-top: calc((-1.5 * $spacer) - 2px);
+                padding-top: calc(1 * $spacer + 2px);
+                padding-bottom: 1 * $spacer;
+                box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
+
+                @include transition($dropdown-transition);
+            }
+
+            &#{$infix} > .dropdown-menu.show {
+                visibility: visible;
+                opacity: 1;
+            }
+
+            &#{$infix} > .dropdown-menu > li {
+                display: inline-block;
+                padding-left: $spacer;
+                padding-right: $spacer;
+            }
+
+            &#{$infix} > .dropdown-menu > li > a {
+                padding-left: .25 * $spacer;
+                padding-right: .25 * $spacer;
+
+                &.active,
+                &:hover,
+                &:focus {
+                    color: var(--bs-body-color);
+                    border-bottom: solid 1px var(--bs-navbar-hover-color);
+                    margin-bottom: -1px;
+                    background-color: transparent;
+                }
+            }
+
+            &#{$infix} > .nav-link.show {
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+            }            
+        }
+    }
+}
diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -61,6 +61,7 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
+    horizontal = false
     offset = "5.5rem"
     search = true
     searchModal = false

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -48,6 +48,7 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
+    horizontal = false
     offset = "5.5rem"
     search = true
     searchModal = false

diff --git a/layouts/partials/assets/navbar.html b/layouts/partials/assets/navbar.html
@@ -14,7 +14,7 @@
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
                     the site's parameter configuration. 
     "title"         Optional brand title, displayed when the logo is not set. Defaults to the site's title.
-    "class":        Optional class attribute of the navbar container.
+    "class"         Optional class attribute of the navbar container.
 -->
 
 <!-- Inline partial to render the color mode switcher -->
@@ -156,7 +156,6 @@
 {{- end -}}
 {{- $searchModal := and $search site.Params.navigation.searchModal -}}
 
-
 {{- $enableDarkMode := default false site.Params.main.enableDarkMode -}}
 {{- with .mode -}}
     {{- $darkModeParam := . -}}
@@ -175,6 +174,8 @@
 
 {{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
 
+{{- $horizontal := default false site.Params.navigation.horizontal -}}
+
 {{- $logo := site.Params.navigation.logo -}}
 {{- $logoLight := "" -}}
 {{- $logoDark := "" -}}
@@ -223,7 +224,7 @@
 
 <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 {{ 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 }}>
         <div class="container-xxl p-0">
             <!-- Insert sidebar toggler when applicable -->
             <div class="d-flex">
@@ -270,10 +271,10 @@
                 <!-- Render top-menu items (maximum depth of 2) -->
                 <ul class="navbar-nav ms-auto">
                     {{- range $menu := $menus -}}
-                        <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
+                        <li class="nav-item{{ if .HasChildren }} dropdown{{ if $horizontal }} dropdown-horizontal-{{ $size }}{{ end }}{{ end }}">
                             {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
                             {{- if .HasChildren -}}
-                                <ul class="dropdown-menu dropdown-menu-end">
+                                <ul class="dropdown-menu">
                                     {{- range .Children -}}
                                         <li>{{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}</li>
                                     {{- end -}}