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

list roles, make sidebar component, responsive mobile settings menu selector

Browse source
This commit is contained in:
Milo Schwartz 2024-11-09 00:08:17 -05:00
parent 9c2e481d2b
commit bb17d30c9e
No known key found for this signature in database
25 changed files with 733 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,53 +1,122 @@
"use client"
import React from 'react'
import Link from "next/link"
import { useParams, usePathname, useRouter } from "next/navigation"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
"use client";
import React from "react";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
items: {
href: string
title: string
}[]
disabled?: boolean
href: string;
title: string;
}[];
disabled?: boolean;
}
export function SidebarNav({ className, items, disabled = false, ...props }: SidebarNavProps) {
export function SidebarNav({
className,
items,
disabled = false,
...props
}: SidebarNavProps) {
const pathname = usePathname();
const params = useParams();
const orgId = params.orgId as string;
const niceId = params.niceId as string;
const resourceId = params.resourceId as string;
const router = useRouter();
const handleSelectChange = (value: string) => {
if (!disabled) {
router.push(value);
}
};
function getSelectedValue() {
const item = items.find((item) => hydrateHref(item.href) === pathname);
return hydrateHref(item?.href || "");
}
function hydrateHref(val: string): string {
return val
.replace("{orgId}", orgId)
.replace("{niceId}", niceId)
.replace("{resourceId}", resourceId);
}
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.replace("{orgId}", orgId).replace("{niceId}", niceId).replace("{resourceId}", resourceId)}
href={item.href.replace("{orgId}", orgId).replace("{niceId}", niceId).replace("{resourceId}", resourceId)}
className={cn(
buttonVariants({ variant: "ghost" }),
pathname === item.href.replace("{orgId}", orgId).replace("{niceId}", niceId).replace("{resourceId}", resourceId) && !pathname.includes("create")
? "bg-muted hover:bg-muted dark:bg-border dark:hover:bg-border"
: "hover:bg-transparent hover:underline",
"justify-start",
disabled && "cursor-not-allowed"
)}
onClick={disabled ? (e) => e.preventDefault() : undefined}
tabIndex={disabled ? -1 : undefined}
aria-disabled={disabled}
<div>
<div className="block lg:hidden px-4">
<Select
onValueChange={handleSelectChange}
disabled={disabled}
defaultValue={getSelectedValue()}
>
{item.title}
</Link>
))}
</nav>
)
<SelectTrigger>
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
{items.map((item) => (
<SelectItem
key={hydrateHref(item.href)}
value={hydrateHref(item.href)}
>
{item.title}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<nav
className={cn(
"hidden lg: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
.replace("{orgId}", orgId)
.replace("{niceId}", niceId)
.replace("{resourceId}", resourceId)}
href={item.href
.replace("{orgId}", orgId)
.replace("{niceId}", niceId)
.replace("{resourceId}", resourceId)}
className={cn(
buttonVariants({ variant: "ghost" }),
pathname ===
item.href
.replace("{orgId}", orgId)
.replace("{niceId}", niceId)
.replace("{resourceId}", resourceId) &&
!pathname.includes("create")
? "bg-muted hover:bg-muted dark:bg-border dark:hover:bg-border"
: "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>
</div>
);
}