From fa968a878d68d09bf5650804c1a61228af0a8f84 Mon Sep 17 00:00:00 2001
From: felixoder <debayanghosh408@gmail.com>
Date: Tue, 22 Oct 2024 23:34:59 +0530
Subject: [PATCH] Fixed the allignment of the footer for smaller screens

---
 frontend/src/components/Navbar.jsx       | 67 ++++++-----------
 frontend/src/components/style/Navbar.css | 96 ++++++++++++------------
 2 files changed, 75 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 13ce13f..d22c14e 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,53 +1,36 @@
 import React, { useState } from "react";
-import Sheet from "react-modal-sheet";
-import './style/Navbar.css';
+import "./style/Navbar.css";
+
 export default function Navbar() {
   const [spanStyle, setSpanStyle] = useState({ left: "0px", width: "95px" });
   const widthMapping = [95, 94, 110, 115, 110];
+
   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  transform -translate-x-1/2  bg-[#4F46E5] rounded-lg flex justify-center items-center navbar">
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10 navbar-item"
-          onMouseEnter={() => handleHover(0)}
-        >
-          Home
-        </a>
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10 navbar-item"
-          onMouseEnter={() => handleHover(1)}
-        >
-          Events
-        </a>
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10 navbar-item"
-          onMouseEnter={() => handleHover(2)}
-        >
-          Resources
-        </a>
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10 navbar-item"
-          onMouseEnter={() => handleHover(3)}
-        >
-          Team
-        </a>
-        <a
-          href="#"
-          className="relative inline-block text-white text-base font-medium px-6 z-10 navbar-item"
-          onMouseEnter={() => handleHover(4)}
-        >
-          Join Us
-        </a>
+    <div className="block md:relative z-50">
+      <nav className="fixed bottom-5 transform -translate-x-1/2 bg-[#4F46E5] rounded-lg flex justify-center items-center navbar">
+        {["Home", "Events", "Resources", "Team", "Join"].map(
+          (item, index) => (
+            <a
+              key={index}
+              href="#"
+              className="block md:relative md:inline-block text-white text-base font-sm font-semibold md:font-medium px-2 md:px-6 z-50 navbar-item"
+              onMouseEnter={() => handleHover(index)}
+            >
+              {item}
+            </a>
+          )
+        )}
         <span
-          className="absolute top-0 left-0  rounded-lg transition-all duration-500"
+          className="absolute top-0 left-0 rounded-lg transition-all duration-500"
           style={{ left: spanStyle.left, width: spanStyle.width }}
         />
       </nav>
diff --git a/frontend/src/components/style/Navbar.css b/frontend/src/components/style/Navbar.css
index f15bcd7..1691512 100644
--- a/frontend/src/components/style/Navbar.css
+++ b/frontend/src/components/style/Navbar.css
@@ -1,51 +1,55 @@
-@media(max-width:768px) {
+/* for smaller screens (max-width: 300px) */
+@media (max-width: 300px) {
+  .navbar {
+    z-index: 999; 
+    width: 70%; 
+    bottom: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #4F46E5;
+    border-radius: 8px;
+  }
+
+  .navbar-item {
+    z-index: 999; 
+    font-size: 8px; 
+    padding: 2px 3px;
+  }
+
+  .navbar-item:hover {
+    background: linear-gradient(to right, #222, #BC3482);
+    padding-left: 6px; 
+  }
 
-    .navbar {
-      flex-direction: column; 
-      bottom: auto;
-      top: 10vh; 
-      left:8%;
-      width:117px; 
-      background-color:#4F46E5;
-      height: 252px;
-      gap: 15px;
-      border-radius: 10px;
+  .navbar span {
+    z-index: 100; 
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0%;
+    position: absolute;
+    transition: all 0.3s ease;
+  }
+}
 
-    }
+@media (min-width: 300px) {
+  .navbar {
+    z-index: 999;
+    justify-content: center;
+    align-items: center;
+    width: 524px;
+    height: 50px;
+    left: 50%;
+  }
 
-     .navbar-item {
-      margin-top: 6px;
-      padding-left: 24px;
-      padding-top: 5px;
-      position:relative;
-      width:100%;
-      background-color:#4F46E5;
-      border-radius: 6px;
-    }
-     .navbar-item:hover{
-        padding-left: 24px;
-        padding-top: 5px;
-        background:linear-gradient( to right,#222,#BC3482);
-        border-radius: 6px;
-     }
-    .navbar span {
-      left: 0; 
-      top: 0; 
-      width:0px; 
-      position: relative;
-      height: 0%;
-    }
+  .navbar-item {
+    z-index: 999; 
   }
-  @media (min-width: 768px){
-    .navbar span{
-        position: absolute;
-        height: 100%;
-    }
-    .navbar{
-        justify-content: center;
-        align-items:center;
-        width:524px;
-        height:50px;
-        left:50%;
-    }
+
+  .navbar span {
+    z-index: 100; 
+    position: absolute;
+    height: 100%;
+    transition: all 0.5s ease;
   }
+}