Improved Navigation selection handling
:host-context(body) {
--selection-color: var(--clr-color-neutral-400);
+ --selection-color-hover: #0072a3;
--flyout-background-color: var(--clr-color-neutral-50);
--flyout-color: var(--clr-global-font-color);
--flyout-header-color: var(--clr-vertical-nav-item-color, #666666);
:host-context(body.dark) {
--selection-color: #324f62;
+ --selection-color-hover: #fff;
--flyout-background-color: #1b2a32;
--flyout-color: #acbac3;
--flyout-header-color: #acbac3;
background-color: var(--selection-color);
}
+ .item-selected:hover {
+ color: var(--selection-color-hover);
+ }
+
.navigation-items {
flex-grow: 1;
overflow-y: auto;
}
}
+ .nav-link.active {
+ background-color: var(--selection-color);
+ }
.item-selected:hover + .flyout {
display: flex;
}
