feat(MED-97): fix /home/[account] and /admin* routes layout consistencies

app/admin/_components/admin-menu-navigation.tsx

@@ -0,0 +1,27 @@
+import { AppLogo } from '@kit/shared/components/app-logo';
+import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
+import { SIDEBAR_WIDTH_PROPERTY } from '@/packages/ui/src/shadcn/constants';
+
+import type { UserWorkspace } from '../../home/(user)/_lib/server/load-user-workspace';
+
+export function AdminMenuNavigation(props: {
+  workspace: UserWorkspace;
+}) {
+  const { accounts } = props.workspace;
+
+  return (
+    <div className={'flex w-full flex-1 items-center justify-between gap-3'}>
+      <div className={`flex items-center ${SIDEBAR_WIDTH_PROPERTY}`}>
+        <AppLogo href={'/admin'} />
+      </div>
+
+      <div className="flex items-center justify-end gap-3">
+        <div>
+          <ProfileAccountDropdownContainer
+            accounts={accounts}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/_components/admin-sidebar.tsx

@@ -1,72 +1,25 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-
-import { UserWorkspace } from '@/app/home/(user)/_lib/server/load-user-workspace';
-import { LayoutDashboard, Users } from 'lucide-react';
-
-import { AppLogo } from '@kit/shared/components/app-logo';
-import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
+import { adminNavigationConfig } from '@kit/shared/config';
 import {
   Sidebar,
   SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  useSidebar,
+  SidebarNavigation,
 } from '@kit/ui/shadcn-sidebar';
 
-export function AdminSidebar({
-  accounts,
-}: {
-  accounts: UserWorkspace['accounts'];
-}) {
-  const path = usePathname();
-  const { open } = useSidebar();
+export function AdminSidebar() {
+  const collapsible = adminNavigationConfig.sidebarCollapsedStyle;
+
   return (
-    <Sidebar collapsible="icon">
-      <SidebarHeader className={'m-2'}>
-        <AppLogo href={'/admin'} className="max-w-full" compact={!open} />
+    <Sidebar collapsible={collapsible}>
+      <SidebarHeader className="h-24 justify-center">
+        <div className="mt-24 flex items-center">
+          <h5>Superadmin</h5>
+        </div>
       </SidebarHeader>
 
       <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Super Admin</SidebarGroupLabel>
-
-          <SidebarGroupContent>
-            <SidebarMenu>
-              <SidebarMenuButton isActive={path === '/admin'} asChild>
-                <Link className={'flex gap-2.5'} href={'/admin'}>
-                  <LayoutDashboard className={'h-4'} />
-                  <span>Dashboard</span>
-                </Link>
-              </SidebarMenuButton>
-
-              <SidebarMenuButton
-                isActive={path.includes('/admin/accounts')}
-                asChild
-              >
-                <Link
-                  className={'flex size-full gap-2.5'}
-                  href={'/admin/accounts'}
-                >
-                  <Users className={'h-4'} />
-                  <span>Accounts</span>
-                </Link>
-              </SidebarMenuButton>
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
+        <SidebarNavigation config={adminNavigationConfig} />
       </SidebarContent>
-
-      <SidebarFooter>
-        <ProfileAccountDropdownContainer accounts={accounts} />
-      </SidebarFooter>
     </Sidebar>
   );
 }

app/admin/layout.tsx

@@ -6,6 +6,7 @@ import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
 import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
 import { AdminSidebar } from '~/admin/_components/admin-sidebar';
+import { AdminMenuNavigation } from '~/admin/_components/admin-menu-navigation';
 import { AdminMobileNavigation } from '~/admin/_components/mobile-navigation';
 
 import { loadUserWorkspace } from '../home/(user)/_lib/server/load-user-workspace';
@@ -21,19 +22,24 @@ export default function AdminLayout(props: React.PropsWithChildren) {
   const workspace = use(loadUserWorkspace());
 
   return (
-    <SidebarProvider defaultOpen={state.open}>
-      <Page style={'sidebar'}>
-        <PageNavigation>
-          <AdminSidebar accounts={workspace.accounts} />
-        </PageNavigation>
+    <Page style={'header'}>
+      <PageNavigation>
+        <AdminMenuNavigation workspace={workspace} />
+      </PageNavigation>
 
-        <PageMobileNavigation>
-          <AdminMobileNavigation />
-        </PageMobileNavigation>
+      <PageMobileNavigation>
+        <AdminMobileNavigation />
+      </PageMobileNavigation>
 
-        {props.children}
-      </Page>
-    </SidebarProvider>
+      <SidebarProvider defaultOpen={state.open}>
+        <Page style={'sidebar'}>
+          <PageNavigation>
+            <AdminSidebar />
+          </PageNavigation>
+          {props.children}
+        </Page>
+      </SidebarProvider>
+    </Page>
   );
 }
 

app/admin/page.tsx

@@ -5,7 +5,7 @@ import { PageBody, PageHeader } from '@kit/ui/page';
 function AdminPage() {
   return (
     <>
-      <PageHeader description={`Super Admin`} />
+      <PageHeader title={`Super Admin`} />
 
       <PageBody>
         <AdminDashboard />