✨ Matrix console create product

src/components/CapDrawer.tsx

@@ -52,6 +52,10 @@ export function CapDrawer({ width, open, onClose }: { width: number; open: boole
       title: 'Terms & Conditions',
       href: '/terms',
     },
+    {
+      title: 'SN Console',
+      href: '/console',
+    },
   ]
 
   return (
@@ -93,7 +97,7 @@ export function CapDrawer({ width, open, onClose }: { width: number; open: boole
           ))}
         </List>
         <Divider />
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', px: 2, py: 1.5 }}>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', px: 2, py: 1.5, gap: 1 }}>
           {additionalLinks.map((l) => (
             <NextLink passHref href={l.href} key={l.href}>
               <Link variant="body2" color={'textSecondary'} fontSize={13}>

src/components/layouts/ConsoleLayout.tsx

@@ -1,9 +1,10 @@
 import { checkAuthenticatedClient, redirectToLogin } from '@/services/auth'
 import { JSX, useEffect } from 'react'
 import { DashboardLayout, Navigation } from '@toolpad/core'
-import { Stack, Typography } from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
 import NextLink from 'next/link'
 
+import HomeIcon from '@mui/icons-material/Home'
 import AppsIcon from '@mui/icons-material/Apps'
 
 export function ConsoleLayout({ children }: { children: JSX.Element }) {
@@ -12,6 +13,11 @@ export function ConsoleLayout({ children }: { children: JSX.Element }) {
   }, [])
 
   const navigation: Navigation = [
+    {
+      segment: '',
+      title: 'Home',
+      icon: <HomeIcon />,
+    },
     {
       segment: 'console/matrix',
       title: 'Matrix',
@@ -35,6 +41,9 @@ export function ConsoleLayout({ children }: { children: JSX.Element }) {
             </Stack>
           )
         },
+        toolbarActions(_) {
+          return <Box />
+        },
       }}
       sidebarExpandedWidth={300}
       defaultSidebarCollapsed