feat: added sidebar (#1)

src/app/App.tsx

@@ -7,9 +7,9 @@ function App (): JSX.Element {
   return (
     <div>
       <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/dashboard" element={<DashboardPage />} />
-        <Route path="/blog" element={<BlogPage />} />
+        <Route path='/' element={<HomePage />} />
+        <Route path='/dashboard' element={<DashboardPage />} />
+        <Route path='/blog' element={<BlogPage />} />
       </Routes>
     </div>
   )

src/components/Sidebar.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react'
+import { Link as ReactRouterLink } from 'react-router-dom'
+import { Box, Flex, HStack, VStack, Button, Image, Text, Link as ChakraLink } from '@chakra-ui/react'
+import { motion } from 'framer-motion'
+import HomeIcon from './icons/HomeIcon'
+import DashboardIcon from './icons/Dashboard'
+import BlogIcon from './icons/BlogIcon'
+import CollapseIcon from './icons/CollapseIcon'
+import ExpandIcon from './icons/ExpandIcon'
+import Logo from '../assets/images/logo_negative.png'
+
+function Sidebar (): JSX.Element {
+  const [hidden, setHidden] = useState(false)
+
+  return (
+    <Flex width="fit-content" height="100%" position="relative">
+      <motion.nav
+        initial={hidden}
+        animate={{ width: hidden ? 0 : '300px' }}
+        transition={{ ease: 'easeOut', duration: 0.3 }}
+      >
+        <Flex height="100%" backgroundColor="blue.500" direction="column" justifyContent="space-between" color="white" overflow="hidden">
+          <Box>
+            <HStack padding="16px" columnGap="20px">
+              <Image src={Logo} alt="Blueprint Logo" boxSize="80px" minWidth="80px"></Image>
+              <Text fontSize="4xl" height="45px">Blueprint</Text>
+            </HStack>
+            <VStack paddingX="8px" spacing="15px" align="left">
+              <ChakraLink as={ReactRouterLink} to='/' _hover={{ textDecoration: 'none' }}>
+                <Button leftIcon={<HomeIcon />} colorScheme="whiteAlpha" width="100%" padding="8px" justifyContent="start" backgroundColor="transparent" variant="solid" display="flex">
+                  <Text alignSelf="flex-end">Home</Text>
+                </Button>
+              </ChakraLink>
+              <ChakraLink as={ReactRouterLink} to='/dashboard' _hover={{ textDecoration: 'none' }}>
+                <Button leftIcon={<DashboardIcon />} colorScheme="whiteAlpha" width="100%" padding="8px" justifyContent="start" backgroundColor="transparent" variant="solid" display="flex">
+                  <Text alignSelf="flex-end">Dashboard</Text>
+                </Button>
+              </ChakraLink>
+              <ChakraLink as={ReactRouterLink} to='/blog' _hover={{ textDecoration: 'none' }}>
+                <Button leftIcon={<BlogIcon />} colorScheme="whiteAlpha" width="100%" padding="8px" justifyContent="start" backgroundColor="transparent" variant="solid" display="flex">
+                  <Text alignSelf="flex-end">Blog</Text>
+                </Button>
+              </ChakraLink>
+            </VStack>
+          </Box>
+          <Box>
+            <Box paddingX="8px">
+              <Button onClick={() => { setHidden(!hidden) }} leftIcon={<CollapseIcon />} width="100%" colorScheme="whiteAlpha" padding="8px" justifyContent="start" backgroundColor="transparent" variant="solid" display="flex">
+                <Text alignSelf="flex-end">Collapse</Text>
+              </Button>
+            </Box>
+            <HStack padding="16px">
+              <Image src='' alt="User Image" boxSize="50px" minWidth="50px" borderRadius="full"></Image>
+              <Flex direction="column" overflow="hidden">
+                <Text fontSize="md" noOfLines={1}>Username</Text>
+                <Text fontSize="md" noOfLines={1}>[email protected]</Text>
+              </Flex>
+            </HStack>
+          </Box>
+        </Flex>
+      </motion.nav>
+      <Button onClick={() => { setHidden(!hidden) }} leftIcon={<ExpandIcon />} colorScheme="none" backgroundColor="transparent" color="black" position="absolute" right="-50px"></Button>
+    </Flex>
+  )
+}
+
+export default Sidebar

src/components/icons/BlogIcon.tsx

@@ -0,0 +1,11 @@
+import { Icon } from '@chakra-ui/react'
+
+function BlogIcon (): JSX.Element {
+  return (
+    <Icon fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+    </Icon>
+  )
+};
+
+export default BlogIcon

src/components/icons/CollapseIcon.tsx

@@ -0,0 +1,11 @@
+import { Icon } from '@chakra-ui/react'
+
+function CollapseIcon (): JSX.Element {
+  return (
+    <Icon fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
+    </Icon>
+  )
+};
+
+export default CollapseIcon

src/components/icons/Dashboard.tsx

@@ -0,0 +1,11 @@
+import { Icon } from '@chakra-ui/react'
+
+function DashboardIcon (): JSX.Element {
+  return (
+    <Icon fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5ZM14 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V5ZM4 16a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3ZM14 13a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-6Z"/>
+    </Icon>
+  )
+};
+
+export default DashboardIcon

src/components/icons/ExpandIcon.tsx

@@ -0,0 +1,11 @@
+import { Icon } from '@chakra-ui/react'
+
+function ExpandIcon (): JSX.Element {
+  return (
+    <Icon fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
+    </Icon>
+  )
+};
+
+export default ExpandIcon

src/components/icons/HomeIcon.tsx

@@ -0,0 +1,11 @@
+import { Icon } from '@chakra-ui/react'
+
+function HomeIcon (): JSX.Element {
+  return (
+    <Icon fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    </Icon>
+  )
+};
+
+export default HomeIcon

src/pages/HomePage.tsx

@@ -1,13 +1,15 @@
-import { Container } from '@chakra-ui/react'
+import { Container, HStack } from '@chakra-ui/react'
 import TableDashboard from '../components/TableDashboard'
+import Sidebar from '../components/Sidebar'
 
 function HomePage (): JSX.Element {
   return (
-        <div>
-            <Container>
-                <TableDashboard />
-            </Container>
-        </div>
+    <HStack height="100vh" spacing="0">
+      <Sidebar />
+      <Container>
+        <TableDashboard />
+      </Container>
+    </HStack>
   )
 }