Dispatcharr/frontend/src/components/sidebar.css
2026-02-11 19:51:21 -05:00

58 lines
1.3 KiB
CSS

.mantine-Stack-root .navlink {
display: flex;
flex-direction: row; /* Ensures horizontal layout */
flex-wrap: nowrap;
align-items: center;
gap: 12px;
padding: 5px 8px !important;
border-radius: 6px;
background-color: transparent; /* Default background when not active */
border: 1px solid transparent;
transition: all 0.3s ease;
margin-left: 2px;
}
/* Active state styles */
.navlink.navlink-active {
color: #ffffff;
background-color: #245043;
border: 1px solid #3ba882;
}
/* Hover effect */
.navlink:hover, .navlink-parent-active {
background-color: #2A2F34; /* Gray hover effect when not active */
border: 1px solid #3D3D42;
}
/* Hover effect for active state */
.navlink.navlink-active:hover {
background-color: #3a3a40;
border: 1px solid #3ba882;
}
/* Collapse condition for justifyContent */
.navlink.navlink-collapsed {
justify-content: center;
}
.navlink:not(.navlink-collapsed) {
justify-content: flex-start;
}
/* Left indicator for open nav groups rendered outside buttons */
.navgroup-open {
position: relative;
overflow: visible;
}
.navgroup-open::before {
content: '';
position: absolute;
left: 0; /* avoid horizontal overflow; sits at container edge */
top: 0;
bottom: 0;
width: 2px;
background: #3BA882;
pointer-events: none;
z-index: 2;
}