2025-03-01 10:00:40 -05:00

97 lines
2.6 KiB
Svelte

<script lang="ts">
import { i18n } from "@/i18n"
import * as m from "@/paraglide/messages"
import { goHome } from "@/utils/route"
import { Button, Sidebar } from "@kksh/svelte5"
import { Constants } from "@kksh/ui"
import { ArrowLeftIcon, FolderSearch } from "lucide-svelte"
import Blocks from "lucide-svelte/icons/blocks"
import Cog from "lucide-svelte/icons/cog"
import FileCode2 from "lucide-svelte/icons/file-code-2"
import Info from "lucide-svelte/icons/info"
import Route from "lucide-svelte/icons/route"
import SquareTerminal from "lucide-svelte/icons/square-terminal"
const items = [
{
title: m.settings_menu_general(),
url: i18n.resolveRoute("/app/settings"),
icon: Cog
},
{
title: "App Search Paths",
url: i18n.resolveRoute("/app/settings/app-search-paths"),
icon: FolderSearch
},
// {
// title: m.settings_menu_developer(),
// url: i18n.resolveRoute("/app/settings/developer"),
// icon: SquareTerminal
// },
{
title: m.settings_menu_extensions(),
url: i18n.resolveRoute("/app/settings/extensions"),
icon: Blocks
},
{
title: m.settings_menu_set_dev_ext(),
url: i18n.resolveRoute("/app/settings/set-dev-ext-path"),
icon: Route
},
{
title: m.settings_menu_add_dev_ext(),
url: i18n.resolveRoute("/app/settings/add-dev-extension"),
icon: FileCode2
},
{
title: m.settings_menu_about(),
url: i18n.resolveRoute("/app/settings/about"),
icon: Info
}
]
let currentItem = $state(items.find((item) => window.location.pathname === item.url))
</script>
<Sidebar.Root>
<Sidebar.Header class="h-12">
<Sidebar.Menu>
<Sidebar.MenuItem data-tauri-drag-region>
<Button
variant="outline"
size="icon"
class={Constants.CLASSNAMES.BACK_BUTTON}
onclick={goHome}
>
<ArrowLeftIcon class="h-4 w-4" />
</Button>
</Sidebar.MenuItem>
</Sidebar.Menu>
</Sidebar.Header>
<Sidebar.Content>
<Sidebar.Group>
<Sidebar.GroupLabel data-tauri-drag-region>{m.settings_menu_settings()}</Sidebar.GroupLabel>
<Sidebar.GroupContent>
<Sidebar.Menu>
{#each items as item (item.title)}
<Sidebar.MenuItem>
<Sidebar.MenuButton
isActive={currentItem?.url === item.url}
onclick={() => {
currentItem = item
}}
>
{#snippet child({ props })}
<a href={item.url} {...props}>
<item.icon />
<span>{item.title}</span>
</a>
{/snippet}
</Sidebar.MenuButton>
</Sidebar.MenuItem>
{/each}
</Sidebar.Menu>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Content>
</Sidebar.Root>