From 2085e99bcde12027a2bc0479d95e7511acfb4562 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 11 Nov 2025 21:00:31 +0100
Subject: Fixed and improved nav bar to support labels

---
 src/objects/_navbar.scss | 50 ++++++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 23 deletions(-)

(limited to 'src/objects/_navbar.scss')

diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index ec03c62..ce500f3 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -15,16 +15,28 @@
 		display:    flex;
 		block-size: props.get(vars.$block-size);
 
+		@include bem.elem('item-label') {
+			order:              2;
+			margin-block-start: props.get(vars.$item--pad-b);
+			font-size:          props.get(vars.$item--label-font-size);
+			font-weight:        bold;
+
+			@include bem.next-elem('item-content') {
+				padding-inline: props.get(vars.$item--pad-i-icon);
+			}
+		}
+
 		@include bem.elem('item-content-text') {
 			margin-inline: props.get(vars.$item--pad-i-label);
+			font-size:     props.get(vars.$item--font-size);
 		}
 
 		@include bem.elem('item-content') {
 			position:        relative;
+			order:           1;
 			padding-block:   props.get(vars.$item--pad-b);
 			padding-inline:  props.get(vars.$item--pad-i);
-			font-size:       props.get(vars.$item--font-size);
-			color:           currentColor;
+			color:           props.get(vars.$default-theme, --disabled, --label-color);
 			white-space:     nowrap;
 			border-radius:   100em;
 
@@ -55,18 +67,18 @@
 			inline-size:     100%;
 			padding-inline:  calc(.5 * props.get(vars.$spacing));
 			font-weight:     500;
-			color:           props.get(vars.$default-theme, --disabled, --label-color);
 
 			&:link,
 			&:visited,
 			&:enabled {
-				color: props.get(vars.$default-theme, --label-color);
+				@include bem.elem('item-content') {
+					color: props.get(vars.$default-theme, --label-color);
+				}
 
 				&:hover,
 				&:focus-visible {
-					color: props.get(vars.$default-theme, --hover, --label-color);
-
 					@include bem.elem('item-content') {
+						color:            props.get(vars.$default-theme, --hover, --label-color);
 						background-color: props.get(vars.$default-theme, --hover, --bg-color);
 					}
 				}
@@ -80,9 +92,8 @@
 				}
 
 				&:active {
-					color: props.get(vars.$default-theme, --active, --label-color);
-
 					@include bem.elem('item-content') {
+						color:            props.get(vars.$default-theme, --active, --label-color);
 						background-color: props.get(vars.$default-theme, --active, --bg-color);
 					}
 				}
@@ -90,34 +101,31 @@
 
 			@include bem.is('selected') {
 				font-weight: bold;
-				color:       props.get(vars.$default-theme, --selected, --disabled, --label-color);
 
 				@include bem.elem('item-content') {
+					color:            props.get(vars.$default-theme, --selected, --disabled, --label-color);
 					background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
 				}
 
 				&:link,
 				&:visited,
 				&:enabled {
-					color: props.get(vars.$default-theme, --selected, --label-color);
-
 					@include bem.elem('item-content') {
+						color:            props.get(vars.$default-theme, --selected, --label-color);
 						background-color: props.get(vars.$default-theme, --selected, --bg-color);
 					}
 
 					&:hover,
 					&:focus-visible {
-						color: props.get(vars.$default-theme, --selected, --hover, --label-color);
-
 						@include bem.elem('item-content') {
+							color:            props.get(vars.$default-theme, --selected, --hover, --label-color);
 							background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
 						}
 					}
 
 					&:active {
-						color: props.get(vars.$default-theme, --selected, --active, --label-color);
-
 						@include bem.elem('item-content') {
+							color:            props.get(vars.$default-theme, --selected, --active, --label-color);
 							background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
 						}
 					}
@@ -152,34 +160,30 @@
 		@include bem.modifier('quiet') {
 			@include bem.elem('item') {
 				@include bem.is('selected') {
-					color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
-
 					@include bem.elem('item-content') {
+						color:            props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
 						background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
 					}
 
 					&:link,
 					&:visited,
 					&:enabled {
-						color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
-
 						@include bem.elem('item-content') {
+							color:            props.get(vars.$default-theme, --quiet, --selected, --label-color);
 							background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
 						}
 
 						&:hover,
 						&:focus-visible {
-							color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
-
 							@include bem.elem('item-content') {
+								color:            props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
 								background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
 							}
 						}
 
 						&:active {
-							color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
-
 							@include bem.elem('item-content') {
+								color:            props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
 								background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
 							}
 						}
-- 
cgit v1.2.3-70-g09d2