mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-15 00:15:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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
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" /> <Separator className="my-6" />
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0"> <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"> <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> </aside>
<div className="flex-1 lg:max-w-2xl"> <div className="flex-1 lg:max-w-2xl">
<SiteProvider site={site}> <SiteProvider site={site}>

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

@ -1,49 +1,53 @@
"use client" "use client"
import React from 'react' import React from 'react'
import Link from "next/link" import Link from "next/link"
import { usePathname } from "next/navigation" import { useParams, usePathname, useRouter } from "next/navigation"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button" import { buttonVariants } from "@/components/ui/button"
interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> { interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
items: { items: {
href: string href: string
title: string title: string
}[] }[]
disabled?: boolean disabled?: boolean
} }
export function SidebarNav({ className, items, disabled = false, ...props }: SidebarNavProps) { 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 ( return (
<nav <nav
className={cn( className={cn(
"flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
disabled && "opacity-50 pointer-events-none", disabled && "opacity-50 pointer-events-none",
className className
)} )}
{...props} {...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}
> >
{item.title} {items.map((item) => (
</Link> <Link
))} key={item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)}
</nav> 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>
)
} }