files

Author: Anukriti-Nawani

components/navbar.js

@@ -2,9 +2,16 @@ import styles from "../styles/Navbar.module.css";
 import Aos from "aos";
 import "aos/dist/aos.css";
 import { useEffect, useState } from 'react'
-import { Link } from '@chakra-ui/react';
+import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerOverlay, Link, useDisclosure } from '@chakra-ui/react';
+import { FaBars } from "react-icons/fa";
+import { useRouter } from "next/router";
 
 export default function Navbar() {
+
+	const { isOpen, onOpen, onClose } = useDisclosure()
+	const [placement, setPlacement] = useState('bottom')
+	const router = useRouter();
+
 	useEffect(() => {
 		Aos.init({ duration: 2000 })
 	})
@@ -31,11 +38,29 @@ export default function Navbar() {
 					<form autoComplete="off" className={styles.form}>
 						<Link href="/" className={styles.sign}>Home</Link>
 						<Link href="courses" className={styles.sign}>Courses</Link>
-						<Link href="signin" className={styles.sign}>Signin</Link>
-						<Link href="signup" className={styles.sign}>Signup</Link>
+						<Link onClick={() => router.push("/signin")} className={styles.sign}>Signin</Link>
+						<Link onClick={() => router.push("/signup")} className={styles.sign}>Signup</Link>
 						<Link href="dashboard" className={styles.sign}>Dashboard</Link>
 						<Link href="cart" className={styles.sign}>Cart</Link>
 
+{/* drawer */}
+<FaBars onClick={onOpen} className={styles.bar}/>
+<Drawer placement={placement} onClose={onClose} isOpen={isOpen}>
+        <DrawerOverlay />
+        <DrawerContent>
+   
+          <DrawerBody className={styles.draw}>
+           
+			<Link href="/"><p>Home</p></Link>
+						<Link href="courses"><p>Courses</p></Link>
+						<Link onClick={() => router.push("/signin")}><p>Signin</p></Link>
+						<Link onClick={() => router.push("/signup")}><p>Signup</p></Link>
+						<Link href="dashboard"><p>Dashboard</p></Link>
+						<Link href="cart"><p>Cart</p></Link>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+
 					</form>
 
 				</div>

styles/Navbar.module.css

@@ -160,3 +160,20 @@
 .submit:active {
   opacity: 0.8;
 }
+/* drawer */
+.bar {
+  color:#45f3ff;
+  margin-top: -0.7rem;
+  font-size: 1.3rem;
+}
+
+.draw {
+  /* border: 1px solid red; */
+  background-color: #43b2ba;
+  font-size: large;
+  font-weight: 600;
+  line-height: 2.5em;
+  
+  
+
+}