test new layout

src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx

@@ -1,29 +1,21 @@
 "use client";
 
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { SidebarSettings } from "@app/components/SidebarSettings";
 
-type AccessPageHeaderAndNavProps = {
+interface AccessPageHeaderAndNavProps {
     children: React.ReactNode;
     hasInvitations: boolean;
-};
+}
 
 export default function AccessPageHeaderAndNav({
     children,
     hasInvitations
 }: AccessPageHeaderAndNavProps) {
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "Users",
-            href: `/{orgId}/settings/access/users`,
-            children: hasInvitations
-                ? [
-                      {
-                          title: "Invitations",
-                          href: `/{orgId}/settings/access/invitations`
-                      }
-                  ]
-                : []
+            href: `/{orgId}/settings/access/users`
         },
         {
             title: "Roles",
@@ -31,6 +23,13 @@ export default function AccessPageHeaderAndNav({
         }
     ];
 
+    if (hasInvitations) {
+        navItems.push({
+            title: "Invitations",
+            href: `/{orgId}/settings/access/invitations`
+        });
+    }
+
     return (
         <>
             <SettingsSectionTitle
@@ -38,9 +37,9 @@ export default function AccessPageHeaderAndNav({
                 description="Invite users and add them to roles to manage access to your organization"
             />
 
-            <SidebarSettings sidebarNavItems={sidebarNavItems}>
+            <HorizontalTabs items={navItems}>
                 {children}
-            </SidebarSettings>
+            </HorizontalTabs>
         </>
     );
 }