🐛 fix(bal-navigation): Service Link Background Color not correct on mobile (#1261)

* Create PR for #1243

* fix(nav): mobile has colored cards

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>

Author: github-actions[bot]

.changeset/thin-geese-laugh.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+The navigation component now provides enhanced support for colored service cards on mobile resolutions.

packages/components/src/components/bal-nav/bal-nav.sass

@@ -117,7 +117,7 @@
   cursor: pointer
 
 .bal-nav__mobile-section-item,
-.bal-nav__mobile-service-item
+.bal-nav__mobile-service-item > a
   display: flex
   justify-content: space-between
   align-items: center
@@ -186,8 +186,7 @@
 .bal-nav__mobile-section-list
   padding-top: 1rem
 
-.bal-nav__mobile-service-list
-  background: var(--bal-color-grey-3)
+.bal-nav__mobile-service-list > li
   border-radius: var(--bal-radius-normal)
   padding-top: 1rem
   padding-bottom: 1rem
@@ -213,10 +212,21 @@
 
 .bal-nav__mobile-links--clickable,
 .bal-nav__mobile-section-item--clickable,
-.bal-nav__mobile-service-item--clickable
+.bal-nav__mobile-service-item--clickable > a
   cursor: pointer
 
 .bal-nav__mobile-links--selected,
 .bal-nav__mobile-section-item--selected,
-.bal-nav__mobile-service-item--selected
+.bal-nav__mobile-service-item--selected > a
   text-decoration: underline
+
+.bal-nav__mobile-service-item--color-grey
+  background: var(--bal-nav-service-background-grey)
+.bal-nav__mobile-service-item--color-purple
+  background: var(--bal-nav-service-background-purple)
+.bal-nav__mobile-service-item--color-red
+  background: var(--bal-nav-service-background-red)
+.bal-nav__mobile-service-item--color-yellow
+  background: var(--bal-nav-service-background-yellow)
+.bal-nav__mobile-service-item--color-green
+  background: var(--bal-nav-service-background-green)

packages/components/src/components/bal-nav/bal-nav.vars.sass

@@ -4,3 +4,8 @@
 
 :root
   --bal-nav-background: var(--bal-color-primary)
+  --bal-nav-service-background-grey: var(--bal-color-grey)
+  --bal-nav-service-background-purple: var(--bal-color-purple)
+  --bal-nav-service-background-red: var(--bal-color-red)
+  --bal-nav-service-background-yellow: var(--bal-color-yellow)
+  --bal-nav-service-background-green: var(--bal-color-green)

packages/components/src/components/bal-nav/models/bal-nav-service-link-item.tsx

@@ -27,18 +27,15 @@ export class NavServiceLinkItem extends NavLinkItem implements BalProps.BalNavSe
     const hasItems = this.linkItems && this.linkItems.length > 0
 
     return (
-      <li>
-        <a
-          id={this.id}
-          class={{
-            ...block.element('mobile-service-item').class(),
-            ...block.element('mobile-service-item').modifier('selected').class(this.active),
-            ...block.element('mobile-service-item').modifier('clickable').class(this.clickable),
-          }}
-          href={this.href}
-          target={this.target}
-          onClick={ev => this.onClick(ev)}
-        >
+      <li
+        class={{
+          ...block.element('mobile-service-item').class(),
+          ...block.element('mobile-service-item').modifier(`color-${this.color}`).class(),
+          ...block.element('mobile-service-item').modifier('selected').class(this.active),
+          ...block.element('mobile-service-item').modifier('clickable').class(this.clickable),
+        }}
+      >
+        <a id={this.id} href={this.href} target={this.target} onClick={ev => this.onClick(ev)}>
           {this.label}
         </a>
         {hasItems ? (