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

@@ -95,7 +95,7 @@ export const sectionItems: SidebarItem[] = [
     title: "Dashboards",
     items: [
       {
-        key: "home",
+        key: "overview",
         href: "/",
         icon: "solar:home-2-linear",
         title: "Overview",

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} />