fix(dashboard): layout

dashboard/src/layouts/AuthLayout.tsx

@@ -4,23 +4,28 @@ import { LOGO_URL } from '../constants';
 
 export function AuthLayout({ children }: { children: React.ReactNode }) {
 	return (
-		<Flex flexWrap="wrap" h="100%">
-			<Center h="100%" flex="2" bg="blue.500" flexDirection="column">
-				<Image src={LOGO_URL} alt="" />
-
-				<Text
-					color="white"
-					casing="uppercase"
-					fontSize="3xl"
-					mt="2"
-					letterSpacing="2.25px"
-				>
-					Authorizer
+		<Flex
+			flexWrap="wrap"
+			h="100%"
+			bg="gray.100"
+			alignItems="center"
+			justifyContent="center"
+			flexDirection="column"
+		>
+			<Flex alignItems="center">
+				<Image
+					src="https://authorizer.dev/images/logo.png"
+					alt="logo"
+					height="50"
+				/>
+				<Text fontSize="x-large" ml="3" letterSpacing="3">
+					AUTHORIZER
 				</Text>
-			</Center>
-			<Center h="100%" flex="2">
+			</Flex>
+
+			<Box p="6" m="5" rounded="5" bg="white" w="500px" shadow="xl">
 				{children}
-			</Center>
+			</Box>
 		</Flex>
 	);
 }

dashboard/src/layouts/DashboardLayout.tsx

@@ -1,16 +1,39 @@
-import { Box, Flex } from '@chakra-ui/react';
-import React from 'react';
-import { Sidebar } from '../components/Sidebar';
+import {
+	Box,
+	Drawer,
+	DrawerContent,
+	useDisclosure,
+	useColorModeValue,
+} from '@chakra-ui/react';
+import React, { ReactNode } from 'react';
+import { Sidebar, MobileNav } from '../components/Menu';
 
-export function DashboardLayout({ children }: { children: React.ReactNode }) {
+export function DashboardLayout({ children }: { children: ReactNode }) {
+	const { isOpen, onOpen, onClose } = useDisclosure();
 	return (
-		<Flex flexWrap="wrap" h="100%">
-			<Box w="72" bg="blue.500" flex="1" position="fixed" h="100vh">
-				<Sidebar />
-			</Box>
-			<Box as="main" flex="2" p="10" marginLeft="72">
+		<Box minH="100vh" bg={useColorModeValue('gray.100', 'gray.900')}>
+			<Sidebar
+				onClose={() => onClose}
+				display={{ base: 'none', md: 'block' }}
+			/>
+			<Drawer
+				autoFocus={false}
+				isOpen={isOpen}
+				placement="left"
+				onClose={onClose}
+				returnFocusOnClose={false}
+				onOverlayClick={onClose}
+				size="full"
+			>
+				<DrawerContent>
+					<Sidebar onClose={onClose} />
+				</DrawerContent>
+			</Drawer>
+			{/* mobilenav */}
+			<MobileNav onOpen={onOpen} />
+			<Box ml={{ base: 0, md: 60 }} p="4" pt="24">
 				{children}
 			</Box>
-		</Flex>
+		</Box>
 	);
 }