| |
| .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); |
| } |
| } |
