From 9153405b2c06aa1d6daa5efd8e2364d925bb21ed Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 22 Apr 2024 16:27:36 -0400
Subject: [PATCH] Fix issues in AddOnsNavigation

---
 src/lib/components/addons/AddOnsNavigation.svelte | 13 ++++++++-----
 src/routes/app/add-ons/+page.svelte               |  4 +++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/addons/AddOnsNavigation.svelte b/src/lib/components/addons/AddOnsNavigation.svelte
index b0bd23cca..a2f7285e6 100644
--- a/src/lib/components/addons/AddOnsNavigation.svelte
+++ b/src/lib/components/addons/AddOnsNavigation.svelte
@@ -21,7 +21,7 @@
     <SidebarItem
       active={active === "all"}
       href="/app/add-ons"
-      --hover="var(--blue-2)"
+      --hover-background="var(--blue-2)"
     >
       <Infinity16 fill="var(--blue-3)" />
       All
@@ -29,7 +29,7 @@
     <SidebarItem
       active={active === "active"}
       href="/app/add-ons?active=true"
-      --hover="var(--orange-light)"
+      --hover-background="var(--orange-light)"
     >
       <Pin --fill="var(--orange)" />
       Pinned
@@ -37,7 +37,7 @@
     <SidebarItem
       active={active === "featured"}
       href="/app/add-ons?featured=true"
-      --hover="var(--yellow-light)"
+      --hover-background="var(--yellow-light)"
     >
       <StarFill16 fill="var(--yellow)" />
       Featured
@@ -45,7 +45,7 @@
     <SidebarItem
       active={active === "premium"}
       href="/app/add-ons?premium=true"
-      --hover="var(--green-light)"
+      --hover-background="var(--green-light)"
     >
       <Premium --fill="var(--green)" />
       Premium
@@ -54,7 +54,10 @@
   <Flex direction="column">
     <SidebarItem small --color="var(--gray-4)">Collections</SidebarItem>
     {#each CATEGORIES as [key, label]}
-      <SidebarItem href={`/app/add-ons?category=${key}`}>
+      <SidebarItem
+        href={`/app/add-ons?category=${key}`}
+        active={active === key}
+      >
         <!-- <Hash16 fill="var(--gray-4)" /> -->
         {label}
       </SidebarItem>
diff --git a/src/routes/app/add-ons/+page.svelte b/src/routes/app/add-ons/+page.svelte
index 2c44caa3d..c272e6ee8 100644
--- a/src/routes/app/add-ons/+page.svelte
+++ b/src/routes/app/add-ons/+page.svelte
@@ -48,7 +48,9 @@
   $: active =
     Array.from(($page.url as URL).searchParams.entries()).find(
       ([_, value]) => value === "true",
-    )?.[0] ?? "all";
+    )?.[0] ??
+    ($page.url as URL).searchParams.get("category") ??
+    "all";
   $: showTip = ["active", "featured", "premium"].includes(active);
 
   $: query = ($page.url as URL).searchParams.get("query") ?? "";