Merge pull request #396 from DonaldReddy/fix-navbar

[Bug]: Menu in mobile view is broken.
PranavBarthwal · Jun 12, 2024 · 7fcca08 · 7fcca08
2 parents 520bdde + cf7b91a
commit 7fcca08
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 41 deletions.
diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import logo from '../../assets/A letter tech logo.png';
 import Typed from 'typed.js';
-import { Link as ScrollLink } from 'react-scroll';
 
 function Hero() {
   useEffect(() => {
@@ -30,8 +29,7 @@ function Hero() {
           <p className="lead text-light">Welcome to CosmoXplore, where NASA's API unveils celestial wonders. Discover breathtaking images and cutting-edge astronomical data, embarking on a cosmic journey that transcends the boundaries of earthly imagination.</p>
           <div className="d-grid gap-5 d-md-flex justify-content-md-start pt-2">
             <a href="#apod">
-              {/* <button type="button" className="btn btn-primary btn-lg px-4 me-md-2">Explore</button> */}
-              <ScrollLink className="btn btn-primary btn-lg px-4 me-md-2" to="apod" smooth={true} duration={500}>Explore</ScrollLink>
+              <button type="button" className="btn btn-primary btn-lg px-4 me-md-2">Explore</button>
             </a>
           </div>
         </div>

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -3,10 +3,7 @@
   top: 0;
   left: 0;
   width: 100dvw;
-  /* background: linear-gradient(to left, rgb(10, 0, 73), rgb(0, 0, 0));
-   */
-  background-image: linear-gradient(to left, rgba(10, 0, 73, 0.9), rgba(0, 0, 0, 0.9)); /* Semi-transparent background */
-
+  background-image: linear-gradient(to left, rgba(10, 0, 73, 0.9), rgba(0, 0, 0, 0.9));
   color: #fff;
   padding: 1rem 2rem;
   text-align: center;
@@ -15,21 +12,22 @@
   justify-content: space-between;
   align-items: center;
   box-sizing: border-box;
-  box-shadow: 0 17px 20px rgba(0, 0, 0, 0.2); /* Add shadow here */
-  backdrop-filter: blur(10px) saturate(150%); 
+  box-shadow: 0 17px 20px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(10px) saturate(150%);
 }
 
 .logo {
   display: flex;
   justify-content: center;
-  grid-column: 2/3;
   align-items: center;
 }
-.logo-img{
+
+.logo-img {
   width: 370px;
 }
+
 .navigator {
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 .navigator.open {
@@ -44,6 +42,8 @@
   gap: 2rem;
 }
 
+/*  */
+
 .navbar-links.open {
   display: flex;
   flex-direction: column;
@@ -62,12 +62,12 @@
   opacity: 0.7;
   list-style-type: none;
   transition: 0.5s;
-  position: relative; 
+  position: relative;
 }
 
-.navbar-list-item:hover{
+.navbar-list-item:hover {
   font-weight: bold;
-  color:aqua;
+  color: aqua;
   opacity: 1;
 }
 
@@ -77,26 +77,44 @@
   transition: 0.5s;
 }
 
+.active {
+  text-decoration: none;
+  opacity: 1;
+  color: rgb(0, 255, 255);
+  font-weight: bold;
+}
+
 .navbar-list-item:after {
-  content: ""; /* Empty content for pseudo-element */
-  position: absolute; /* Absolute positioning for underline */
-  width: 100%; /* Full width of the list item */
-  height: 2px; /* Underline height */
-  background-color: aqua; /* White underline color */
-  opacity: 0; /* Initially hidden */
-  transition: all 0.3s; /* Smooth transition on hover */
-  bottom: -7px; /* Increased gap */
-  left: 0; /* Align underline to the left of the list item */
-}
-
-.navbar-list-item:hover:after{
+  content: "";
+  /* Empty content for pseudo-element */
+  position: absolute;
+  /* Absolute positioning for underline */
+  width: 100%;
+  /* Full width of the list item */
+  height: 2px;
+  /* Underline height */
+  background-color: aqua;
+  /* White underline color */
+  opacity: 0;
+  /* Initially hidden */
+  transition: all 0.3s;
+  /* Smooth transition on hover */
+  bottom: -7px;
+  /* Increased gap */
+  left: 0;
+  /* Align underline to the left of the list item */
+}
+
+.navbar-list-item:hover:after {
   /* font-size: large; */
-  opacity:1;
+  opacity: 1;
 }
-.navbar-list-item-contact-us:hover{
+
+.navbar-list-item-contact-us:hover {
   /* font-size: large; */
-  opacity:1;
+  opacity: 1;
 }
+
 .hamburger {
   display: none;
 }
@@ -128,8 +146,8 @@
     top: 0;
     right: 0;
     width: 30%;
-    height: 100%;
-    background-color: #030013;
+    height: 100dvh;
+    background-color: #030013ee;
     overflow: auto;
     z-index: 10;
     display: none;
@@ -148,11 +166,13 @@
     z-index: 100;
   }
 }
-@media only screen and (max-width: 720px){
-  .navigator{
+
+@media only screen and (max-width: 720px) {
+  .navigator {
     width: 60%;
   }
-  .logo-img{
+
+  .logo-img {
     width: 250px;
   }
-}
+}
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { NavLink, Link as RouterLink, useNavigate, useLocation } from 'react-router-dom';
+import { NavLink, useNavigate, useLocation } from 'react-router-dom';
 import { Link as ScrollLink, animateScroll as scroll } from 'react-scroll';
 import logoWhite from '../../assets/logo_white.png';
 import './Navbar.css';
@@ -109,17 +109,17 @@ function Navbar() {
       <div className={`navigator ${isOpen ? 'open' : ''}`}>
         <ul className={`navbar-links ${isOpen ? 'open' : ''}`}>
           <li className="navbar-list-item" onClick={() => { scroll.scrollToTop(); handleMenuClose(); }}>
-            <RouterLink className="rem-default" to="/">Home</RouterLink>
+            <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/">Home</NavLink>
           </li>
           {renderAPODLink()}
           <li className="navbar-list-item" onClick={handleMenuClose}>
-            <RouterLink className="rem-default" to="/mars-rover">MartianImagery</RouterLink>
+            <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/mars-rover">MartianImagery</NavLink>
           </li>
           <li className="navbar-list-item" onClick={handleMenuClose}>
-            <NavLink className="rem-default" to="/nasa-projects">NASA's Projects</NavLink>
+            <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/nasa-projects">NASA's Projects</NavLink>
           </li>
           <li className="navbar-list-item" onClick={handleMenuClose}>
-            <NavLink className="rem-default" to="/about">About us</NavLink>
+            <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/about">About us</NavLink>
           </li>
           {renderContactLink()}
         </ul>