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

src/app/[orgId]/settings/sites/[niceId]/components/ClientLayout.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { SidebarNav } from "@app/components/sidebar-nav";
-import { useSiteContext } from "@app/hooks/useSiteContext";
-
-const sidebarNavItems = [
-    {
-        title: "General",
-        href: "/{orgId}/settings/sites/{niceId}",
-    },
-];
-
-export function ClientLayout({ isCreate, children }: { isCreate: boolean; children: React.ReactNode }) {
-    const { site } = useSiteContext();
-    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 Site"
-                    : site?.name + " Settings"}
-            </h2>
-            <p className="text-muted-foreground">
-                {isCreate
-                    ? "Create a new site"
-                    : "Configure the settings on your site: " +
-                    site?.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/sites/[niceId]/layout.tsx

@@ -4,8 +4,7 @@ import { GetSiteResponse } from "@server/routers/site";
 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 SettingsLayoutProps {
     children: React.ReactNode;
@@ -31,20 +30,37 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
         }
     }
 
+    const sidebarNavItems = [
+        {
+            title: "General",
+            href: "/{orgId}/settings/sites/{niceId}",
+        },
+    ];
+
+    const isCreate = params.niceId === "create";
+
     return (
         <>
-            <div className="mb-4">
-                <Link
-                    href={`/${params.orgId}/settings/sites`}
-                    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 Site" : site?.name + " Settings"}
+                </h2>
+                <p className="text-muted-foreground">
+                    {isCreate
+                        ? "Create a new site"
+                        : "Configure the settings on your site: " +
+                              site?.name || ""}
+                    .
+                </p>
             </div>
 
-            <SiteProvider site={site}>
-                <ClientLayout isCreate={params.niceId === "create"}>
-                    {children}
-                </ClientLayout>
-            </SiteProvider>
+            <SidebarSettings
+                sidebarNavItems={sidebarNavItems}
+                disabled={isCreate}
+                limitWidth={true}
+            >
+                {children}
+            </SidebarSettings>
         </>
     );
 }