Add all device responsive Navbar menu ( onClick function and media css)

Author: sakibdeveloper999

src/components/Navbar/Navbar.css

@@ -24,4 +24,51 @@ nav ul li{
 .dark-nav{
     background: #212EA0;
     transition: 0.5s;
+}
+.menu-icon{
+    display: none;
+}
+/* ======= media query ========== */
+
+@media (max-width : 1000px){
+    .logo{
+        width: 140px;
+
+    }
+    nav ul li{
+        margin: 10px 15px;
+    }
+}
+
+@media (max-width : 840px){
+    nav{
+        padding: 15px 0;
+
+    }
+    nav ul{
+        position: fixed;
+        top: 0;
+        right: 0;
+        background: #212EA0;
+        z-index: -1;
+        width: 200px;
+        bottom: 0;
+        padding-top: 70px;
+        transition: 0.5s;
+    }
+    nav ul li{
+        display: block;
+        margin: 25px 40px;
+    }
+    .menu-icon{
+        display: block;
+        width: 30px;
+        cursor: pointer;
+    }
+    .btn-nav{
+        font-size: 14px;
+    }
+    .hide-mobile-menu{
+        right: -200px;
+    }
 }

src/components/Navbar/Navbar.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import './Navbar.css'
 import logo from '../../assets/logo.png'
+import menu_icon from '../../assets/menu-icon.png'
 import { Link } from 'react-scroll';
 
 const Navbar = () => {
@@ -9,18 +10,24 @@ const Navbar = () => {
         window.addEventListener('scroll',()=>{
             window.scrollY > 50 ? setSticky(true) : setSticky(false)
         })
-    },[])
+    },[]);
+
+    const [mobileMenu, setMobileMenu] = useState(false)
+    const toggleMenu =()=>{
+        mobileMenu ? setMobileMenu(false) : setMobileMenu(true);
+    }
   return (
     <nav className={`container ${sticky ? 'dark-nav': ''}`} >
         <img src={logo} alt="" className='logo'/>
-        <ul>
+        <ul className={mobileMenu ? '':'hide-mobile-menu'}>
             <li><Link to='hero' smooth={true} offset={0} duration={500}>Home</Link></li>
             <li><Link to='program' smooth={true} offset={-260} duration={500}>Program</Link></li>
             <li><Link to='about' smooth={true} offset={-150} duration={500}>About us </Link></li>
             <li><Link to='campus' smooth={true} offset={-260} duration={500}>Campus</Link></li>
             <li><Link to='testimonials' smooth={true} offset={-260} duration={500}>Testimonials</Link></li>
-            <li><Link to='contact' smooth={true} offset={-260} duration={500} className='btn'>Contact Us</Link></li>
+            <li><Link to='contact' smooth={true} offset={-260} duration={500} className='btn btn-nav'>Contact Us</Link></li>
         </ul>
+        <img onClick={toggleMenu} src={menu_icon} className='menu-icon' alt="" />
     </nav>
   )
 }

src/index.css

@@ -51,4 +51,16 @@ a{
 .dark-btn img{
   width: 20px;
   margin-left: 10px;
+}
+/* ======= media query ========== */
+
+@media(max-width: 1200px){
+  .container{
+    padding-left: 5%;
+    padding-right: 5%;
+  }
+  .btn{
+    
+    padding: 14px 22px;
+  }
 }