fix(nav-item): makes nav-itemcomponent respect the active=false (#2364)

telekom · Nov 7, 2024 · 9a999fb · 9a999fb
1 parent c86ca15
commit 9a999fb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
@@ -168,14 +168,14 @@
 }
 
 .scale-telekom-nav-list[variant='main-nav']
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button),
 .scale-telekom-nav-list[variant='main-nav']
   > scale-menu-flyout
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button),
 .scale-telekom-nav-list[variant='main-nav']
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button) {
   color: var(--telekom-color-text-and-icon-primary-standard);
 }
@@ -255,14 +255,14 @@
 }
 
 .scale-telekom-nav-list[variant='main-nav']
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button):after,
 .scale-telekom-nav-list[variant='functions']
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button):after,
 .scale-telekom-nav-list[variant='main-nav']
   > scale-menu-flyout
-  > .scale-telekom-nav-item[active]
+  > .scale-telekom-nav-item[active]:not([active='false'])
   > :where(a, button):after {
   content: '';
   height: var(--telekom-spacing-composition-space-03);
@@ -277,14 +277,14 @@
 
 @media screen and (forced-colors: active), (-ms-high-contrast: active) {
   .scale-telekom-nav-list[variant='main-nav']
-    > .scale-telekom-nav-item[active]
+    > .scale-telekom-nav-item[active]:not([active='false'])
     > :where(a, button),
   .scale-telekom-nav-list[variant='functions']
-    > .scale-telekom-nav-item[active]
+    > .scale-telekom-nav-item[active]:not([active='false'])
     > :where(a, button),
   .scale-telekom-nav-list[variant='main-nav']
     > scale-menu-flyout
-    > .scale-telekom-nav-item[active]
+    > .scale-telekom-nav-item[active]:not([active='false'])
     > :where(a, button) {
     border-bottom: 2px solid hsl(0, 0%, 100%);
   }

diff --git a/packages/components/src/html/telekom-header.html b/packages/components/src/html/telekom-header.html
@@ -163,7 +163,7 @@
             </scale-telekom-mega-menu>
           </scale-telekom-nav-flyout>
         </scale-telekom-nav-item>
-        <scale-telekom-nav-item>
+        <scale-telekom-nav-item active="false">
           <a href="#">Topic Three</a>
         </scale-telekom-nav-item>
         <scale-telekom-nav-item>