llama-cpp-K2-FAST2 / tools /ui /src /lib /components /app /settings /SettingsChatDesktopSidebar.svelte
| <script lang="ts"> | |
| import { ICON_CLASS_DEFAULT } from '$lib/constants'; | |
| import type { SettingsSection, SettingsSectionTitle } from '$lib/types'; | |
| interface Props { | |
| sections: SettingsSection[]; | |
| isActive: (section: SettingsSection) => boolean; | |
| onSectionChange?: (section: SettingsSectionTitle) => void; | |
| } | |
| let { isActive, onSectionChange, sections }: Props = $props(); | |
| </script> | |
| <div class="sticky top-12 hidden w-64 flex-col self-start bg-background md:flex gap-6"> | |
| <nav class="space-y-1"> | |
| {#each sections as section (section.title)} | |
| <button | |
| class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent {isActive( | |
| section | |
| ) | |
| ? 'bg-accent text-accent-foreground' | |
| : 'text-muted-foreground'}" | |
| onclick={() => onSectionChange?.(section.title)} | |
| > | |
| <section.icon class={ICON_CLASS_DEFAULT} /> | |
| <span class="ml-2">{section.title}</span> | |
| </button> | |
| {/each} | |
| </nav> | |
| </div> | |