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

src/app/[orgId]/settings/resources/[resourceId]/components/ClientLayout.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import { SidebarNav } from "@app/components/sidebar-nav";
-import { useResourceContext } from "@app/hooks/useResourceContext";
-
-const sidebarNavItems = [
-    {
-        title: "General",
-        href: "/{orgId}/settings/resources/{resourceId}",
-    },
-    {
-        title: "Targets",
-        href: "/{orgId}/settings/resources/{resourceId}/targets",
-    },
-];
-
-export function ClientLayout({
-    isCreate,
-    children,
-}: {
-    isCreate: boolean;
-    children: React.ReactNode;
-}) {
-    const { resource } = useResourceContext();
-    return (
-        <div className="hidden space-y-6 0 pb-16 md:block">
-            <div className="space-y-0.5">
-                <h2 className="text-2xl font-bold tracking-tight">
-                    {isCreate ? "New Resource" : resource?.name + " Settings"}
-                </h2>
-                <p className="text-muted-foreground">
-                    {isCreate
-                        ? "Create a new resource"
-                        : "Configure the settings on your resource: " +
-                              resource?.name || ""}
-                    .
-                </p>
-            </div>
-            <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={isCreate} />
-                </aside>
-                <div className="flex-1 lg:max-w-2xl">{children}</div>
-            </div>
-        </div>
-    );
-}

src/app/[orgId]/settings/resources/[resourceId]/layout.tsx

@@ -1,12 +1,10 @@
-import Image from "next/image";
 import ResourceProvider from "@app/providers/ResourceProvider";
 import { internal } from "@app/api";
 import { GetResourceResponse } from "@server/routers/resource";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/api/cookies";
-import Link from "next/link";
-import { ClientLayout } from "./components/ClientLayout";
+import { SidebarSettings } from "@app/components/SidebarSettings";
 
 interface ResourceLayoutProps {
     children: React.ReactNode;
@@ -32,19 +30,42 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
         }
     }
 
+    const sidebarNavItems = [
+        {
+            title: "General",
+            href: `/{orgId}/settings/resources/resourceId`,
+        },
+        {
+            title: "Targets",
+            href: `/{orgId}/settings/resources/{resourceId}/targets`,
+        },
+    ];
+
+    const isCreate = params.resourceId === "create";
+
     return (
         <>
-            <div className="mb-4">
-                <Link
-                    href={`/${params.orgId}/settings/resources`}
-                    className="text-primary font-medium"
-                ></Link>
+            <div className="space-y-0.5 select-none mb-6">
+                <h2 className="text-2xl font-bold tracking-tight">
+                    {isCreate ? "New Resource" : resource?.name + " Settings"}
+                </h2>
+                <p className="text-muted-foreground">
+                    {isCreate
+                        ? "Create a new resource"
+                        : "Configure the settings on your resource: " +
+                              resource?.name || ""}
+                    .
+                </p>
             </div>
 
             <ResourceProvider resource={resource}>
-                <ClientLayout isCreate={params.resourceId === "create"}>
+                <SidebarSettings
+                    sidebarNavItems={sidebarNavItems}
+                    disabled={isCreate}
+                    limitWidth={true}
+                >
                     {children}
-                </ClientLayout>
+                </SidebarSettings>
             </ResourceProvider>
         </>
     );