From 7e69e9a42a621680a24349da68e6871ac9d11eb2 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 23 Nov 2023 10:31:19 +0200
Subject: [PATCH] active nav item style

---
 packages/app/src/Pages/Layout/NavSidebar.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index 169e3759..53eb2531 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -1,5 +1,5 @@
 import { LogoHeader } from "./LogoHeader";
-import { Link, useNavigate } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import Icon from "@/Icons/Icon";
 import { ProfileLink } from "../../Element/User/ProfileLink";
 import Avatar from "../../Element/User/Avatar";
@@ -42,6 +42,12 @@ const MENU_ITEMS = [
   },
 ];
 
+const getNavLinkClass = (isActive: boolean) => {
+  return isActive ?
+    "xl:ml-1 py-4 hover:no-underline flex flex-row items-center text-nostr-purple" :
+    "xl:ml-1 py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center";
+};
+
 export default function NavSidebar() {
   const { publicKey } = useLogin(s => ({
     publicKey: s.publicKey,
@@ -65,8 +71,7 @@ export default function NavSidebar() {
               <NavLink
                 key={item.link}
                 to={item.link}
-                className="xl:ml-1 py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center"
-                activeClassName="bg-neutral-800 text-neutral-200">
+                className={({ isActive }) => getNavLinkClass(isActive)}>
                 <Icon name={item.icon} size={24} />
                 <span className="hidden xl:inline ml-3">{item.label}</span>
               </NavLink>
@@ -103,11 +108,3 @@ export default function NavSidebar() {
     </div>
   );
 }
-
-function NavLink({ children, ...props }) {
-  return (
-    <Link to={""} {...props}>
-      {children}
-    </Link>
-  );
-}