From 9ac578f6f30e6d1aadd975fa22e8367c8ba9fb6e Mon Sep 17 00:00:00 2001
From: vaporvee <yannik@vaporvee.com>
Date: Tue, 19 Aug 2025 00:52:55 +0200
Subject: [PATCH] fixed some navbar issues

---
 .../client/src/lib/components/navbar.svelte   | 78 +++++++++++--------
 .../lib/components/ui/button/button.svelte    |  4 +-
 .../components/ui/sheet/sheet-content.svelte  |  6 +-
 3 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/template/apps/client/src/lib/components/navbar.svelte b/template/apps/client/src/lib/components/navbar.svelte
index f7e2d69..476d9e5 100644
--- a/template/apps/client/src/lib/components/navbar.svelte
+++ b/template/apps/client/src/lib/components/navbar.svelte
@@ -38,6 +38,7 @@
 	import { MoreHorizontal, ChevronDown, ChevronRight } from '@lucide/svelte';
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+	import Button from './ui/button/button.svelte';
 
 	interface Props {
 		settings?: Settings;
@@ -127,11 +128,15 @@
 </script>
 
 <nav class="bg-primary py-3">
-	<div class="container md:mx-auto px-4 md:px-0">
+	<div class="container px-4 md:mx-auto md:px-0">
 		<div class="relative flex items-center">
 			<div class="flex items-center">
 				{#if settings}
-					<Logo {settings} class="text-white" />
+					<a href="/">
+						<Button variant="ghost" class="px-1">
+							<Logo {settings} class="text-white" />
+						</Button>
+					</a>
 				{:else}
 					<div class="text-lg font-semibold text-white">Logo</div>
 				{/if}
@@ -149,15 +154,15 @@
 								<NavigationMenuItem data-navigation-menu-item>
 									{#if item.url && !item.subitems}
 										<NavigationMenuLink
-											class={cn(
-												'relative z-20 text-white hover:text-white/80 transition-colors'
-											)}
+											class={cn('relative z-20 text-white transition-colors hover:text-white/80')}
 											href={item.url}
 										>
 											{item.name}
 										</NavigationMenuLink>
 									{:else if item.subitems}
-										<NavigationMenuTrigger class="relative z-20 text-white hover:text-white/80 transition-colors">
+										<NavigationMenuTrigger
+											class="relative z-20 text-white transition-colors hover:text-white/80"
+										>
 											{item.name}
 										</NavigationMenuTrigger>
 										<NavigationMenuContent
@@ -166,7 +171,7 @@
 											{#each item.subitems as subitem}
 												<NavigationMenuLink
 													href={subitem.url}
-													class="block rounded-md px-4 py-2 text-white hover:text-white/80 transition-colors"
+													class="block rounded-md px-4 py-2 text-white transition-colors hover:text-white/80"
 												>
 													{subitem.name}
 												</NavigationMenuLink>
@@ -179,63 +184,72 @@
 					</div>
 				</NavigationMenuRoot>
 			</div>
-
-			<div class="ml-auto flex items-center">
+			<div class="ml-auto md:hidden">
 				<Sheet bind:open={mobileMenuOpen}>
-					<SheetTrigger
-						class="rounded-md p-2 text-white transition-colors hover:bg-white/10 md:hidden"
-						aria-label="Toggle mobile menu"
-					>
-						<MoreHorizontal size={24} />
+					<SheetTrigger class="text-white md:hidden" aria-label="Toggle mobile menu">
+						<Button variant="ghost" size="icon">
+							<MoreHorizontal size={24} />
+						</Button>
 					</SheetTrigger>
-					<SheetContent side="top" class="h-full w-full bg-primary border-primary">
+					<SheetContent side="top" class="bg-primary border-primary h-full w-full text-white">
 						<SheetHeader class="border-b border-white/20 pb-4">
-							<SheetTitle class="flex items-center justify-start text-white">
+							<SheetTitle class="flex items-center justify-start">
 								{#if settings}
-									<Logo {settings} class="text-white" />
+									<a href="/">
+										<Button variant="ghost" class="px-1">
+											<Logo {settings} class="text-white" />
+										</Button>
+									</a>
 								{:else}
-									<div class="text-lg font-semibold text-white">Navigation</div>
+									<div class="text-lg font-semibold">Navigation</div>
 								{/if}
 							</SheetTitle>
 						</SheetHeader>
-						<div class="flex flex-col space-y-2 pt-6 relative">
+						<div class="relative flex flex-col space-y-2 pt-6">
 							{#each items as item, index}
 								{#if item.url && !item.subitems}
 									<div class="relative">
-										{#if index === activeIndex}
-											<div class="absolute left-0 top-0 bottom-0 w-1 bg-white/20 rounded-r-md"></div>
-										{/if}
 										<a
 											href={item.url}
-											class="block rounded-md px-4 py-2 text-sm transition-colors text-white hover:text-white/80 {index === activeIndex ? 'text-white' : ''}"
+											class={cn(
+												'mx-2 block rounded-md px-4 py-2 text-sm transition-colors hover:text-white/80',
+												index === activeIndex && 'bg-white/20'
+											)}
 											onclick={closeMobileMenu}
 										>
 											{item.name}
 										</a>
 									</div>
 								{:else if item.subitems}
-									<div class="space-y-1 relative">
+									<div class="relative space-y-1">
 										{#if index === activeIndex}
-											<div class="absolute left-0 top-0 bottom-0 w-1 bg-white/20 rounded-r-md"></div>
+											<div
+												class="absolute bottom-0 left-0 top-0 w-1 rounded-r-md bg-white/20"
+											></div>
 										{/if}
-										<button
-											class="w-full rounded-md px-4 py-2 text-left text-sm font-medium transition-all duration-200 flex items-center justify-between text-white hover:text-white/80"
+										<Button
+											class="flex w-full items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium transition-all duration-200 hover:text-white/80"
 											onclick={() => toggleSubmenu(item.name)}
 										>
 											<span>{item.name}</span>
-											<div class="transition-transform duration-300 ease-out {expandedSubmenu === item.name ? 'rotate-90' : 'rotate-0'}">
+											<div
+												class="transition-transform duration-300 ease-out {expandedSubmenu ===
+												item.name
+													? 'rotate-90'
+													: 'rotate-0'}"
+											>
 												<ChevronRight size={16} />
 											</div>
-										</button>
+										</Button>
 										{#if expandedSubmenu === item.name}
-											<div 
-												class="ml-4 space-y-1" 
+											<div
+												class="ml-4 space-y-1"
 												transition:slide={{ duration: 300, easing: quintOut }}
 											>
 												{#each item.subitems as subitem}
 													<a
 														href={subitem.url}
-														class="block rounded-md px-6 py-2 text-sm transition-colors text-white/80 hover:text-white"
+														class="block rounded-md px-6 py-2 text-sm text-white/80 transition-colors hover:text-white"
 														onclick={closeMobileMenu}
 													>
 														{subitem.name}
diff --git a/template/apps/client/src/lib/components/ui/button/button.svelte b/template/apps/client/src/lib/components/ui/button/button.svelte
index 4daf453..83d3db9 100644
--- a/template/apps/client/src/lib/components/ui/button/button.svelte
+++ b/template/apps/client/src/lib/components/ui/button/button.svelte
@@ -4,7 +4,7 @@
 	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",
+		base: "focus-visible:border-ring cursor-pointer 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",
@@ -13,7 +13,7 @@
 				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",
+				ghost: "hover:bg-white/10 hover:text-white",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
diff --git a/template/apps/client/src/lib/components/ui/sheet/sheet-content.svelte b/template/apps/client/src/lib/components/ui/sheet/sheet-content.svelte
index 856922e..46fabb4 100644
--- a/template/apps/client/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/template/apps/client/src/lib/components/ui/sheet/sheet-content.svelte
@@ -24,6 +24,7 @@
 	import type { Snippet } from "svelte";
 	import SheetOverlay from "./sheet-overlay.svelte";
 	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { buttonVariants } from "../button";
 
 	let {
 		ref = $bindable(null),
@@ -49,7 +50,10 @@
 	>
 		{@render children?.()}
 		<SheetPrimitive.Close
-			class="ring-offset-background focus-visible:ring-ring rounded-xs focus-visible:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none"
+			class={cn(
+				"ring-offset-background focus-visible:ring-ring rounded-xs focus-visible:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",
+				buttonVariants({variant: "ghost", size: "icon"})
+			)}
 		>
 			<XIcon class="size-4" />
 			<span class="sr-only">Close</span>