test new layout

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

@@ -1,5 +1,4 @@
 import { Metadata } from "next";
-import { TopbarNav } from "@app/components/TopbarNav";
 import {
     Cog,
     Combine,
@@ -8,7 +7,6 @@ import {
     Users,
     Waypoints
 } from "lucide-react";
-import { Header } from "@app/components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
 import { internal } from "@app/lib/api";
@@ -18,14 +16,7 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { cache } from "react";
 import { GetOrgUserResponse } from "@server/routers/user";
 import UserProvider from "@app/providers/UserProvider";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator
-} from "@app/components/ui/breadcrumb";
-import Link from "next/link";
+import { Layout } from "@app/components/Layout";
 
 export const dynamic = "force-dynamic";
 
@@ -34,7 +25,7 @@ export const metadata: Metadata = {
     description: ""
 };
 
-const topNavItems = [
+const navItems = [
     {
         title: "Sites",
         href: "/{orgId}/settings/sites",
@@ -46,9 +37,19 @@ const topNavItems = [
         icon: <Waypoints className="h-4 w-4" />
     },
     {
-        title: "Users & Roles",
+        title: "Access Control",
         href: "/{orgId}/settings/access",
-        icon: <Users className="h-4 w-4" />
+        icon: <Users className="h-4 w-4" />,
+        children: [
+            {
+                title: "Users",
+                href: "/{orgId}/settings/access/users"
+            },
+            {
+                title: "Roles",
+                href: "/{orgId}/settings/access/roles"
+            }
+        ]
     },
     {
         title: "Shareable Links",
@@ -109,21 +110,10 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     } catch (e) {}
 
     return (
-        <>
-            <div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b">
-                <div className="container mx-auto flex flex-col content-between">
-                    <div className="my-4 px-3 md:px-0">
-                        <UserProvider user={user}>
-                            <Header orgId={params.orgId} orgs={orgs} />
-                        </UserProvider>
-                    </div>
-                    <TopbarNav items={topNavItems} orgId={params.orgId} />
-                </div>
-            </div>
-
-            <div className="container mx-auto sm:px-0 px-3 pt-[155px]">
+        <UserProvider user={user}>
+            <Layout orgId={params.orgId} orgs={orgs} navItems={navItems}>
                 {children}
-            </div>
-        </>
+            </Layout>
+        </UserProvider>
     );
 }