feat: added particle and reformatting

This commit is contained in:
Bart van der Braak 2024-02-02 01:08:13 +01:00
parent 5158767019
commit 32b6bf7582
147 changed files with 1186 additions and 922 deletions

View file

@ -1,9 +1,9 @@
<script lang="ts">
import { cn } from "$lib/utils";
import { page } from "$app/stores";
import { Button } from "$lib/components/ui/button";
import { cubicInOut } from "svelte/easing";
import { crossfade } from "svelte/transition";
import { cn } from '$lib/utils';
import { page } from '$app/stores';
import { Button } from '$lib/components/ui/button';
import { cubicInOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';
let className: string | undefined | null = undefined;
export let items: { href: string; title: string }[];
@ -15,24 +15,21 @@
});
</script>
<nav class={cn("flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)}>
<nav class={cn('flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1', className)}>
{#each items as item}
{@const isActive = $page.url.pathname === item.href}
<Button
href={item.href}
variant="ghost"
class={cn(
!isActive && "hover:underline",
"relative justify-start hover:bg-transparent"
)}
class={cn(!isActive && 'hover:underline', 'relative justify-start hover:bg-transparent')}
data-sveltekit-noscroll
>
{#if isActive}
<div
class="absolute inset-0 rounded-md bg-muted"
in:send={{ key: "active-sidebar-tab" }}
out:receive={{ key: "active-sidebar-tab" }}
in:send={{ key: 'active-sidebar-tab' }}
out:receive={{ key: 'active-sidebar-tab' }}
/>
{/if}
<div class="relative">