✨ Basic console layout

src/components/CapAppBar.tsx

@@ -47,7 +47,7 @@ export function CapAppBar() {
       <CapDrawer width={drawerWidth} open={open} onClose={() => setOpen(false)} />
 
       <AppBarScroll elevation={0}>
-        <AppBar position="sticky" elevation={0} color="transparent" className="backdrop-blur-md">
+        <AppBar position="sticky" elevation={0} color="transparent" className="backdrop-blur-md z-10">
           <Toolbar>
             <IconButton
               size="large"

src/components/CapDrawer.tsx

@@ -16,10 +16,11 @@ import Image from 'next/image'
 
 import ExploreIcon from '@mui/icons-material/Explore'
 import PhotoLibraryIcon from '@mui/icons-material/PhotoLibrary'
+import AppsIcon from '@mui/icons-material/Apps'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 
-interface NavLink {
+export interface NavLink {
   title: string
   icon?: JSX.Element
   href: string
@@ -39,6 +40,11 @@ export function CapDrawer({ width, open, onClose }: { width: number; open: boole
       icon: <PhotoLibraryIcon />,
       href: '/attachments',
     },
+    {
+      title: 'Matrix',
+      icon: <AppsIcon />,
+      href: '/matrix',
+    },
   ]
 
   const additionalLinks: NavLink[] = [

src/components/layouts/ConsoleLayout.tsx

@@ -0,0 +1,54 @@
+import { checkAuthenticatedClient, redirectToLogin } from '@/services/auth'
+import { JSX, useEffect } from 'react'
+import { DashboardLayout, Navigation } from '@toolpad/core'
+import { Stack, Typography } from '@mui/material'
+import NextLink from 'next/link'
+
+import AppsIcon from '@mui/icons-material/Apps'
+
+export function ConsoleLayout({ children }: { children: JSX.Element }) {
+  useEffect(() => {
+    if (!checkAuthenticatedClient()) redirectToLogin()
+  }, [])
+
+  const navigation: Navigation = [
+    {
+      segment: 'console/matrix',
+      title: 'Matrix',
+      icon: <AppsIcon />,
+    },
+  ]
+
+  return (
+    <DashboardLayout
+      navigation={navigation}
+      branding={{
+        homeUrl: '/console',
+      }}
+      slots={{
+        appTitle(_) {
+          return (
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <NextLink passHref href="/console">
+                <Typography variant="h6">Solar Network Console</Typography>
+              </NextLink>
+            </Stack>
+          )
+        },
+      }}
+      sidebarExpandedWidth={300}
+      defaultSidebarCollapsed
+    >
+      {children}
+    </DashboardLayout>
+  )
+}
+
+export function getConsoleStaticProps(original: any) {
+  if (original.props.title) {
+    original.props.title = 'Console | ' + original.props.title
+  }
+  original.props.showAppBar = false
+
+  return original
+}