implement basic Default layout

src/components/layouts/SidebarApp.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Drawer, List, ListItem, ListItemText } from '@mui/material';
+import { DRAWER_WIDTH } from '@/libs/constants';
+
+function SidebarApp() {
+    return (
+        <div>
+            <Drawer
+                variant='permanent'
+                sx={{
+                    width: DRAWER_WIDTH,
+                    flexShrink: 0,
+                    [`& .MuiDrawer-paper`]: { width: DRAWER_WIDTH, boxSizing: 'border-box' },
+                }}
+            >
+                <List>
+                    <ListItem button>
+                        <ListItemText primary="Item 1" />
+                    </ListItem>
+                    <ListItem button>
+                        <ListItemText primary="Item 2" />
+                    </ListItem>
+                </List>
+            </Drawer>
+        </div>
+    );
+}
+
+export default SidebarApp;

src/layouts/DefaultLayout.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { Outlet } from "react-router-dom";
+import SidebarApp from "@/components/layouts/SidebarApp";
+
+function DefaultLayout() {
+    return (
+        <Box sx={{ display: "flex", height: "100vh" }}>
+            <SidebarApp />
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    overflowX: 'hidden',
+                }}
+            >
+                <Box
+                    component="main"
+                    sx={{
+                        flexGrow: 1,
+                        px: 3,
+                        py: 2,
+                        backgroundColor: theme => theme.palette.grey[50],
+                    }}
+                >
+                    <Outlet />
+                </Box>
+            </Box>
+        </Box>
+    );
+}
+
+export default DefaultLayout;

src/libs/constants.ts

@@ -0,0 +1 @@
+export const DRAWER_WIDTH = 280;

src/router/index.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import Dashboard from '@/pages/Dashboard';
+import DefaultLayout from '@/layouts/DefaultLayout';
 
 export const router = createBrowserRouter([
   {
     path: '/',
-    element: <Dashboard />,
+    element: <DefaultLayout />,
+    children: [
+      {
+        path: '/',
+        element: <Dashboard />,
+        index: true,
+      },
+    ],
   },
   {
     path: '*',