From 973605f54141a07a853c72d6a26c335d0713c8f2 Mon Sep 17 00:00:00 2001
From: Owen Schwartz <owen@txv.io>
Date: Sun, 13 Oct 2024 23:42:09 -0400
Subject: [PATCH] Fix nav

---
 src/app/[orgId]/sites/[siteId]/layout.tsx |  2 +-
 src/components/sidebar-nav.tsx            | 76 ++++++++++++-----------
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/app/[orgId]/sites/[siteId]/layout.tsx b/src/app/[orgId]/sites/[siteId]/layout.tsx
index dae1a54..e161b9a 100644
--- a/src/app/[orgId]/sites/[siteId]/layout.tsx
+++ b/src/app/[orgId]/sites/[siteId]/layout.tsx
@@ -84,7 +84,7 @@ export default async function SettingsLayout({ children, params }: SettingsLayou
                 <Separator className="my-6" />
                 <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
                     <aside className="-mx-4 lg:w-1/5">
-                        <SidebarNav items={sidebarNavItems.map(i => { i.href = i.href.replace("{siteId}", params.siteId).replace("{orgId}", params.orgId); return i})} disabled={params.siteId == "create"} />
+                        <SidebarNav items={sidebarNavItems} disabled={params.siteId == "create"} />
                     </aside>
                     <div className="flex-1 lg:max-w-2xl">
                     <SiteProvider site={site}>
diff --git a/src/components/sidebar-nav.tsx b/src/components/sidebar-nav.tsx
index abfbbe0..bd8d466 100644
--- a/src/components/sidebar-nav.tsx
+++ b/src/components/sidebar-nav.tsx
@@ -1,49 +1,53 @@
 "use client"
 import React from 'react'
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { useParams, usePathname, useRouter } from "next/navigation"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 
 interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
-  items: {
-    href: string
-    title: string
-  }[]
-  disabled?: boolean
+    items: {
+        href: string
+        title: string
+    }[]
+    disabled?: boolean
 }
 
 export function SidebarNav({ className, items, disabled = false, ...props }: SidebarNavProps) {
-  const pathname = usePathname()
+    const pathname = usePathname();
+    const params = useParams();
+    const orgId = params.orgId as string;
+    const siteId = params.siteId as string;
+    const resourceId = params.resourceId as string;
 
-  return (
-    <nav
-      className={cn(
-        "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
-        disabled && "opacity-50 pointer-events-none",
-        className
-      )}
-      {...props}
-    >
-      {items.map((item) => (
-        <Link
-          key={item.href}
-          href={item.href}
-          className={cn(
-            buttonVariants({ variant: "ghost" }),
-            pathname === item.href
-              ? "bg-muted hover:bg-muted"
-              : "hover:bg-transparent hover:underline",
-            "justify-start",
-            disabled && "cursor-not-allowed"
-          )}
-          onClick={disabled ? (e) => e.preventDefault() : undefined}
-          tabIndex={disabled ? -1 : undefined}
-          aria-disabled={disabled}
+    return (
+        <nav
+            className={cn(
+                "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
+                disabled && "opacity-50 pointer-events-none",
+                className
+            )}
+            {...props}
         >
-          {item.title}
-        </Link>
-      ))}
-    </nav>
-  )
+            {items.map((item) => (
+                <Link
+                    key={item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)}
+                    href={item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)}
+                    className={cn(
+                        buttonVariants({ variant: "ghost" }),
+                        pathname === item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)
+                            ? "bg-muted hover:bg-muted"
+                            : "hover:bg-transparent hover:underline",
+                        "justify-start",
+                        disabled && "cursor-not-allowed"
+                    )}
+                    onClick={disabled ? (e) => e.preventDefault() : undefined}
+                    tabIndex={disabled ? -1 : undefined}
+                    aria-disabled={disabled}
+                >
+                    {item.title}
+                </Link>
+            ))}
+        </nav>
+    )
 }
\ No newline at end of file