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

src/components/SidebarSettings.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { SidebarNav } from "@app/components/sidebar-nav";
+
+interface SideBarSettingsProps {
+    children: React.ReactNode;
+    sidebarNavItems: Array<{ title: string; href: string }>;
+    disabled?: boolean;
+    limitWidth?: boolean;
+}
+
+export function SidebarSettings({
+    children,
+    sidebarNavItems,
+    disabled,
+    limitWidth,
+}: SideBarSettingsProps) {
+    return (
+        <div className="space-y-6 0 pb-16k">
+            <div className="flex flex-col space-y-6 lg:flex-row lg:space-x-12 lg:space-y-0">
+                <aside className="-mx-4 lg:w-1/5">
+                    <SidebarNav items={sidebarNavItems} disabled={disabled} />
+                </aside>
+                <div className={`flex-1 ${limitWidth ? "lg:max-w-2xl" : ""}`}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/sidebar-nav.tsx

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

src/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }