mobile nav completed

Author: shree404

src/Components/landingpage/Navbar.jsx

@@ -3,6 +3,12 @@ import fullogo from "../../assets/LandingPage/logo.png";
 import { Link } from "react-router-dom";
 import Container from "react-bootstrap/Container";
 import { List } from "react-bootstrap-icons";
+import Offcanvas from 'react-bootstrap/Offcanvas';
+import MobileNavList from "./mobilenavlist";
+
+
+
+
 const Navbar = () => {
   const [sticky, setSticky] = useState(false);
 
@@ -15,6 +21,13 @@ const Navbar = () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+
+
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
   return (
     <>
       <nav className={`Navbar ${sticky ? "sticky" : ""}`}>
@@ -63,11 +76,18 @@ const Navbar = () => {
               />
             </div>
             <div>
-              <List className="MobileNav-container__icon" />
+              <List onClick={handleShow} className="MobileNav-container__icon" />
             </div>
           </div>
         </Container>
       </nav>
+      <Offcanvas show={show} onHide={handleClose} placement="end" className="MobileNav-canvas">
+        <Offcanvas.Header closeButton>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+         <MobileNavList/>
+        </Offcanvas.Body>
+      </Offcanvas>
     </>
   );
 };

src/Components/landingpage/mobilenavlist.jsx

@@ -0,0 +1,19 @@
+import ListGroup from 'react-bootstrap/ListGroup';
+import { Link } from 'react-router-dom';
+
+
+function MobileNavList(){
+    return(
+        <>
+          <ListGroup className='MobileNavList'>
+      <ListGroup.Item  className='MobileNavList-item'> <Link to='/' className='link-default'> Home</Link></ListGroup.Item>
+      <ListGroup.Item className='MobileNavList-item'><Link to='/about' className='link-default'> About Us</Link></ListGroup.Item>
+      <ListGroup.Item className='MobileNavList-item'><Link to='/blog' className='link-default'> Blogs</Link></ListGroup.Item>
+      <ListGroup.Item className='MobileNavList-item'><Link to='/events' className='link-default'> </Link>Events</ListGroup.Item>
+      <ListGroup.Item className='MobileNavList-item'><Link to='/contact' className='link-default'> Contact Us</Link></ListGroup.Item>
+    </ListGroup>
+        </>
+    )
+}
+
+export default MobileNavList;

src/Styles/App.css

@@ -60,6 +60,12 @@
     width: 2rem;
   }
 }
+.MobileNav-canvas {
+  height: 40%;
+  margin-top: 5rem;
+  width: 100%;
+}
+
 .hero {
   min-height: 100vh;
   background: linear-gradient(rgba(60, 55, 94, 0.7019607843), rgba(70, 63, 111, 0.7019607843)), url(/herobg.png);
@@ -503,4 +509,12 @@
   font-size: 0.9375rem;
   text-align: center;
   padding-top: 2rem;
+}
+
+.MobileNavList {
+  font-family: "Poppins", sans-serif;
+}
+.MobileNavList-item:hover {
+  color: #000080;
+  text-decoration: underline;
 }/*# sourceMappingURL=App.css.map */

src/Styles/App.css.map

@@ -9,4 +9,5 @@
 @import 'Partners';
 @import 'Testimonials';
 @import 'Contact';
-@import 'Footer';
+@import 'Footer';
+@import 'MobileNavList';

src/Styles/LandingPage/_Index.scss

@@ -0,0 +1,9 @@
+.MobileNavList{
+    font-family: $font;
+   &-item{
+    &:hover{
+        color: #000080;
+        text-decoration: underline;
+    }
+   }
+}

src/Styles/LandingPage/_MobileNavList.scss

@@ -58,4 +58,11 @@
   width: 2rem;
     }
   }
+}
+
+
+.MobileNav-canvas{
+  height: 40%;
+  margin-top: 5rem;
+  width: 100%;
 }