|
/**
|
|
* @fileoverview Navigation Styles for Rantii
|
|
* @author retoor <retoor@molodetz.nl>
|
|
* @description Side navigation component styles
|
|
* @keywords css, navigation, sidebar, menu, styles
|
|
*/
|
|
|
|
app-nav {
|
|
position: fixed;
|
|
top: var(--header-height);
|
|
left: 0;
|
|
bottom: 0;
|
|
width: var(--nav-width);
|
|
background-color: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
overflow-y: auto;
|
|
z-index: var(--z-sticky);
|
|
transform: translateX(-100%);
|
|
transition: transform var(--transition-normal);
|
|
}
|
|
|
|
app-nav.nav-open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
app-nav {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.nav-container {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.nav-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.nav-item {
|
|
display: block;
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
color: var(--color-text-secondary);
|
|
border-radius: var(--radius-md);
|
|
text-decoration: none;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--color-text);
|
|
background-color: var(--color-surface-hover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-item.active .nav-link {
|
|
color: var(--color-primary);
|
|
background-color: rgba(233, 69, 96, 0.1);
|
|
}
|
|
|
|
.nav-link svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-badge {
|
|
margin-left: auto;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
padding: 0 6px;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
border-radius: var(--radius-full);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-divider {
|
|
height: 1px;
|
|
background-color: var(--color-border);
|
|
margin: var(--spacing-md) 0;
|
|
}
|
|
|
|
.nav-link-danger {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.nav-link-danger:hover {
|
|
color: var(--color-error);
|
|
background-color: rgba(239, 68, 68, 0.1);
|
|
}
|