Fixed and improved nav bar to support labels

5 files changed, 51 insertions, 33 deletions

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);
                                                         }
                                                 }
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index 8e18def..4f5cde3 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -4,12 +4,14 @@
 @use '../core.vars' as core;
 
 $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default;
-$spacing:    props.def(--o-navbar--spacing, props.get(core.$size--200)) !default;
+$spacing:    props.def(--o-navbar--spacing, props.get(core.$size--100)) !default;
 
-$item--pad-i:       props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
-$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default;
-$item--pad-b:       props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
-$item--font-size:   props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
+$item--pad-i:           props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-i-label:     props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default;
+$item--pad-i-icon:      props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default;
+$item--pad-b:           props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default;
+$item--font-size:       props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
+$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default;
 
 $key-focus--border-width:  props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
 $key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
index 711b2a7..7a2cfae 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -7,7 +7,7 @@ $header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$f
 $separator:         props.def(--o-side-nav--separator, props.get(core.$size--200)) !default;
 
 $item--pad-i:         props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default;
-$item--pad-b:         props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default;
+$item--pad-b:         props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default;
 $item--rounding:      props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default;
 
 $item--key-focus--border-width:  props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
index 14ec9d3..28c7107 100644
--- a/tpl/objects/navbar.pug
+++ b/tpl/objects/navbar.pug
@@ -26,12 +26,18 @@ mixin navbar-item
         }
 
     #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
+        if attributes.icon
+            .o-navbar__item-label
+                block
         .o-navbar__item-content
+            if attributes.preIcon
+                +icon(attributes.preIcon)
+                = ' '
             if attributes.icon
                 +icon(attributes.icon)
-                = ' '
-            span.o-navbar__item-content-text
-                block
+            else
+                span.o-navbar__item-content-text
+                    block
             if attributes.postIcon
                 = ' '
                 +icon(attributes.postIcon)
diff --git a/tpl/views/navbar.pug b/tpl/views/navbar.pug
index 345a22b..f409a44 100644
--- a/tpl/views/navbar.pug
+++ b/tpl/views/navbar.pug
@@ -14,6 +14,12 @@ mixin view-navbar
 
         .c-box
             +navbar(quiet=true)
-                +navbar-item(selected=true icon="arrow-left")= 'Home'
+                +navbar-item(selected=true preIcon="arrow-left")= 'Home'
                 +navbar-item= 'Art'
                 +navbar-item= 'Emojis'
+
+        .c-box
+            +navbar
+                +navbar-item(icon="image")= 'Home'
+                +navbar-item(icon="video" selected=true)= 'Art'
+                +navbar-item(icon="user")= 'Emojis'