hazza/hinode
1
0
Fork 0
mirror of https://github.com/gethinode/hinode.git synced 2025-10-07 18:14:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enable configuration of navbar logo align and mode

Browse Source
This commit is contained in:
Mark Dumay
2025-09-14 13:58:02 +02:00
parent b48a9598f4
commit f482f4dd94
8 changed files with 141 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/scss/common/_styles.scss
View File

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

18
assets/scss/components/_navbar.scss
View File

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

2
config/_default/params.toml
View File

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

19
data/structures/navbar.yml
View File

@@ -79,6 +79,25 @@ arguments:
comment: >- comment: >-
Address of the logo image, defaults to the parameter `logo` set in the Address of the logo image, defaults to the parameter `logo` set in the
`main` section of the site's parameter configuration. `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 # deprecated arguments
size: size:
type: select type: select

2
exampleSite/config/_default/params.toml
View File

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

95
exampleSite/hugo_stats.json
View File

@@ -429,6 +429,7 @@
"navbar-mode-selector", "navbar-mode-selector",
"navbar-nav", "navbar-nav",
"navbar-nav-scroll", "navbar-nav-scroll",
"navbar-title-center",
"navbar-toggler", "navbar-toggler",
"next", "next",
"no-js", "no-js",
@@ -597,7 +598,9 @@
"visually-hidden", "visually-hidden",
"vr", "vr",
"w-100", "w-100",
"w-50" "w-50",
"width-100",
"width-md-auto"
], ],
"ids": [ "ids": [
"abbr", "abbr",
@@ -656,11 +659,11 @@
"docs", "docs",
"documentation", "documentation",
"dropdown-nav-0", "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", "elements-type",
"entity-relationship-diagram", "entity-relationship-diagram",
"example", "example",
@@ -678,11 +681,11 @@
"fab-medium", "fab-medium",
"fab-whatsapp", "fab-whatsapp",
"fab-x-twitter", "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-1",
"fas-2", "fas-2",
"fas-3", "fas-3",
@@ -773,11 +776,11 @@
"nav-0-btn-1", "nav-0-btn-1",
"nav-0-btn-2", "nav-0-btn-2",
"nav-nav-0", "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",
"navbar-0-collapse", "navbar-0-collapse",
"navbar-mode", "navbar-mode",
@@ -786,36 +789,36 @@
"navigation", "navigation",
"notification", "notification",
"overview", "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", "persona",
"pie-chart", "pie-chart",
"pills", "pills",

37
layouts/_partials/assets/navbar.html
View File

@@ -78,9 +78,29 @@
{{- end -}} {{- end -}}
{{ $logo := "" }} {{ $logo := "" }}
{{ $mode := index site.Params.navigation "logo-mode" | default false }}
{{ if (not (in $args.default "logo-mode")) }}
{{ $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 }} {{ with $args.logo | default site.Params.navigation.logo }}
{{ $height := index site.Params.navigation "logo-height" | default 30 }} {{ $height := index site.Params.navigation "logo-height" | default 30 }}
{{ $logo = partial "assets/image.html" (dict "src" . "loading" "eager" "title" $title "image-height" $height) }} {{ $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 }} {{ end }}
{{- $class := $args.class -}} {{- $class := $args.class -}}
@@ -107,26 +127,29 @@
{{ end }} {{ end }}
> >
<div class="container-xxl p-0"> <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 */}}
{{ $sidebar := $page.Scratch.Get "sidebar" }}
{{- if or $sidebar (eq $align "center") -}}
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
{{- if $page.Scratch.Get "sidebar" -}} {{- if $sidebar -}}
<button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas" <button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}"> data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}} {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
</button> </button>
{{- else -}} {{- else if eq $align "center" -}}
{{/* Insert invisible sidebar toggler to center logo correctly on smaller screens */}} {{/* Insert invisible sidebar toggler to center logo correctly on smaller screens */}}
<button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button"> <button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}} {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
</button> </button>
{{- end -}} {{- end -}}
</div> </div>
{{ end }}
{{/* Insert the brand logo or name */}} {{/* 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" }}"> <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> </a>
</div> </div>

1
layouts/_shortcodes/navbar.html
View File

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