Merge pull request #357 from shreyash3087/fix/navbar-and-responsiveness

[Bug]:Fix Navbar and Responsiveness

src/components/Apod/Apod.jsx

@@ -41,9 +41,9 @@ function Apod() {
     <>
       <h1 align="center" className={Styles['section_title'] + " " + Styles['section_title_mobile']} id="apod">Astronomy Picture of The Day</h1 >
 
-      <div className="container my-5">
+      <div className="container my-5 overflow-x-hidden">
 
-        <div className="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg" id="class_removal">
+        <div className="row mx-1 p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg" id="class_removal">
 
           <div className="col-lg-7 p-3 p-lg-5 pt-lg-3">
 

src/components/Apod/Apod.module.css

@@ -12,12 +12,17 @@
     }
 
     .img {
+        width: 90%;
+    }
+    .apod_img_container{
         width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
-
     .apod_img {
-        height: 350px;
-        width: 350px;
+        height: 300px;
+        width: 300px;
     }
 
 }

src/components/ContactForm/ContactForm.jsx

@@ -77,7 +77,7 @@ function ContactForm() {
           <img src={img} className={Styles["contact_img"]} alt="Contact Image" style={{ maxWidth: "100%" }} />
         </div>
         <div className={Styles["right"]}>
-          <form >
+          <form className={Styles["form"]}>
             <div className="mb-3">
               <input type="text" autoComplete='off' className={Styles["form-control"] + " " + "form-control"} id="exampleInputName" name='name' value={contactInfo.name} onChange={handleChange} placeholder="Enter your name" />
             </div>

src/components/ContactForm/ContactForm.module.css

@@ -128,6 +128,12 @@
     .contact-form .right {
         padding-left: 0;
         margin-top: 10px;
-        /* Adjust as needed */
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .contact-form .form{
+        width:60%;
     }
 }

src/components/Navbar/Navbar.css

@@ -0,0 +1,121 @@
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100dvw;
+  background: linear-gradient(to left, rgb(10, 0, 73), rgb(0, 0, 0));
+  color: #fff;
+  padding: 1rem 2rem;
+  text-align: center;
+  z-index: 200;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.logo-img{
+  width: 370px;
+}
+.navigator {
+  overflow: hidden;
+}
+
+.navigator.open {
+  display: flex;
+}
+
+.navbar-links {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.navbar-links.open {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.rem-default {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.navbar-list-item {
+  opacity: 0.7;
+  list-style-type: none;
+  transition: 0.5s;
+}
+.navbar-list-item:hover{
+  font-size: large;
+  opacity:1;
+}
+.hamburger {
+  display: none;
+}
+
+.bar {
+  width: 25px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: white;
+  margin: 4px;
+  transition: all 0.3s;
+}
+
+.bar1-open {
+  transform: translateY(10px) rotate(45deg);
+}
+
+.bar2-open {
+  opacity: 0;
+}
+
+.bar3-open {
+  transform: translateY(-6px) rotate(-45deg);
+}
+
+@media only screen and (max-width: 1280px) {
+  .navigator {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 30%;
+    height: 100%;
+    background-color: #030013;
+    overflow: auto;
+    z-index: 10;
+    display: none;
+    transition: 0.5s;
+  }
+
+  .navigator.open {
+    display: flex;
+  }
+
+  .hamburger {
+    display: block;
+    position: static;
+    right: 0;
+    top: 2rem;
+    z-index: 100;
+  }
+}
+@media only screen and (max-width: 720px){
+  .navigator{
+    width: 60%;
+  }
+  .logo-img{
+    width: 250px;
+  }
+}

src/components/Navbar/Navbar.jsx

@@ -1,108 +1,83 @@
-import React, { useEffect, useState } from 'react';
-import { NavLink, Link, useNavigate, useLocation } from 'react-router-dom'
-import logoWhite from '../../assets/logo_white.png';
-import menuFill from '../../assets/menu-fill.svg';
-import './navabar.css'
+import React, { useState, useEffect } from "react";
+import { NavLink } from "react-router-dom";
+import logoWhite from "../../assets/logo_white.png";
+import "./Navbar.css";
 
 function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
 
-  const [isToggle, setIsToggle] = useState(false);
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  function toggleMenu() {
-    setIsToggle((prev) => !prev);
-  }
-
-  function handleMenuClose() {
-    setIsToggle(false);
-  }
-
-  function handleNavigation(hash) {
-    handleMenuClose();
-    navigate(`/#${hash}`);
-  }
-
-  useEffect(() => {
-    if (location.hash === '') {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    }else{
-      const element = document.getElementById(location.hash.substring(1));
-      if (element) {
-        element.scrollIntoView({ behavior: 'smooth' });
-      }
-    }
-  }, [location]);
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
 
   useEffect(() => {
-    var prevScrollpos = window.pageYOffset;
-    window.onscroll = function () {
-      var currentScrollPos = window.pageYOffset;
-      if (prevScrollpos < currentScrollPos) {
-        handleMenuClose()
-      } else {
-        handleMenuClose()
+    const handleResize = () => {
+      if (window.innerWidth > 1280 && isOpen) {
+        setIsOpen(false);
       }
-      prevScrollpos = currentScrollPos;
-    }
-  }, []);
+    };
 
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isOpen]);
 
   return (
-    <nav className="navbar navbar-expand-lg bg-*">
-      <div className="container-fluid pt-2">
-        <a className="navbar-brand" onClick={() => {navigate('/#')}}>
-          <img src={logoWhite} alt="Bootstrap" width="370" />
+    <nav className="navbar">
+      <div className="logo">
+        <a href="#">
+          <img src={logoWhite} alt="Bootstrap" className="logo-img" />
         </a>
-
-        {/* burger menu for mobiles */}
-
-        <div className="sidebar-icon" id="sidebar-icon" onClick={toggleMenu}>
-          <img src={menuFill} alt="" className="sidebar-i" id="sidebar-i" />
-        </div>
-
-        <div className={"sidebar-menu" + (isToggle ? " active" : "")} id="sidebar-menu">
-          <div className="sidebar-links">
-            <ul>
-              <li className="sidebar-list-item rem" onClick={() => handleNavigation('')}><a className="rem-default">Home</a></li>
-              <li className="sidebar-list-item rem" onClick={() => handleNavigation('apod')}><a className="rem-default">APOD</a></li>
-              <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="/mars-rover">MartianImagery</a></li>
-              <li className="sidebar-list-item rem" onClick={handleMenuClose}><NavLink className="rem-default" to="/nasa-projects">NASA's Projects</NavLink></li>
-              <li className="sidebar-list-item rem" onClick={handleMenuClose}><NavLink className="rem-default" to="/about">About us</NavLink></li>
-            </ul>
-            <a onClick={() => {navigate('/#contact')}} className="sidebar-contact rem-default rem">
-              <button className="btn btn-outline-light rounded-pill" type="submit">Contact Us</button>
+      </div>
+      <div className={`navigator ${isOpen ? "open" : ""}`}>
+        <ul className={`navbar-links ${isOpen ? "open" : ""}`}>
+          <li className="navbar-list-item">
+            <NavLink className="rem-default" to="/">
+              Home
+            </NavLink>
+          </li>
+          <li className="navbar-list-item">
+            <a className="rem-default" href="#apod">
+              APOD
             </a>
-          </div>
-        </div>
-
-        {/* navbar for screens */}
-
-        <div className="collapse navbar-collapse pe-5" id="navbarSupportedContent">
-          <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
-            <li className="nav-item" onClick={() => handleNavigation('')}>
-              <Link className="nav-link text-light">Home</Link>
-            </li>
-            <li className="nav-item" onClick={() => handleNavigation('apod')}>
-              <a className="nav-link text-light">APoD</a>
-            </li>
-            <li className="nav-item">
-              <NavLink className="nav-link text-light" to="/mars-rover">MartianImagery</NavLink>
-            </li>
-            <li className="nav-item">
-              <NavLink className="nav-link text-light" to="/nasa-projects">NASA's Projects</NavLink>
-            </li>
-            <li className="nav-item">
-              <NavLink className="nav-link text-light" to="/about">About us</NavLink>
-            </li>
-            <li className="nav-item" onClick={() => {navigate('/#contact')}}>
-              <a>
-                <button className="btn btn-outline-light rounded-pill" type="submit">Contact Us</button>
-              </a>
-            </li>
-          </ul>
-        </div>
-
+          </li>
+          <li className="navbar-list-item">
+            <NavLink className="rem-default" to="/mars-rover">
+              MartianImagery
+            </NavLink>
+          </li>
+          <li className="navbar-list-item">
+            <NavLink className="rem-default" to="/nasa-projects">
+              NASA's Projects
+            </NavLink>
+          </li>
+          <li className="navbar-list-item">
+            <NavLink className="rem-default" to="/about">
+              About us
+            </NavLink>
+          </li>
+          <li className="navbar-list-item">
+            <a href="#contact" className="sidebar-contact rem-default rem">
+              <button
+                className="btn btn-outline-light rounded-pill"
+                type="submit"
+              >
+                Contact Us
+              </button>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div
+        className="hamburger"
+        id="hamburger"
+        onClick={toggleMenu}
+        aria-label="Menu"
+      >
+        <div className={`bar ${isOpen ? "bar1-open" : ""}`}></div>
+        <div className={`bar ${isOpen ? "bar2-open" : ""}`}></div>
+        <div className={`bar ${isOpen ? "bar3-open" : ""}`}></div>
       </div>
     </nav>
   );