From 72c0cd7567445ea59daab464333e8a6635b18e41 Mon Sep 17 00:00:00 2001
From: kaustubh <kaustubhpatil1211@gmail.com>
Date: Sat, 5 Oct 2024 01:44:11 +0530
Subject: [PATCH] fix navbar UI responsive

---
 frontend/src/components/Events.jsx      |   2 +-
 frontend/src/components/Footer.jsx      |   2 +-
 frontend/src/components/Navbar.jsx      | 120 +++++++++++++++---------
 frontend/src/components/TeamSection.jsx |   4 +-
 4 files changed, 78 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/Events.jsx b/frontend/src/components/Events.jsx
index c39793a..c950335 100644
--- a/frontend/src/components/Events.jsx
+++ b/frontend/src/components/Events.jsx
@@ -19,7 +19,7 @@ const Events = () => {
     },
   ]
   return (
-    <div className="flex flex-col w-full my-12 px-4 md:px-12 lg:px-24">
+    <div className="flex flex-col w-full my-12 px-4 md:px-12 lg:px-24" id="event">
       <div className="w-fit text-white bg-black px-4 py-2 rounded-full mx-auto font-semibold sm:my-2">
         Stay Connected with Our
       </div>
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 546ee34..e3b4b7b 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -33,7 +33,7 @@ export default function Footer() {
   ]
 
   return (
-    <footer className="bg-black text-white pt-8 pb-24">
+    <footer className="bg-black text-white pt-8 pb-24" id="join-us">
       <div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
 
         {/* Social Media Section */}
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 9047018..59c739c 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,56 +1,84 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Sheet from "react-modal-sheet";
 
 export default function Navbar() {
   const [spanStyle, setSpanStyle] = useState({ left: "0px", width: "95px" });
-  const widthMapping = [95, 94, 110, 115, 110];
+  const [widthMapping, setWidthMapping] = useState([95, 94, 110, 115, 110]);
+
+  // Handle screen resize and adjust widthMapping based on screen size
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        // For smaller screens (mobile)
+        setWidthMapping([70, 68, 80, 85, 80]); // Adjust these values as per design
+      } else {
+        // For larger screens (desktop)
+        setWidthMapping([95, 94, 110, 115, 110]);
+      }
+    };
+
+    // Call the function initially
+    handleResize();
+
+    // Listen for window resize
+    window.addEventListener("resize", handleResize);
+
+    // Clean up event listener on unmount
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   const handleHover = (index) => {
-    const leftPosition = index === 0 ? 0 : widthMapping.slice(0, index).reduce((a, b) => a + b, 0);
-    setSpanStyle({ left: `${leftPosition}px`, width: `${widthMapping[index]}px` });
+    const leftPosition =
+      index === 0 ? 0 : widthMapping.slice(0, index).reduce((a, b) => a + b, 0);
+    setSpanStyle({
+      left: `${leftPosition}px`,
+      width: `${widthMapping[index]}px`,
+    });
   };
   return (
     <div className="relative z-50">
-      <nav className="fixed bottom-5 left-1/2 transform -translate-x-1/2 w-[524px] h-[50px] bg-[#4F46E5] rounded-lg flex justify-center items-center">
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10"
-          onMouseEnter={() => handleHover(0)}
-        >
-          Home
-        </a>
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10"
-          onMouseEnter={() => handleHover(1)}
-        >
-          Events
-        </a>
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10"
-          onMouseEnter={() => handleHover(2)}
-        >
-          Resources
-        </a>
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10"
-          onMouseEnter={() => handleHover(3)}
-        >
-          Team
-        </a>
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10"
-          onMouseEnter={() => handleHover(4)}
-        >
-          Join Us
-        </a>
-        <span
-          className="absolute top-0 left-0 h-full bg-gradient-to-r from-[#222] to-[#BC3482] rounded-lg transition-all duration-500"
-          style={{ left: spanStyle.left, width: spanStyle.width }}
-        />
-      </nav>
-    </div>
+  <nav className="fixed top-5 left-1/2 transform -translate-x-1/2 w-[90%] sm:w-[524px] h-[50px] bg-[#4F46E5] rounded-lg flex justify-around sm:justify-center items-center">
+    <a
+      href="#"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(0)}
+    >
+      Home
+    </a>
+    <a
+      href="#event"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(1)}
+    >
+      Events
+    </a>
+    <a
+      href="#"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(2)}
+    >
+      Resources
+    </a>
+    <a
+      href="#team"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(3)}
+    >
+      Team
+    </a>
+    <a
+      href="#join-us"
+      className="relative inline-block text-white text-sm sm:text-base font-medium px-2 sm:px-6 z-10"
+      onMouseEnter={() => handleHover(4)}
+    >
+      Join Us
+    </a>
+    <span
+      className="absolute top-0 left-0 h-full bg-gradient-to-r from-[#222] to-[#BC3482] rounded-lg transition-all duration-500"
+      style={{ left: spanStyle.left, width: spanStyle.width }}
+    />
+  </nav>
+</div>
+
   );
 }
diff --git a/frontend/src/components/TeamSection.jsx b/frontend/src/components/TeamSection.jsx
index 1caa382..28d64bc 100644
--- a/frontend/src/components/TeamSection.jsx
+++ b/frontend/src/components/TeamSection.jsx
@@ -97,9 +97,9 @@ export default function TeamSection() {
   ]
 
   return (
-    <div class="flex flex-col w-full my-12 px-4 md:px-12 lg:px-24"> {/* Changed background to dark */}
+    <div class="flex flex-col w-full my-12 px-4 md:px-12 lg:px-24" > {/* Changed background to dark */}
       {/* <div class="flex flex-col"> */}
-        <div class="flex flex-col mt-8">
+        <div class="flex flex-col mt-8" id="team">
           <div class="container max-w-7xl px-4">
             <div class="flex flex-wrap justify-center text-center mb-24">
               <div class="w-full lg:w-6/12 px-4">