Merge pull request #5 from uajanth/feature/navbar

Feature/navbar
chingu-voyages · Aug 19, 2022 · 76ac913 · 76ac913
2 parents 7a92222 + d7fcb46
commit 76ac913
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 14 deletions.
diff --git a/src/components/HamburgerMenu/index.js b/src/components/HamburgerMenu/index.js
@@ -11,9 +11,10 @@ import {
     useDisclosure,
     Link,
 } from '@chakra-ui/react'
+import NextLink from 'next/link'
 import { GiHamburgerMenu } from 'react-icons/gi'
 
-function HamburgerMenu() {
+function HamburgerMenu({ routes }) {
     const [size, setSize] = useState('xs')
     const { isOpen, onOpen, onClose } = useDisclosure()
 
@@ -26,24 +27,34 @@ function HamburgerMenu() {
         <div>
             <Button
                 onClick={() => handleClick(size)}
+                colorScheme="gray"
+                variant="ghost"
                 key={size}
                 m={4}
                 as={IconButton}
                 icon={<GiHamburgerMenu />}
-                variant="outline"
-                style={{ backgroundColor: '#E6FFFA', color: '#1D4044' }}
             />
 
             <Drawer onClose={onClose} isOpen={isOpen} size={size}>
                 <DrawerOverlay />
                 <DrawerContent
-                    style={{ backgroundColor: '#319795', color: '#E6FFFA' }}
+                    style={{ backgroundColor: 'white', color: 'black' }}
                 >
                     <DrawerCloseButton />
                     <DrawerBody>
-                        <Link>
-                            <Heading>Test</Heading>
-                        </Link>
+                        {routes.map((route, index) => {
+                            return (
+                                <NextLink
+                                    key={index}
+                                    href={route.route}
+                                    passHref
+                                >
+                                    <Link>
+                                        <Heading>{route.name}</Heading>
+                                    </Link>
+                                </NextLink>
+                            )
+                        })}
                     </DrawerBody>
                 </DrawerContent>
             </Drawer>

diff --git a/src/components/Navbar/Nav.module.css b/src/components/Navbar/Nav.module.css
@@ -6,4 +6,5 @@
     /* Flexbox */
     display: flex;
     justify-content: space-between;
+    align-items: center;
 }
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
@@ -1,18 +1,56 @@
 import styles from './Nav.module.css'
+import NextLink from 'next/link'
 import Image from 'next/image'
 import logo from './chinguLogo.png'
 import HamburgerMenu from '../HamburgerMenu'
+import { Box, Link } from '@chakra-ui/react'
 
 function Navbar() {
+    const isAuthenticated = false
+
+    const authenticatedRoutes = [
+        { name: 'Projects', route: '/projects' },
+        { name: 'Profile', route: '/profile' },
+        { name: 'Sign Out', route: '/' },
+    ]
+
+    const nonAuthenticatedRoutes = [
+        { name: 'Home', route: '/' },
+        { name: 'Sign In', route: '/signin' },
+    ]
+
+    const routes = isAuthenticated
+        ? authenticatedRoutes
+        : nonAuthenticatedRoutes
+
     return (
         <nav className={styles.nav}>
-            <Image
-                src={logo}
-                alt="Chingu Collaborate Logo"
-                width="110%"
-                height="40%"
-            />
-            <HamburgerMenu />
+            <Box>
+                <Image
+                    src={logo}
+                    alt="Chingu Collaborate Logo"
+                    width={100}
+                    height={40}
+                />
+            </Box>
+            {/* Smaller Screens */}
+            <Box display={['flex', 'flex', 'none', 'none']}>
+                <HamburgerMenu routes={routes} />
+            </Box>
+            {/* Larger Screens */}
+            <Box
+                display={['none', 'none', 'flex', 'flex']}
+                gap={2}
+                fontSize="1.25rem"
+            >
+                {routes.map((route, index) => {
+                    return (
+                        <NextLink key={index} href={route.route} passHref>
+                            <Link onClick={route.onClick}>{route.name}</Link>
+                        </NextLink>
+                    )
+                })}
+            </Box>
         </nav>
     )
 }