New admin section.

src/app/(main)/admin/AdminLayout.tsx

@@ -0,0 +1,54 @@
+'use client';
+import { ReactNode } from 'react';
+import { Grid, Column } from '@umami/react-zen';
+import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
+import { SideMenu } from '@/components/common/SideMenu';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Panel } from '@/components/common/Panel';
+import { PageBody } from '@/components/common/PageBody';
+
+export function AdminLayout({ children }: { children: ReactNode }) {
+  const { user } = useLoginQuery();
+  const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
+
+  if (!user.isAdmin) {
+    return null;
+  }
+
+  const items = [
+    {
+      id: 'users',
+      label: formatMessage(labels.users),
+      url: '/admin/users',
+    },
+    {
+      id: 'websites',
+      label: formatMessage(labels.websites),
+      url: '/admin/websites',
+    },
+    {
+      id: 'teams',
+      label: formatMessage(labels.teams),
+      url: '/admin/teams',
+    },
+  ];
+
+  const value = items.find(({ url }) => pathname.includes(url))?.id;
+
+  return (
+    <PageBody>
+      <Column gap="6">
+        <PageHeader title={formatMessage(labels.admin)} />
+        <Grid columns="160px 1fr" gap>
+          <Column>
+            <SideMenu items={items} selectedKey={value} />
+          </Column>
+          <Column>
+            <Panel>{children}</Panel>
+          </Column>
+        </Grid>
+      </Column>
+    </PageBody>
+  );
+}