From 9ae201bddf432aa588c98a38cac59067a18e6080 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Mon, 15 Jul 2024 20:42:54 +0200
Subject: [PATCH] Make the link active when visiting the page (#9)

* chore: set overview as a default selected key in the sidebar

* feat: use the usePathname hook from Next.js App Router to get the current pathname and use it as the active key for the Sidebar component.

* feat: make it works also for / the overview page
---
 components/ui/sidebar/SidebarItems.tsx | 2 +-
 components/ui/sidebar/SidebarWrap.tsx  | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/ui/sidebar/SidebarItems.tsx b/components/ui/sidebar/SidebarItems.tsx
index 9d81de6740..e6423fff62 100644
--- a/components/ui/sidebar/SidebarItems.tsx
+++ b/components/ui/sidebar/SidebarItems.tsx
@@ -95,7 +95,7 @@ export const sectionItems: SidebarItem[] = [
     title: "Dashboards",
     items: [
       {
-        key: "home",
+        key: "overview",
         href: "/",
         icon: "solar:home-2-linear",
         title: "Overview",
diff --git a/components/ui/sidebar/SidebarWrap.tsx b/components/ui/sidebar/SidebarWrap.tsx
index 7f9b0e62e2..f2212850bb 100644
--- a/components/ui/sidebar/SidebarWrap.tsx
+++ b/components/ui/sidebar/SidebarWrap.tsx
@@ -3,6 +3,7 @@
 import { Icon } from "@iconify/react";
 import { Button, ScrollShadow, Spacer, Tooltip } from "@nextui-org/react";
 import clsx from "clsx";
+import { usePathname } from "next/navigation";
 import React, { useCallback, useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
@@ -19,6 +20,9 @@ export const SidebarWrap = () => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
 
+  const pathname = usePathname();
+  const currentPath = pathname === "/" ? "overview" : pathname.split("/")?.[1];
+
   const isMobile = useMediaQuery("(max-width: 768px)");
 
   const isCompact = isCollapsed || isMobile;
@@ -74,16 +78,17 @@ export const SidebarWrap = () => {
       <Spacer y={8} />
 
       <UserAvatar
-        userName={"Pablo Lara"}
+        userName={"User name"}
         position={"Software Engineer"}
         isCompact={isCompact}
       />
 
       <ScrollShadow className="-mr-6 h-full max-h-full py-6 pr-6">
         <Sidebar
-          defaultSelectedKey="home"
+          defaultSelectedKey="overview"
           isCompact={isCompact}
           items={sectionItemsWithTeams}
+          selectedKeys={[currentPath]}
         />
       </ScrollShadow>
       <Spacer y={2} />