refactor: fix React keys and cleanup effect dependencies in sidebar

src/components/layout/sidebar.tsx

@@ -88,7 +88,7 @@ export default function AppSidebar({
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
-              {items.map((item, index) => {
+              {items.map((item) => {
                 if (item.type === "item") {
                   const isActive =
                     item.url === "/"
@@ -96,7 +96,7 @@ export default function AppSidebar({
                       : pathname.startsWith(item.url)
 
                   return (
-                    <SidebarMenuItem key={`item-${index}`}>
+                    <SidebarMenuItem key={`item-${item}`}>
                       <SidebarMenuButton asChild isActive={isActive}>
                         <Link href={item.url}>
                           <item.icon className="mr-2 h-4 w-4" />
@@ -109,7 +109,7 @@ export default function AppSidebar({
                 if (item.type === "section") {
                   return (
                     <SidebarSection
-                      key={`section-${index}`}
+                      key={`section-${item}`}
                       title={item.title}
                       icon={item.icon}
                       items={item.items}

src/components/layout/sidebar/sidebarSection.tsx

@@ -34,7 +34,7 @@ export function SidebarSection({
 
   useEffect(() => {
     setOpen(isAnySubActive)
-  }, [isAnySubActive, pathname])
+  }, [isAnySubActive])
 
   return (
     <Collapsible
@@ -55,7 +55,7 @@ export function SidebarSection({
             {items?.map((subItem, i) => {
               const isActive = pathname.startsWith(subItem.url)
               return (
-                <SidebarMenuSubItem key={i}>
+                <SidebarMenuSubItem key={i++}>
                   <SidebarMenuSubButton asChild isActive={isActive}>
                     <Link href={subItem.url}>{subItem.title}</Link>
                   </SidebarMenuSubButton>