changes

src/lib/components/layouts/Navbar.svelte

@@ -66,12 +66,16 @@
 			</a>
 		</div>
 		<div class="flex w-full items-center gap-2 max-lg:order-3 max-lg:w-full">
-			<Sheet.Root>
-				<Sheet.Trigger>
+			<Sheet.Root {open}>
+				<Sheet.Trigger
+					onclick={() => {
+						open = true;
+					}}
+				>
 					<!-- <SlidersHorizontal class="md:hidden" strokeWidth={1.8} size={20} /> -->
 					<p class="text-sm font-medium md:hidden">Categories</p>
 				</Sheet.Trigger>
-				<Sheet.Content side="left" class="flex w-full flex-col gap-8 sm:w-full">
+				<Sheet.Content side="left" class="flex w-full flex-col gap-8 px-4 sm:w-full">
 					<Sheet.Header class="text-start">
 						<Sheet.Title>Categories</Sheet.Title>
 					</Sheet.Header>
@@ -83,7 +87,13 @@
 							<!-- {#await category then categoryItem} -->
 							{#each category?.categories as item}
 								{#if item?.status !== 'draft'}
-									<a href="/category/{item?.id}/{item?.slug}" class="text-nowrap">{item?.title}</a>
+									<a
+										href="/category/{item?.id}/{item?.slug}"
+										class="text-nowrap"
+										onclick={() => {
+											open = false;
+										}}>{item?.title}</a
+									>
 								{/if}
 							{/each}
 							<!-- {/await} -->