Add active routes

src/components/icons/index.ts

@@ -1,6 +1 @@
-export * from "./account";
-export * from "./agenda";
-export * from "./help";
-export * from "./scan";
-export * from "./wallet";
 export * from "./redacted";

src/components/ui/footer.tsx

@@ -1,10 +1,16 @@
-import { Flex, Button, Container } from "@chakra-ui/react";
-import { Account, Wallet, Help, Agenda, Scan } from "../icons";
+import { Flex, Button, Container, Image } from "@chakra-ui/react";
+import { useLocation } from "react-router-dom";
+
+import Help from "../../assets/icon-help.svg";
+import Agenda from "../../assets/icon-agenda.svg";
+import Scan from "../../assets/icon-scan.svg";
+import Wallet from "../../assets/icon-wallet.svg";
+import Account from "../../assets/icon-account.svg";
 
 type Route = {
   name: string;
   href: string;
-  icon: React.FC;
+  icon: string;
 };
 
 const routes: Route[] = [
@@ -16,13 +22,28 @@ const routes: Route[] = [
 ];
 
 export function Footer() {
+  const { pathname } = useLocation();
   return (
     <Container maxW={"container.sm"} p={0}>
       <footer>
         <Flex justifyContent="space-between" alignItems="center" as="nav">
           {routes.map((route, index) => (
-            <Button as="a" key={index} href={route.href} variant="navigation">
-              <route.icon />
+            <Button
+              as="a"
+              key={index}
+              href={route.href}
+              variant="navigation"
+              backgroundColor={pathname === route.href ? "black" : ""}
+              color={pathname === route.href ? "brand.400" : "black"}
+            >
+              <Image
+                src={route.icon}
+                filter={
+                  pathname === route.href
+                    ? "brightness(0) saturate(100%) invert(70%) sepia(28%) saturate(2698%) hue-rotate(106deg) brightness(99%) contrast(101%);"
+                    : ""
+                }
+              />
               <span>{route.name}</span>
             </Button>
           ))}