feat: install clsx and active navbar link now shows lighter background

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@serwist/next": "^9.0.10",
+    "clsx": "^2.1.1",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",

src/ui/layout/Navbar/NavbarLinks.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   HomeIcon,
   PresentationChartLineIcon,

src/ui/layout/Navbar/NavigationLink.tsx

@@ -1,4 +1,8 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import clsx from "clsx";
 
 interface NavbarButtonProps {
   title: string;
@@ -11,8 +15,16 @@ export default function NavigationLink({
   Icon,
   destination,
 }: NavbarButtonProps) {
+  const pathname = usePathname();
+  const isActive = pathname === destination;
+
   return (
-    <Link href={destination} className={`flex flex-col items-center`}>
+    <Link
+      href={destination}
+      className={clsx(`flex flex-col items-center rounded-3xl p-1 py-3`, {
+        "bg-purple-900": isActive,
+      })}
+    >
       <p className="text-white">{title}</p>
       <Icon className="h-6 w-6 text-white" />
     </Link>