crm-web/src/lib/components/ui/Sidebar.svelte

<script lang="ts">
    import { page } from "$app/state";
    import { onMount } from "svelte";

    type Link = { label: string; href: string };
    let links: Link[] = [];

    onMount(async () => {
        links = [
            { label: "Главная", href: "/" },
            { label: "Клиенты", href: "/clients" },
            { label: "Товары", href: "/products" },
            { label: "Звонки", href: "/calls" },
            { label: "Заказы", href: "/orders" },
        ];
    });
</script>

<nav class="flex flex-col w-44 p-4 bg-gray-100 h-screen">
    {#each links as link}
        <a
            href={link.href}
            class="px-4 py-2 mb-2 rounded font-medium text-black {page.url
                .pathname === link.href
                ? 'bg-gray-300 '
                : ''}"
        >
            {link.label}
        </a>
    {/each}
</nav>