From f1fe0673d7b25e1a75e181ae501f42b4a111e051 Mon Sep 17 00:00:00 2001
From: vashukashyap <kashyapvashu2003@gmail.com>
Date: Thu, 12 Oct 2023 17:37:31 +0530
Subject: [PATCH 1/3] fixed navbar responsiveness

---
 src/assets/Icons/icon-outline-person.png      | Bin 0 -> 338 bytes
 .../Header-section/Header-section.css         |   4 +
 src/components/Header-section/Navbar.jsx      | 133 +++++++++++++++---
 3 files changed, 119 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/Icons/icon-outline-person.png

diff --git a/src/assets/Icons/icon-outline-person.png b/src/assets/Icons/icon-outline-person.png
new file mode 100644
index 0000000000000000000000000000000000000000..072d19d76ac59517298ec52382c652aedcc403d9
GIT binary patch
literal 338
zcmeAS@N?(olHy`uVBq!ia0vp^+(697!3HFMCO(@Aq&N#aB8!3I!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{&P<k$B+uf-i!XL83QGbe>}Xm)cpIkw`Ji<
zPvf`gOkuUQj+`(>{9$iGexf3`s;B3vQ`!^OoSfg=D(dZ8Gyj>7N$<(v`O9YhocnoB
z<*}u5Uptw)ejMl1^_l8B^`e8oevbwHOJaAluXq~C75e$u-!G5&*}W^6*T+_LPf(q6
z(COxsEiwx1_FfVPli6Z^{c1I^o8Zn++%wg1sp>hQzJ+bV`z{`g(x0Xm{%3(w;!G!5
z<JxCy@^rb?ekor*HDiC)>u-Ll?vkfWzU`VC9J`@t|Hjpk;WzF0<ooy>fBqHZG`|>n
hOd?<Z(5H2k>>nc4*6Fg?%mR9u!PC{xWt~$(698ecg(Uz0

literal 0
HcmV?d00001

diff --git a/src/components/Header-section/Header-section.css b/src/components/Header-section/Header-section.css
index 333b886a..50783081 100644
--- a/src/components/Header-section/Header-section.css
+++ b/src/components/Header-section/Header-section.css
@@ -129,4 +129,8 @@
     height: 44px;
     background: #1abc9c;
   }
+}
+
+.text-white{
+  color: white !important;
 }
\ No newline at end of file
diff --git a/src/components/Header-section/Navbar.jsx b/src/components/Header-section/Navbar.jsx
index 74ba132e..05ed18e1 100644
--- a/src/components/Header-section/Navbar.jsx
+++ b/src/components/Header-section/Navbar.jsx
@@ -1,28 +1,125 @@
 import { FiUser } from "react-icons/fi";
+import { FiX } from "react-icons/fi";
 import { Link } from "react-router-dom";
 import MenuIcon from "../../assets/Icons/menu-icon.png";
+import PersonIcon from "../../assets/Icons/icon-outline-person.png";
 import logo from "../../assets/Images/logo.png";
+import { useState } from "react";
 const Navbar = () => {
+  const [showMenu, setShowMenu] = useState("");
+
   return (
     <>
-      <nav className="navbar flex justify-between items-center py-4 px-4 md:py-4 md:px-12">
-        <img className="logo" src={logo} alt="Rentalog-logo" />
-        <ul className="hidden md:flex">
-          <li className="nav-links mr-5 p-3 ">HOME</li>
-          <li className="nav-links mr-5 p-3">ABOUT</li>
-          <li className="nav-links mr-5 p-3">CONTACT</li>
-          <li className="nav-links  p-3">RENTALS</li>
-        </ul>
-        <ul className="user-cta hidden md:flex">
-          <Link to="/login">
-            <li className="mr-5 p-2 md:p-3">Login</li>
-          </Link>
-          <li className=" p-2 md:p-3">
-            <FiUser className="mr-1" />
-            Register
-          </li>
-        </ul>
-        <img className="menu-icon md:hidden" src={MenuIcon} alt="Menu-icon" />
+      {showMenu && (
+        <div className="md:hidden overflow-hidden bg-[#1ABC9C] w-full h-[70%] absolute z-40 top-0 fixed flex justify-center items-center">
+          <button
+            onClick={() => {
+              setShowMenu("");
+            }}
+            className="absolute top-0 left-0"
+          >
+            <FiX className="m-2 text-white" />
+          </button>
+          <div>
+            <div className="px-4 bg-textWhite w-fit rounded-xl">
+              <img
+                className="self-start w-40 "
+                src={logo}
+                alt="Rentalog-logo"
+              />
+            </div>
+            <div className="mt-4 h-[1px] w-600 bg-[#F8F8F8] rounded-full"></div>
+
+            <ul className="flex flex-col gap-8 justify-center items-center mt-10">
+              <li className="text-white">HOME</li>
+              <li className="text-white">CONTACT</li>
+              <li className="text-white">ABOUT</li>
+            </ul>
+          </div>
+        </div>
+      )}
+
+      <nav className="bg-white fixed w-full z-20 top-0 left-0">
+        <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+          <div className="flex flex-row justify-center items-center">
+            <button
+              onClick={() => {
+                setShowMenu("show");
+              }}
+              type="button"
+              className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden"
+              aria-controls="navbar-sticky"
+              aria-expanded="false"
+            >
+              <span className="sr-only">Open main menu</span>
+              <svg
+                className="w-5 h-5"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 17 14"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M1 1h15M1 7h15M1 13h15"
+                />
+              </svg>
+            </button>
+
+            <img className="self-start w-40 " src={logo} alt="Rentalog-logo" />
+          </div>
+          <div className="flex md:order-2">
+            <Link to="/login">
+              <button
+                type="button"
+                className="hidden md:block font-bold rounded-lg text-lg px-4 py-2 text-center mr-3 md:mr-0"
+              >
+                Login
+              </button>
+            </Link>
+            <button
+              type="button"
+              className="hidden md:flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-md text-[#262626] px-4 py-1 text-center mr-3 md:mr-0 bg-textWhite"
+            >
+              <img className="h-6" src={PersonIcon} alt="not available" />
+              Sign In
+            </button>
+            <Link to="/login">
+              <button
+                type="button"
+                className="md:hidden flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-sm px-4 py-2 text-center bg-textWhite"
+              >
+                <img className="h-6" src={PersonIcon} alt="not available" />
+                Log In
+              </button>
+            </Link>
+          </div>
+          <div
+            className="hidden md:flex md:w-auto md:order-1"
+            id="navbar-sticky"
+          >
+            <ul className="flex flex-row lg:gap-10 md:gap-6 font-medium">
+              <li>
+                <a href="#" aria-current="page">
+                  Home
+                </a>
+              </li>
+              <li>
+                <a href="#" aria-current="page">
+                  Contact
+                </a>
+              </li>
+              <li>
+                <a href="#" aria-current="page">
+                  About
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
       </nav>
     </>
   );

From 5e3b4e3a9b0e86a2ada22295eff8c65f28bbb997 Mon Sep 17 00:00:00 2001
From: vashukashyap <kashyapvashu2003@gmail.com>
Date: Sat, 14 Oct 2023 12:55:29 +0530
Subject: [PATCH 2/3] reviewed

---
 .../Header-section/Header-section.css         |  4 --
 src/components/Header-section/Navbar.jsx      | 48 +++++++++++++++----
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/components/Header-section/Header-section.css b/src/components/Header-section/Header-section.css
index 50783081..122f88fb 100644
--- a/src/components/Header-section/Header-section.css
+++ b/src/components/Header-section/Header-section.css
@@ -130,7 +130,3 @@
     background: #1abc9c;
   }
 }
-
-.text-white{
-  color: white !important;
-}
\ No newline at end of file
diff --git a/src/components/Header-section/Navbar.jsx b/src/components/Header-section/Navbar.jsx
index 05ed18e1..238dab8c 100644
--- a/src/components/Header-section/Navbar.jsx
+++ b/src/components/Header-section/Navbar.jsx
@@ -4,9 +4,35 @@ import { Link } from "react-router-dom";
 import MenuIcon from "../../assets/Icons/menu-icon.png";
 import PersonIcon from "../../assets/Icons/icon-outline-person.png";
 import logo from "../../assets/Images/logo.png";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+
+
+
+
+
 const Navbar = () => {
   const [showMenu, setShowMenu] = useState("");
+  const [doBlure, setDoBlure] = useState(false);
+
+
+
+  useEffect(() => {
+    const scrollHandler = () => {
+        setDoBlure(window.pageYOffset <= 30)
+    };
+    window.addEventListener('scroll', scrollHandler);
+    
+    scrollHandler(); 
+    
+    return () => {
+        window.removeEventListener('scroll', scrollHandler);
+    }
+}, []);
+
+
+  
+
+
 
   return (
     <>
@@ -16,11 +42,11 @@ const Navbar = () => {
             onClick={() => {
               setShowMenu("");
             }}
-            className="absolute top-0 left-0"
+            className="absolute top-0 left-0 m-[1.5rem]"
           >
-            <FiX className="m-2 text-white" />
+            <FiX className="m-2 text-textWhite" />
           </button>
-          <div>
+          <div className="text-textWhite">
             <div className="px-4 bg-textWhite w-fit rounded-xl">
               <img
                 className="self-start w-40 "
@@ -30,16 +56,18 @@ const Navbar = () => {
             </div>
             <div className="mt-4 h-[1px] w-600 bg-[#F8F8F8] rounded-full"></div>
 
-            <ul className="flex flex-col gap-8 justify-center items-center mt-10">
-              <li className="text-white">HOME</li>
-              <li className="text-white">CONTACT</li>
-              <li className="text-white">ABOUT</li>
-            </ul>
+            <div className="flex flex-col gap-8 justify-center items-center mt-10">
+              <div className="text-textWhite">HOME</div>
+              <div className="text-textWhite">CONTACT</div>
+              <div className="text-textWhite">ABOUT</div>
+            </div>
           </div>
         </div>
       )}
 
-      <nav className="bg-white fixed w-full z-20 top-0 left-0">
+      <nav className='bg-white fixed w-full z-20 top-0 left-0'>
+        <div className={doBlure?`absolute w-full h-full -z-20 bg-gray-light opacity-0`:`absolute w-full h-full -z-20 bg-gray-light opacity-80`}></div>
+
         <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
           <div className="flex flex-row justify-center items-center">
             <button

From 6399a103e758eab86ce43e6833181b874a9e74e2 Mon Sep 17 00:00:00 2001
From: vashukashyap <kashyapvashu2003@gmail.com>
Date: Sat, 14 Oct 2023 22:38:22 +0530
Subject: [PATCH 3/3] improved navbar

---
 src/components/Header-section/Navbar.jsx | 122 ++++++++++++-----------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/components/Header-section/Navbar.jsx b/src/components/Header-section/Navbar.jsx
index 238dab8c..5d78ae27 100644
--- a/src/components/Header-section/Navbar.jsx
+++ b/src/components/Header-section/Navbar.jsx
@@ -6,33 +6,22 @@ import PersonIcon from "../../assets/Icons/icon-outline-person.png";
 import logo from "../../assets/Images/logo.png";
 import { useState, useEffect } from "react";
 
-
-
-
-
 const Navbar = () => {
   const [showMenu, setShowMenu] = useState("");
   const [doBlure, setDoBlure] = useState(false);
 
-
-
   useEffect(() => {
     const scrollHandler = () => {
-        setDoBlure(window.pageYOffset <= 30)
+      setDoBlure(window.pageYOffset <= 30);
     };
-    window.addEventListener('scroll', scrollHandler);
-    
-    scrollHandler(); 
-    
-    return () => {
-        window.removeEventListener('scroll', scrollHandler);
-    }
-}, []);
-
-
-  
+    window.addEventListener("scroll", scrollHandler);
 
+    scrollHandler();
 
+    return () => {
+      window.removeEventListener("scroll", scrollHandler);
+    };
+  }, []);
 
   return (
     <>
@@ -54,49 +43,41 @@ const Navbar = () => {
                 alt="Rentalog-logo"
               />
             </div>
+
             <div className="mt-4 h-[1px] w-600 bg-[#F8F8F8] rounded-full"></div>
 
             <div className="flex flex-col gap-8 justify-center items-center mt-10">
               <div className="text-textWhite">HOME</div>
               <div className="text-textWhite">CONTACT</div>
               <div className="text-textWhite">ABOUT</div>
+              <div className="text-textWhite">RENTALS</div>
+              <div className="text-gray-dark">
+                <Link to="/login">
+                  <button
+                    type="button"
+                    className="flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-md px-6 py-2 text-center bg-textWhite"
+                  >
+                    <img className="h-6" src={PersonIcon} alt="not available" />
+                    Log In
+                  </button>
+                </Link>
+              </div>
             </div>
           </div>
         </div>
       )}
 
-      <nav className='bg-white fixed w-full z-20 top-0 left-0'>
-        <div className={doBlure?`absolute w-full h-full -z-20 bg-gray-light opacity-0`:`absolute w-full h-full -z-20 bg-gray-light opacity-80`}></div>
+      <nav className="bg-white fixed w-full z-20 top-0 left-0">
+        <div
+          className={
+            doBlure
+              ? `absolute w-full h-full -z-20 bg-gray-light opacity-0`
+              : `absolute w-full h-full -z-20 bg-gray-light opacity-80`
+          }
+        ></div>
 
         <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
           <div className="flex flex-row justify-center items-center">
-            <button
-              onClick={() => {
-                setShowMenu("show");
-              }}
-              type="button"
-              className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden"
-              aria-controls="navbar-sticky"
-              aria-expanded="false"
-            >
-              <span className="sr-only">Open main menu</span>
-              <svg
-                className="w-5 h-5"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 17 14"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M1 1h15M1 7h15M1 13h15"
-                />
-              </svg>
-            </button>
-
             <img className="self-start w-40 " src={logo} alt="Rentalog-logo" />
           </div>
           <div className="flex md:order-2">
@@ -115,15 +96,6 @@ const Navbar = () => {
               <img className="h-6" src={PersonIcon} alt="not available" />
               Sign In
             </button>
-            <Link to="/login">
-              <button
-                type="button"
-                className="md:hidden flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-sm px-4 py-2 text-center bg-textWhite"
-              >
-                <img className="h-6" src={PersonIcon} alt="not available" />
-                Log In
-              </button>
-            </Link>
           </div>
           <div
             className="hidden md:flex md:w-auto md:order-1"
@@ -132,21 +104,53 @@ const Navbar = () => {
             <ul className="flex flex-row lg:gap-10 md:gap-6 font-medium">
               <li>
                 <a href="#" aria-current="page">
-                  Home
+                  HOME
+                </a>
+              </li>
+              <li>
+                <a href="#" aria-current="page">
+                  ABOUT
                 </a>
               </li>
               <li>
                 <a href="#" aria-current="page">
-                  Contact
+                  CONTACT
                 </a>
               </li>
               <li>
                 <a href="#" aria-current="page">
-                  About
+                  RENTALS
                 </a>
               </li>
             </ul>
           </div>
+
+          <button
+            onClick={() => {
+              setShowMenu("show");
+            }}
+            type="button"
+            className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden"
+            aria-controls="navbar-sticky"
+            aria-expanded="false"
+          >
+            <span className="sr-only">Open main menu</span>
+            <svg
+              className="w-5 h-5"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 17 14"
+            >
+              <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M1 1h15M1 7h15M1 13h15"
+              />
+            </svg>
+          </button>
         </div>
       </nav>
     </>