From 260246355de10e8114dedd7f91edb61cf69a0142 Mon Sep 17 00:00:00 2001
From: ikurotime <davidhuertasortiz@gmail.com>
Date: Mon, 10 Oct 2022 23:43:54 +0200
Subject: [PATCH] refactor: add categories active indicator

---
 src/layout/header/categories.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/layout/header/categories.tsx b/src/layout/header/categories.tsx
index b8f62fc..ed290e4 100644
--- a/src/layout/header/categories.tsx
+++ b/src/layout/header/categories.tsx
@@ -5,11 +5,12 @@ import CustomLink from "@/common/link";
 import { Box, useColorModeValue } from "@chakra-ui/react";
 import { RaceBy } from "@uiball/loaders";
 import Tap from "@/animations/tap";
+import { useRouter } from "next/router";
 
 const Categories = () => {
   const { data, error } = useSWR(getCategorySvgs);
   const color = useColorModeValue("rgb(0,0,0, .1)", "rgb(255,255,255, .1)");
-
+  const router = useRouter();
   if (error) return <div>failed to load</div>;
   if (!data)
     return <RaceBy size={52} lineWeight={3} speed={1.4} color="#4343E5" />;
@@ -23,6 +24,14 @@ const Categories = () => {
             p={4}
             borderRadius="4px"
             borderWidth="1px"
+            __css={
+              router.asPath === `/category/${category}`
+                ? {
+                    backgroundColor: '#4343e5',
+                    color: '#fff'
+                  }
+                : {}
+            }
             _hover={{
               border:`1px solid ${color}`,
               transform: "scale(0.98)",