| .aside { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin: 16px 0 24px; |
| flex-wrap: wrap; |
| gap: 16px; |
| |
| .rightSearch { |
| position: relative; |
| .searchIcon { |
| position: absolute; |
| left: 12px; |
| top: 10px; |
| } |
| input { |
| width: 280px; |
| max-width: 100%; |
| height: 38px; |
| border-radius: var(--radius-pill); |
| border: 1px solid var(--color-border); |
| padding-left: 40px; |
| padding-right: 16px; |
| font-size: 0.875rem; |
| background-color: var(--color-bg-subtle); |
| color: var(--color-text); |
| transition: border-color var(--motion-fast), |
| background-color var(--motion-fast); |
| &::placeholder { |
| color: var(--color-text-soft); |
| } |
| &:focus { |
| outline: none; |
| border-color: var(--color-accent); |
| background-color: var(--color-surface); |
| } |
| } |
| } |
| |
| .sidebar { |
| max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); |
| overflow-y: auto; |
| position: sticky; |
| padding-top: 4px; |
| } |
| |
| .sidebarItemTitle { |
| display: none; |
| } |
| |
| .sidebarItemList { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
| |
| .sidebarItem { |
| cursor: pointer; |
| color: var(--color-text-muted); |
| padding: 6px 14px; |
| height: auto; |
| line-height: 1.4; |
| border-radius: var(--radius-pill); |
| border: 1px solid var(--color-border); |
| background-color: var(--color-bg-subtle); |
| font-size: 0.875rem; |
| transition: background-color var(--motion-fast), |
| color var(--motion-fast), |
| border-color var(--motion-fast); |
| |
| &:hover, |
| &.active { |
| background-color: var(--color-accent); |
| color: var(--brand-black); |
| border-color: var(--color-accent); |
| } |
| } |
| } |
| |
| html[data-theme="dark"] { |
| .sidebarItem { |
| &:hover, |
| &.active { |
| background-color: var(--color-accent); |
| color: var(--brand-black); |
| border-color: var(--color-accent); |
| } |
| } |
| } |
