0ct0pu5/pangolin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix nav

Browse source
This commit is contained in:
Owen Schwartz 2024-10-13 23:42:09 -04:00
parent 95cdc3ca0f
commit 973605f541
No known key found for this signature in database
GPG key ID: 8271FDFFD9E0CCBD
2 changed files with 41 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/[orgId]/sites/[siteId]/layout.tsx
View file

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

76
src/components/sidebar-nav.tsx
View file

@ -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>
)
}