From da30e96b2be02e3efc8318f27349ab83cbb056a0 Mon Sep 17 00:00:00 2001
From: Priya <priyamaheshwari183@gmail.com>
Date: Fri, 3 May 2024 01:09:58 +0530
Subject: [PATCH] added responsiveness

---
 src/Components/Navbar/Navbar.css | 42 ++++++++++++++++++++++++++++++++
 src/Components/Navbar/Navbar.jsx |  9 ++++++-
 src/index.css                    | 11 +++++++++
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/Components/Navbar/Navbar.css b/src/Components/Navbar/Navbar.css
index 6a41f13..7c2de35 100644
--- a/src/Components/Navbar/Navbar.css
+++ b/src/Components/Navbar/Navbar.css
@@ -26,4 +26,46 @@ nav ul li{
 .dark-nav{
     background: #212EA0;
     transition: 0.5s;
+}
+
+.menu-icon{
+    display: none;
+}
+
+@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: -200px;
+        bottom: 0;
+        background: #212EA0;
+        z-index: -1;
+        width: 200px;
+        padding-top: 70px;
+        transition: 0.5s;
+    }
+    nav ul li{
+        display: block;
+        margin: 25px 40px;
+    }
+    .menu-icon{
+        display: block;
+        width: 30px;
+        cursor: pointer;
+    }
+    .hide-mobile-menu{
+        right: -200px;
+    }
 }
\ No newline at end of file
diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
index 6225b3a..5c3fcec 100644
--- a/src/Components/Navbar/Navbar.jsx
+++ b/src/Components/Navbar/Navbar.jsx
@@ -4,6 +4,7 @@ import { Link } from 'react-scroll';
 
 import './Navbar.css'
 import logo from '../../assets/logo2.png'
+import menu_icon from '../../assets/menu-icon.png'
 import { NavLink } from 'react-router-dom';
 
 const Navbar = () => {
@@ -15,10 +16,15 @@ const Navbar = () => {
     })
   },[]);
 
+  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'></img>
-    <ul>
+    <ul className={mobileMenu?'':'hide-mobile-menu'}>
         <li><Link to='hero' smooth={true} offset={0} duration={500}>Home</Link></li>
         <li><Link to='about' smooth={true} offset={-260} duration={500}>About</Link></li>
         <li><Link to='testimonials' smooth={true} offset={0} duration={500}>Testimonials</Link></li>
@@ -28,6 +34,7 @@ const Navbar = () => {
         <li><NavLink to='/login'>Login</NavLink></li>
         <li><NavLink to='/signup'>Signup</NavLink></li>
     </ul>
+    <img src={menu_icon} alt='' className='menu-icon' onClick={toggleMenu}></img>
     </nav>
   )
 }
diff --git a/src/index.css b/src/index.css
index 3011848..b60317e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -45,4 +45,15 @@ a{
 .btn.dark-btn{
   background: #212EA0;
   color: #fff;
+}
+
+
+@media(max-width: 1200px){
+    .container{
+      padding-left: 5%;
+      padding-right: 5%;
+    }
+    .btn{
+      padding: 14px 22px;
+    }
 }
\ No newline at end of file