feat: enable configuration of navbar logo align and mode

assets/scss/common/_styles.scss

@@ -151,3 +151,17 @@ $utilities: map-merge(
         )
     )
 );
+
+.width-100 {
+    width: 100%;
+}
+
+$utilities: (
+  "width": (
+    property: width,
+    responsive: true,
+    values: (
+      auto: auto
+    )
+  )
+);

assets/scss/components/_navbar.scss

@@ -104,20 +104,27 @@
     margin: 0 .15rem;
 }
 
-.navbar-title {
+.navbar-title, .navbar-title-center, .navbar-title-start {
     display: inline-block;
     white-space: normal;
-    text-align: center !important;
     vertical-align: middle;
     padding: 0 $spacer;
     width: 100% !important;
 }
 
+.navbar-title, .navbar-title-center {
+    text-align: center !important;
+}
+
 .navbar-contrast .nav-link.active, .navbar-contrast .nav-link.show, .navbar-contrast .nav-link:hover {
     border-bottom: solid 1px var(--bs-navbar-hover-color);
     margin-bottom: -1px;
 }
 
+.navbar-brand {
+    margin-right: 0;
+}
+
 .navbar-contrast {
     --bs-navbar-color: white !important;
     --bs-navbar-hover-color: white !important;
@@ -125,7 +132,7 @@
     --bs-navbar-active-color: white !important;
     --bs-navbar-toggler-color: white;
 
-    .navbar-title, .mode-switch {
+    .navbar-title, .navbar-brand, .mode-switch {
         --#{$prefix}border-color: white;
 
         color: white !important;
@@ -288,13 +295,10 @@
 }
 
 .navbar-container {
+    min-height: calc(2rem + 10px);
     width: 100% !important;
 }
 
-.navbar-brand {
-    margin-right: 0;
-}
-
 @include media-breakpoint-up(#{$navbar-size}) {
     :root {
         --navbar-offset: #{$navbar-offset};

config/_default/params.toml

@@ -88,6 +88,8 @@
 [navigation]
     anchor = true
     logo = "/img/logo_icon.svg"
+    logo-mode = false
+    logo-align = "center"
     logo-height = 30
     color = "body"
     fixed = true

data/structures/navbar.yml

@@ -79,6 +79,25 @@ arguments:
     comment: >-
       Address of the logo image, defaults to the parameter `logo` set in the
       `main` section of the site's parameter configuration.
+  logo-align:
+    type: select
+    optional: true
+    default: center
+    comment: Alignment of the logo when the navbar is in collapsed mode.
+    options:
+      values:
+        - start
+        - center
+    release: v1.15.0
+  logo-mode:
+    type: bool
+    default: false
+    optional: true
+    comment: >-
+      Flag indicating if the logo should support color modes. If set, the
+      navbar searches for images having a matching color-mode suffix
+      such as `-light` or `-dark`.
+    release: v1.15.0
   # deprecated arguments
   size:
     type: select

exampleSite/config/_default/params.toml

@@ -41,6 +41,8 @@
 [navigation]
     anchor = true
     logo = "/img/logo_icon.svg"
+    logo-mode = false
+    logo-align = "center"
     logo-height = 30
     color = "body"
     fixed = true

exampleSite/hugo_stats.json

@@ -429,6 +429,7 @@
       "navbar-mode-selector",
       "navbar-nav",
       "navbar-nav-scroll",
+      "navbar-title-center",
       "navbar-toggler",
       "next",
       "no-js",
@@ -597,7 +598,9 @@
       "visually-hidden",
       "vr",
       "w-100",
-      "w-50"
+      "w-50",
+      "width-100",
+      "width-md-auto"
     ],
     "ids": [
       "abbr",
@@ -656,11 +659,11 @@
       "docs",
       "documentation",
       "dropdown-nav-0",
-      "dropdown-panel-0d1a7f80b8e945c5d0eee8ce962901f8",
+      "dropdown-panel-aeeb41e24f78e218f65d8ae7df52aea1",
-      "dropdown-panel-11b7de064d33d51c4587026617b09044",
+      "dropdown-panel-c8ab13f441b0f5a6b04409db1f465db6",
-      "dropdown-panel-48eedbb8ffe41ffc6171e8f6acf08c98",
+      "dropdown-panel-dcd35a8b2398cec6b50ea2f737c2cc9c",
-      "dropdown-panel-83049d5f17b5b624033fbb4c0d83f75e",
+      "dropdown-panel-eb5323953e0a4158248e6897f3bfac4c",
-      "dropdown-panel-bd6146b95649a607bb5beaf85568b0c2",
+      "dropdown-panel-fae8d991798c7e05e84587e33795e41e",
       "elements-type",
       "entity-relationship-diagram",
       "example",
@@ -678,11 +681,11 @@
       "fab-medium",
       "fab-whatsapp",
       "fab-x-twitter",
-      "faq-843494d467a971bad72d552774edf4f9",
+      "faq-b30d87776bf8ff367cce404d6e645cdf",
-      "faq-843494d467a971bad72d552774edf4f9-heading-faq-843494d467a971bad72d552774edf4f9",
+      "faq-b30d87776bf8ff367cce404d6e645cdf-heading-faq-b30d87776bf8ff367cce404d6e645cdf",
-      "faq-843494d467a971bad72d552774edf4f9-item-0",
+      "faq-b30d87776bf8ff367cce404d6e645cdf-item-0",
-      "faq-843494d467a971bad72d552774edf4f9-item-1",
+      "faq-b30d87776bf8ff367cce404d6e645cdf-item-1",
-      "faq-843494d467a971bad72d552774edf4f9-item-2",
+      "faq-b30d87776bf8ff367cce404d6e645cdf-item-2",
       "fas-1",
       "fas-2",
       "fas-3",
@@ -773,11 +776,11 @@
       "nav-0-btn-1",
       "nav-0-btn-2",
       "nav-nav-0",
-      "nav-panel-0d1a7f80b8e945c5d0eee8ce962901f8",
+      "nav-panel-aeeb41e24f78e218f65d8ae7df52aea1",
-      "nav-panel-11b7de064d33d51c4587026617b09044",
+      "nav-panel-c8ab13f441b0f5a6b04409db1f465db6",
-      "nav-panel-48eedbb8ffe41ffc6171e8f6acf08c98",
+      "nav-panel-dcd35a8b2398cec6b50ea2f737c2cc9c",
-      "nav-panel-83049d5f17b5b624033fbb4c0d83f75e",
+      "nav-panel-eb5323953e0a4158248e6897f3bfac4c",
-      "nav-panel-bd6146b95649a607bb5beaf85568b0c2",
+      "nav-panel-fae8d991798c7e05e84587e33795e41e",
       "navbar",
       "navbar-0-collapse",
       "navbar-mode",
@@ -786,36 +789,36 @@
       "navigation",
       "notification",
       "overview",
-      "panel-0d1a7f80b8e945c5d0eee8ce962901f8-0",
+      "panel-aeeb41e24f78e218f65d8ae7df52aea1-0",
-      "panel-0d1a7f80b8e945c5d0eee8ce962901f8-1",
+      "panel-aeeb41e24f78e218f65d8ae7df52aea1-1",
-      "panel-0d1a7f80b8e945c5d0eee8ce962901f8-2",
+      "panel-aeeb41e24f78e218f65d8ae7df52aea1-2",
-      "panel-0d1a7f80b8e945c5d0eee8ce962901f8-btn-0",
+      "panel-aeeb41e24f78e218f65d8ae7df52aea1-btn-0",
-      "panel-0d1a7f80b8e945c5d0eee8ce962901f8-btn-1",
+      "panel-aeeb41e24f78e218f65d8ae7df52aea1-btn-1",
-      "panel-0d1a7f80b8e945c5d0eee8ce962901f8-btn-2",
+      "panel-aeeb41e24f78e218f65d8ae7df52aea1-btn-2",
-      "panel-11b7de064d33d51c4587026617b09044-0",
+      "panel-c8ab13f441b0f5a6b04409db1f465db6-0",
-      "panel-11b7de064d33d51c4587026617b09044-1",
+      "panel-c8ab13f441b0f5a6b04409db1f465db6-1",
-      "panel-11b7de064d33d51c4587026617b09044-2",
+      "panel-c8ab13f441b0f5a6b04409db1f465db6-2",
-      "panel-11b7de064d33d51c4587026617b09044-btn-0",
+      "panel-c8ab13f441b0f5a6b04409db1f465db6-btn-0",
-      "panel-11b7de064d33d51c4587026617b09044-btn-1",
+      "panel-c8ab13f441b0f5a6b04409db1f465db6-btn-1",
-      "panel-11b7de064d33d51c4587026617b09044-btn-2",
+      "panel-c8ab13f441b0f5a6b04409db1f465db6-btn-2",
-      "panel-48eedbb8ffe41ffc6171e8f6acf08c98-0",
+      "panel-dcd35a8b2398cec6b50ea2f737c2cc9c-0",
-      "panel-48eedbb8ffe41ffc6171e8f6acf08c98-1",
+      "panel-dcd35a8b2398cec6b50ea2f737c2cc9c-1",
-      "panel-48eedbb8ffe41ffc6171e8f6acf08c98-2",
+      "panel-dcd35a8b2398cec6b50ea2f737c2cc9c-2",
-      "panel-48eedbb8ffe41ffc6171e8f6acf08c98-btn-0",
+      "panel-dcd35a8b2398cec6b50ea2f737c2cc9c-btn-0",
-      "panel-48eedbb8ffe41ffc6171e8f6acf08c98-btn-1",
+      "panel-dcd35a8b2398cec6b50ea2f737c2cc9c-btn-1",
-      "panel-48eedbb8ffe41ffc6171e8f6acf08c98-btn-2",
+      "panel-dcd35a8b2398cec6b50ea2f737c2cc9c-btn-2",
-      "panel-83049d5f17b5b624033fbb4c0d83f75e-0",
+      "panel-eb5323953e0a4158248e6897f3bfac4c-0",
-      "panel-83049d5f17b5b624033fbb4c0d83f75e-1",
+      "panel-eb5323953e0a4158248e6897f3bfac4c-1",
-      "panel-83049d5f17b5b624033fbb4c0d83f75e-2",
+      "panel-eb5323953e0a4158248e6897f3bfac4c-2",
-      "panel-83049d5f17b5b624033fbb4c0d83f75e-btn-0",
+      "panel-eb5323953e0a4158248e6897f3bfac4c-btn-0",
-      "panel-83049d5f17b5b624033fbb4c0d83f75e-btn-1",
+      "panel-eb5323953e0a4158248e6897f3bfac4c-btn-1",
-      "panel-83049d5f17b5b624033fbb4c0d83f75e-btn-2",
+      "panel-eb5323953e0a4158248e6897f3bfac4c-btn-2",
-      "panel-bd6146b95649a607bb5beaf85568b0c2-0",
+      "panel-fae8d991798c7e05e84587e33795e41e-0",
-      "panel-bd6146b95649a607bb5beaf85568b0c2-1",
+      "panel-fae8d991798c7e05e84587e33795e41e-1",
-      "panel-bd6146b95649a607bb5beaf85568b0c2-2",
+      "panel-fae8d991798c7e05e84587e33795e41e-2",
-      "panel-bd6146b95649a607bb5beaf85568b0c2-btn-0",
+      "panel-fae8d991798c7e05e84587e33795e41e-btn-0",
-      "panel-bd6146b95649a607bb5beaf85568b0c2-btn-1",
+      "panel-fae8d991798c7e05e84587e33795e41e-btn-1",
-      "panel-bd6146b95649a607bb5beaf85568b0c2-btn-2",
+      "panel-fae8d991798c7e05e84587e33795e41e-btn-2",
       "persona",
       "pie-chart",
       "pills",

layouts/_partials/assets/navbar.html

@@ -78,9 +78,29 @@
 {{- end -}}
 
 {{ $logo := "" }}
-{{ with $args.logo | default site.Params.navigation.logo }}
+{{ $mode := index site.Params.navigation "logo-mode" | default false }}
-    {{ $height := index site.Params.navigation "logo-height" | default 30 }}
+{{ if (not (in $args.default "logo-mode")) }}
-    {{ $logo = partial "assets/image.html" (dict "src" . "loading" "eager" "title" $title "image-height" $height) }}
+    {{ $mode = $args.logoMode }}
+{{ end }}
+
+{{ $align := index site.Params.navigation "logo-align" | default "center" }}
+{{ if (not (in $args.default "logo-align")) }}
+    {{ $align = $args.logoAlign }}
+{{ end }}
+
+{{ if not $args.title }}
+    {{ with $args.logo | default site.Params.navigation.logo }}
+        {{ $height := index site.Params.navigation "logo-height" | default 30 }}
+        {{ $class := cond (eq $align "start") "my-auto" "m-auto" }}
+        {{ $logo = partial "assets/image.html" (dict 
+            "src"          .
+            "loading"      "eager"
+            "title"        $title
+            "image-height" $height
+            "mode"         $mode
+            "class"        (printf "h-100 %s" $class)
+        ) }}
+    {{ end }}
 {{ end }}
 
 {{- $class := $args.class -}}
@@ -107,26 +127,29 @@
         {{ end }}        
         >
         <div class="container-xxl p-0">
-            <div class="d-flex navbar-container justify-content-center">
+            <div class="d-flex navbar-container">
-                {{/* Insert sidebar toggler when applicable */}}
+                {{/* Insert sidebar toggler or placeholder when applicable */}}
-                <div class="d-flex align-items-center">
+                {{ $sidebar := $page.Scratch.Get "sidebar" }}
-                    {{- if $page.Scratch.Get "sidebar" -}}
+                {{- if or $sidebar (eq $align "center") -}}
-                        <button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas"
+                    <div class="d-flex align-items-center">
-                            data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                        {{- if $sidebar -}}
-                            {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
+                            <button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas"
-                        </button>
+                                data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                    {{- else -}}
+                                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
-                        {{/* Insert invisible sidebar toggler to center logo correctly on smaller screens */}}
+                            </button>
-                        <button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button">
+                        {{- else if eq $align "center" -}}
-                            {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
+                            {{/* Insert invisible sidebar toggler to center logo correctly on smaller screens */}}
-                        </button>
+                            <button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button">
-                    {{- end -}}
+                                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
-                </div>
+                            </button>
+                        {{- end -}}
+                    </div>
+                {{ end }}
         
                 {{/* Insert the brand logo or name */}}
-                <div class="{{ if $logo }}mx-auto{{ else }}flex-grow-1 flex-{{ $args.breakpoint }}-grow-0{{ end }}">
+                <div class="width-100 width-{{ $args.breakpoint }}-auto {{ if eq $align "center" }}text-center{{ end }}">
                     <a class="navbar-brand" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
-                        {{- with $logo -}}{{ . }}{{- else -}}<div class="navbar-title fw-bold h-100">{{ $title }}</div>{{- end -}}
+                        {{- with $logo -}}{{ . }}{{- else -}}<div class="p-0 navbar-title-{{ $align }} fw-bold h-100">{{ $title }}</div>{{- end -}}
                     </a>
                 </div>
         

layouts/_shortcodes/navbar.html

@@ -41,6 +41,7 @@
         "mode"       $args.mode
         "menus"      $args.menus
         "logo"       $args.logo
+        "logo-mode"  $args.logoMode
         "title"      $args.title
         "class"      $args.class
         "_default"   $args.default