| | |
| | .nav { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--spacing-4); |
| | } |
| |
|
| | .nav-vertical { |
| | flex-direction: column; |
| | align-items: stretch; |
| | } |
| |
|
| | .nav-item { |
| | padding: var(--spacing-3) var(--spacing-4); |
| | border-radius: var(--radius); |
| | text-decoration: none; |
| | color: var(--color-secondary-600); |
| | transition: all var(--transition-normal); |
| | font-weight: var(--font-weight-medium); |
| | } |
| |
|
| | .nav-item:hover { |
| | background: var(--color-accent-100); |
| | color: var(--color-secondary-900); |
| | } |
| |
|
| | .nav-item.active { |
| | background: var(--color-primary-100); |
| | color: var(--color-primary-700); |
| | } |
| |
|
| | .nav-item-icon { |
| | width: 20px; |
| | height: 20px; |
| | margin-right: var(--spacing-2); |
| | } |
| |
|
| | @media (max-width: 767px) { |
| | .nav { |
| | flex-direction: column; |
| | gap: var(--spacing-2); |
| | } |
| | |
| | .nav-item { |
| | padding: var(--spacing-3) var(--spacing-3); |
| | display: flex; |
| | align-items: center; |
| | justify-content: flex-start; |
| | } |
| | |
| | .nav-item-icon { |
| | margin-right: var(--spacing-3); |
| | } |
| | } |
