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.Root {open}>
-				<Sheet.Trigger>
+				<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,45 +48,49 @@
 	];
 </script>
 
-<div class="mx-auto my-12 flex w-full max-w-screen-2xl flex-col gap-6 px-12 py-4">
+<div
-	<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="flex flex-col gap-12">
+>
-			<Tabs.List class="flex-wrap gap-2 bg-transparent">
+	<Tabs.Root
-				{#each alphabets as letter}
+		value={brands[0]?.name.slice(0, 1).toLowerCase()}
-					<!-- {#each brands as brand} -->
+		class="gap-12"
-					<!-- {#if letter === brand?.name.slice(0, 1).toLowerCase()} -->
+		orientation={'vertical'}
-					<Tabs.Trigger
+	>
-						disabled={!brands.some((b) => b.name.slice(0, 1).toLowerCase() === letter)}
+		<Tabs.List class="flex !h-auto w-full flex-wrap gap-2 bg-transparent">
-						value={letter}
-						class="h-12 w-12 cursor-pointer rounded-sm bg-gray-100 data-[state=active]:bg-primary data-[state=active]:text-white"
-						>{letter.toUpperCase()}</Tabs.Trigger
-					>
-					<!-- {/if} -->
-					<!-- {/each} -->
-				{/each}
-			</Tabs.List>
 			{#each alphabets as letter}
-				{#each brands as brand}
+				<!-- {#each brands as brand} -->
-					{#if letter === brand?.name.slice(0, 1).toLowerCase()}
+				<!-- {#if letter === brand?.name.slice(0, 1).toLowerCase()} -->
-						<Tabs.Content value={letter} class="grid grid-cols-5 gap-4">
+				<Tabs.Trigger
-							<a href={`/category/brand/${brand?.id}`}>
+					disabled={!brands.some((b) => b.name.slice(0, 1).toLowerCase() === letter)}
-								<div
+					value={letter}
-									class="flex w-full flex-col gap-4 rounded-md border border-gray-200 p-2 hover:shadow-md hover:transition-all hover:duration-200"
+					class="h-12 w-12 cursor-pointer rounded-sm bg-gray-100 data-[state=active]:bg-primary data-[state=active]:text-white"
-								>
+					>{letter.toUpperCase()}</Tabs.Trigger
-									<img
+				>
-										src={brand?.image}
+				<!-- {/if} -->
-										alt={brand?.name}
+				<!-- {/each} -->
-										class="aspect-square rounded-sm object-contain object-center"
-									/>
-									<p class="text-center text-lg">
-										{brand?.name}
-									</p>
-								</div>
-							</a>
-						</Tabs.Content>
-					{/if}
-				{/each}
 			{/each}
-		</Tabs.Root>
+		</Tabs.List>
-	</div>
+		{#each alphabets as letter}
+			{#each brands as brand}
+				{#if letter === brand?.name.slice(0, 1).toLowerCase()}
+					<Tabs.Content value={letter} class="grid grid-cols-5 gap-4">
+						<a href={`/category/brand/${brand?.id}`}>
+							<div
+								class="flex w-full flex-col gap-4 rounded-md border border-gray-200 p-2 hover:shadow-md hover:transition-all hover:duration-200"
+							>
+								<img
+									src={brand?.image}
+									alt={brand?.name}
+									class="aspect-square rounded-sm object-contain object-center"
+								/>
+								<p class="text-center text-lg">
+									{brand?.name}
+								</p>
+							</div>
+						</a>
+					</Tabs.Content>
+				{/if}
+			{/each}
+		{/each}
+	</Tabs.Root>
 </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>