frontend/src/app.css

@@ -149,6 +149,10 @@ body {
 	@apply bg-white font-sans text-base font-normal text-gray-700;
 }
 
+button {
+	@apply cursor-pointer;
+}
+
 .container {
 	@apply mx-auto max-w-screen-xl px-4 md:px-6;
 }

frontend/src/lib/common/framework/components/ui/button/button.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/common/framework/components/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+				outline:
+					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

frontend/src/lib/common/framework/components/ui/button/index.ts

@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};

frontend/src/lib/dashboard/framework/ui/DashboardLinkButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { Button } from '$lib/common/framework/components/ui/button/index';
+	import type { DashboardLink } from '$lib/dashboard/framework/ui/dashboardLink';
+
+	const { link }: { link: DashboardLink } = $props();
+
+	const isSelected = $derived.by(() => {
+		const pathname = page.url.pathname;
+		return pathname === link.href || pathname.startsWith(link.href + '/');
+	});
+</script>
+
+<a href={link.href}>
+	<Button variant={isSelected ? 'outline' : 'ghost'} class="w-full">
+		<span class="w-full text-left">
+			{link.label}
+		</span>
+	</Button>
+</a>

frontend/src/lib/dashboard/framework/ui/DashboardNavbar.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { DashboardLink } from '$lib/dashboard/framework/ui/dashboardLink';
+	import DashboardLinkButton from '$lib/dashboard/framework/ui/DashboardLinkButton.svelte';
+
+	const { links }: { links: DashboardLink[] } = $props();
+</script>
+
+<div class="border-true-gray-300 w-3xs border-e p-8">
+	<div class="mb-3 font-bold">Dashboard</div>
+	<div class="flex flex-col">
+		{#each links as link (link.href)}
+			<DashboardLinkButton {link} />
+		{/each}
+	</div>
+</div>

frontend/src/lib/dashboard/framework/ui/dashboardLink.ts

@@ -0,0 +1,4 @@
+export interface DashboardLink {
+	label: string;
+	href: string;
+}

frontend/src/routes/dashboard/+layout.svelte

@@ -9,6 +9,8 @@
 	import type { LayoutProps } from './$types';
 	import { StatusType } from '$lib/common/adapter/presenter/asyncState';
 	import ErrorPage from '$lib/common/framework/ui/ErrorPage.svelte';
+	import DashboardNavbar from '$lib/dashboard/framework/ui/DashboardNavbar.svelte';
+	import type { DashboardLink } from '$lib/dashboard/framework/ui/dashboardLink';
 
 	const { children }: LayoutProps = $props();
 
@@ -34,6 +36,11 @@
 		}
 		return false;
 	});
+
+	const links: DashboardLink[] = [
+		{ label: 'Image', href: '/dashboard/image' },
+		{ label: 'Post', href: '/dashboard/post' },
+	];
 </script>
 
 {#if isLoading}
@@ -41,5 +48,8 @@
 {:else if hasError}
 	<ErrorPage />
 {:else}
-	{@render children()}
+	<div class="min-h-content-height grid grid-cols-[auto_1fr]">
+		<DashboardNavbar {links} />
+		{@render children()}
+	</div>
 {/if}

frontend/src/routes/dashboard/+page.server.ts

@@ -0,0 +1,10 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+	const { pathname } = url;
+
+	if (pathname === '/dashboard') {
+		redirect(302, '/dashboard/image');
+	}
+};

frontend/src/routes/dashboard/+page.svelte

@@ -1 +0,0 @@
-<div>Dashboard</div>

frontend/src/routes/dashboard/image/+page.svelte

@@ -0,0 +1 @@
+<div>Image</div>

frontend/src/routes/dashboard/post/+page.svelte

@@ -0,0 +1 @@
+<div>Post</div>