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} -->

src/routes/brand/+page.svelte

@@ -48,10 +48,15 @@
 	];
 </script>
 
-<div class="mx-auto my-12 flex w-full max-w-screen-2xl flex-col gap-6 px-12 py-4">
-	<div>
-		<Tabs.Root value={brands[0]?.name.slice(0, 1).toLowerCase()} class="flex flex-col gap-12">
-			<Tabs.List class="flex-wrap gap-2 bg-transparent">
+<div
+	class="mx-auto my-12 flex w-full max-w-screen-2xl flex-col gap-6 px-12 py-4 max-sm:my-4 max-sm:h-auto max-sm:max-w-full max-sm:flex-wrap max-sm:px-6"
+>
+	<Tabs.Root
+		value={brands[0]?.name.slice(0, 1).toLowerCase()}
+		class="gap-12"
+		orientation={'vertical'}
+	>
+		<Tabs.List class="flex !h-auto w-full flex-wrap gap-2 bg-transparent">
 			{#each alphabets as letter}
 				<!-- {#each brands as brand} -->
 				<!-- {#if letter === brand?.name.slice(0, 1).toLowerCase()} -->
@@ -88,5 +93,4 @@
 			{/each}
 		{/each}
 	</Tabs.Root>
-	</div>
 </div>

src/routes/category/[categoryType]/[[slug]]/+page.svelte

@@ -218,7 +218,32 @@
 						{#await data?.productCategory}
 							<div></div>
 						{:then category}
-							{#if category?.attributes.length > 0}
+							{#each originalFilters as attribute}
+								<div class="flex flex-col gap-2.5">
+									<Sheet.Title class="text-start font-normal">{attribute.title}</Sheet.Title>
+									<!-- <p class="text-sm font-semibold">{attribute.title}</p> -->
+									<ul class="flex flex-col gap-1.5">
+										{#each attribute.values as value, index}
+											<li class="flex items-center gap-2">
+												<Checkbox
+													id={`${attribute.title}-${index}`}
+													checked={isChecked('attributes[]', value.id)}
+													onCheckedChange={(e) => handleCheckboxChange('attributes[]', value.id, e)}
+												/>
+												<!-- disabled={!currentFilters.some(
+											(f) =>
+												f.title === attribute.title && f.values.some((v) => v.value === value.id)
+										)} -->
+												<p class="text-sm">{value.value}</p>
+												{#if !currentFilters.some((f) => f.title === attribute.title && f.values.some((v) => v.value === value.value))}
+													<span class="text-xs text-gray-400">(0)</span>
+												{/if}
+											</li>
+										{/each}
+									</ul>
+								</div>
+							{/each}
+							<!-- {#if category?.attributes.length > 0}
 								{#each category?.attributes as attribute}
 									<Sheet.Title class="text-start font-normal">{attribute.title}</Sheet.Title>
 									<Sheet.Description>
@@ -232,7 +257,7 @@
 										</ul>
 									</Sheet.Description>
 								{/each}
-							{/if}
+							{/if} -->
 						{/await}
 					</Sheet.Header>
 				</Sheet.Content>