hazza/hinode
1
0
Fork 0
mirror of https://github.com/gethinode/hinode.git synced 2025-10-07 01:54:23 +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;
}
.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};

2
config/_default/params.toml
View File

@@ -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

19
data/structures/navbar.yml
View File

@@ -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

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

@@ -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

95
exampleSite/hugo_stats.json
View File

@@ -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-11b7de064d33d51c4587026617b09044",
"dropdown-panel-48eedbb8ffe41ffc6171e8f6acf08c98",
"dropdown-panel-83049d5f17b5b624033fbb4c0d83f75e",
"dropdown-panel-bd6146b95649a607bb5beaf85568b0c2",
"dropdown-panel-aeeb41e24f78e218f65d8ae7df52aea1",
"dropdown-panel-c8ab13f441b0f5a6b04409db1f465db6",
"dropdown-panel-dcd35a8b2398cec6b50ea2f737c2cc9c",
"dropdown-panel-eb5323953e0a4158248e6897f3bfac4c",
"dropdown-panel-fae8d991798c7e05e84587e33795e41e",
"elements-type",
"entity-relationship-diagram",
"example",
@@ -678,11 +681,11 @@
"fab-medium",
"fab-whatsapp",
"fab-x-twitter",
"faq-843494d467a971bad72d552774edf4f9",
"faq-843494d467a971bad72d552774edf4f9-heading-faq-843494d467a971bad72d552774edf4f9",
"faq-843494d467a971bad72d552774edf4f9-item-0",
"faq-843494d467a971bad72d552774edf4f9-item-1",
"faq-843494d467a971bad72d552774edf4f9-item-2",
"faq-b30d87776bf8ff367cce404d6e645cdf",
"faq-b30d87776bf8ff367cce404d6e645cdf-heading-faq-b30d87776bf8ff367cce404d6e645cdf",
"faq-b30d87776bf8ff367cce404d6e645cdf-item-0",
"faq-b30d87776bf8ff367cce404d6e645cdf-item-1",
"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-11b7de064d33d51c4587026617b09044",
"nav-panel-48eedbb8ffe41ffc6171e8f6acf08c98",
"nav-panel-83049d5f17b5b624033fbb4c0d83f75e",
"nav-panel-bd6146b95649a607bb5beaf85568b0c2",
"nav-panel-aeeb41e24f78e218f65d8ae7df52aea1",
"nav-panel-c8ab13f441b0f5a6b04409db1f465db6",
"nav-panel-dcd35a8b2398cec6b50ea2f737c2cc9c",
"nav-panel-eb5323953e0a4158248e6897f3bfac4c",
"nav-panel-fae8d991798c7e05e84587e33795e41e",
"navbar",
"navbar-0-collapse",
"navbar-mode",
@@ -786,36 +789,36 @@
"navigation",
"notification",
"overview",
"panel-0d1a7f80b8e945c5d0eee8ce962901f8-0",
"panel-0d1a7f80b8e945c5d0eee8ce962901f8-1",
"panel-0d1a7f80b8e945c5d0eee8ce962901f8-2",
"panel-0d1a7f80b8e945c5d0eee8ce962901f8-btn-0",
"panel-0d1a7f80b8e945c5d0eee8ce962901f8-btn-1",
"panel-0d1a7f80b8e945c5d0eee8ce962901f8-btn-2",
"panel-11b7de064d33d51c4587026617b09044-0",
"panel-11b7de064d33d51c4587026617b09044-1",
"panel-11b7de064d33d51c4587026617b09044-2",
"panel-11b7de064d33d51c4587026617b09044-btn-0",
"panel-11b7de064d33d51c4587026617b09044-btn-1",
"panel-11b7de064d33d51c4587026617b09044-btn-2",
"panel-48eedbb8ffe41ffc6171e8f6acf08c98-0",
"panel-48eedbb8ffe41ffc6171e8f6acf08c98-1",
"panel-48eedbb8ffe41ffc6171e8f6acf08c98-2",
"panel-48eedbb8ffe41ffc6171e8f6acf08c98-btn-0",
"panel-48eedbb8ffe41ffc6171e8f6acf08c98-btn-1",
"panel-48eedbb8ffe41ffc6171e8f6acf08c98-btn-2",
"panel-83049d5f17b5b624033fbb4c0d83f75e-0",
"panel-83049d5f17b5b624033fbb4c0d83f75e-1",
"panel-83049d5f17b5b624033fbb4c0d83f75e-2",
"panel-83049d5f17b5b624033fbb4c0d83f75e-btn-0",
"panel-83049d5f17b5b624033fbb4c0d83f75e-btn-1",
"panel-83049d5f17b5b624033fbb4c0d83f75e-btn-2",
"panel-bd6146b95649a607bb5beaf85568b0c2-0",
"panel-bd6146b95649a607bb5beaf85568b0c2-1",
"panel-bd6146b95649a607bb5beaf85568b0c2-2",
"panel-bd6146b95649a607bb5beaf85568b0c2-btn-0",
"panel-bd6146b95649a607bb5beaf85568b0c2-btn-1",
"panel-bd6146b95649a607bb5beaf85568b0c2-btn-2",
"panel-aeeb41e24f78e218f65d8ae7df52aea1-0",
"panel-aeeb41e24f78e218f65d8ae7df52aea1-1",
"panel-aeeb41e24f78e218f65d8ae7df52aea1-2",
"panel-aeeb41e24f78e218f65d8ae7df52aea1-btn-0",
"panel-aeeb41e24f78e218f65d8ae7df52aea1-btn-1",
"panel-aeeb41e24f78e218f65d8ae7df52aea1-btn-2",
"panel-c8ab13f441b0f5a6b04409db1f465db6-0",
"panel-c8ab13f441b0f5a6b04409db1f465db6-1",
"panel-c8ab13f441b0f5a6b04409db1f465db6-2",
"panel-c8ab13f441b0f5a6b04409db1f465db6-btn-0",
"panel-c8ab13f441b0f5a6b04409db1f465db6-btn-1",
"panel-c8ab13f441b0f5a6b04409db1f465db6-btn-2",
"panel-dcd35a8b2398cec6b50ea2f737c2cc9c-0",
"panel-dcd35a8b2398cec6b50ea2f737c2cc9c-1",
"panel-dcd35a8b2398cec6b50ea2f737c2cc9c-2",
"panel-dcd35a8b2398cec6b50ea2f737c2cc9c-btn-0",
"panel-dcd35a8b2398cec6b50ea2f737c2cc9c-btn-1",
"panel-dcd35a8b2398cec6b50ea2f737c2cc9c-btn-2",
"panel-eb5323953e0a4158248e6897f3bfac4c-0",
"panel-eb5323953e0a4158248e6897f3bfac4c-1",
"panel-eb5323953e0a4158248e6897f3bfac4c-2",
"panel-eb5323953e0a4158248e6897f3bfac4c-btn-0",
"panel-eb5323953e0a4158248e6897f3bfac4c-btn-1",
"panel-eb5323953e0a4158248e6897f3bfac4c-btn-2",
"panel-fae8d991798c7e05e84587e33795e41e-0",
"panel-fae8d991798c7e05e84587e33795e41e-1",
"panel-fae8d991798c7e05e84587e33795e41e-2",
"panel-fae8d991798c7e05e84587e33795e41e-btn-0",
"panel-fae8d991798c7e05e84587e33795e41e-btn-1",
"panel-fae8d991798c7e05e84587e33795e41e-btn-2",
"persona",
"pie-chart",
"pills",

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

@@ -78,9 +78,29 @@
{{- end -}}
{{ $logo := "" }}
{{ with $args.logo | default site.Params.navigation.logo }}
{{ $height := index site.Params.navigation "logo-height" | default 30 }}
{{ $logo = partial "assets/image.html" (dict "src" . "loading" "eager" "title" $title "image-height" $height) }}
{{ $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 }}
{{ $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">
{{/* Insert sidebar toggler when applicable */}}
<div class="d-flex align-items-center">
{{- if $page.Scratch.Get "sidebar" -}}
<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" }}">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
</button>
{{- else -}}
{{/* 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">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
</button>
{{- end -}}
</div>
<div class="d-flex navbar-container">
{{/* 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">
{{- if $sidebar -}}
<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" }}">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
</button>
{{- else if eq $align "center" -}}
{{/* 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">
{{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
</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>

1
layouts/_shortcodes/navbar.html
View File

@@ -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