feat: add custom prop for for styling selected menu links in dropdowns

inventage · Apr 15, 2024 · 73a53f3 · 73a53f3
1 parent 825d36c
commit 73a53f3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/happy-deers-reflect.md b/.changeset/happy-deers-reflect.md
@@ -0,0 +1,5 @@
+---
+'@inventage-web-components/portal-navigation': minor
+---
+
+Add `--portal-navigation-color-link-dropdown-selected` CSS custom property for styling selected menu links in dropdowns.
diff --git a/packages/portal-navigation/src/PortalNavigation.ts b/packages/portal-navigation/src/PortalNavigation.ts
@@ -97,6 +97,7 @@ type NavigationCssClasses = typeof NavigationCssClasses;
  * @cssprop {color} [--portal-navigation-color-link=var(--portal-navigation-color-primary)] Color used for links
  * @cssprop {color} [--portal-navigation-color-link-breakpoint=var(--portal-navigation-color-primary)] Color used for links in mobile breakpoint
  * @cssprop {color} [--portal-navigation-color-link-dropdown=var(--portal-navigation-color-primary)] Color used for links in dropdowns
+ * @cssprop {color} [--portal-navigation-color-link-dropdown-selected=var(--portal-navigation-color-selected)] Color used for selected links in dropdowns
  * @cssprop {color} [--portal-navigation-color-link-current=var(--portal-navigation-color-link)] Color used for links in current items
  * @cssprop {color} [--portal-navigation-color-selected=var(--portal-navigation-color-secondary)] Color used for selected elements
  * @cssprop {color} [--portal-navigation-color-hover=var(--portal-navigation-color-secondary)] Hover color

diff --git a/packages/portal-navigation/src/styles.css b/packages/portal-navigation/src/styles.css
@@ -224,6 +224,10 @@
   padding: var(--portal-navigation-dropdown-item-padding-y, 0.5rem) var(--portal-navigation-dropdown-item-padding-x, 1rem);
 }
 
+.dropdown > .link.-selected {
+  color: var(--portal-navigation-color-link-dropdown-selected, var(--portal-navigation-color-selected, var(--portal-navigation-color-secondary, #0369a1)));
+}
+
 @media (hover: hover) {
   .dropdown > .link:hover {
     color: var(--portal-navigation-color-hover-dropdown, var(--portal-navigation-color-hover, var(--portal-navigation-color-secondary, #0369a1)));