From 008ff0322eee7368ed84d79bd1a0e966a3fba027 Mon Sep 17 00:00:00 2001 From: Akshaya Mudam Date: Thu, 2 Jan 2025 12:47:44 +0530 Subject: [PATCH] Active current page in nav bar --- src/componets/Navbar.css | 20 +++++- src/componets/Navbar.js | 148 +++++++++++++++++++-------------------- 2 files changed, 90 insertions(+), 78 deletions(-) diff --git a/src/componets/Navbar.css b/src/componets/Navbar.css index 56eefd1..1e7e4e1 100644 --- a/src/componets/Navbar.css +++ b/src/componets/Navbar.css @@ -119,4 +119,22 @@ body.menu-open { z-index: 1000; padding: 10px 20px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); -} \ No newline at end of file +} + +/*Highlighting current page*/ +.nav a.active { + position: relative; + color: #D2691E; + font-weight: bold; +} + +.nav a.active::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + right: 0; + height: 2px; + background-color: #D2691E; + transition: width 0.3s ease; +} diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index 4d5a420..6937088 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -1,9 +1,9 @@ -import React, { useState, useEffect } from "react"; -import { Link } from "react-router-dom"; -import { useSelector, useDispatch } from "react-redux"; -import { logout } from "../Store/authSlice"; -import styled from "styled-components"; -import { motion, AnimatePresence } from "framer-motion"; +import React, { useState, useEffect } from 'react'; +import { Link, useLocation} from 'react-router-dom'; +import { useSelector, useDispatch } from 'react-redux'; +import { logout } from '../Store/authSlice'; +import styled from 'styled-components'; +import { motion, AnimatePresence } from 'framer-motion'; const NavbarContainer = styled(motion.nav)` display: flex; @@ -19,7 +19,7 @@ const NavbarContainer = styled(motion.nav)` right: 0; z-index: 1000; transition: all 0.3s ease; - border-bottom: 2px solid #8b4513; + border-bottom: 2px solid #8B4513; &.scrolled { padding: 0.8rem 2rem; @@ -27,13 +27,13 @@ const NavbarContainer = styled(motion.nav)` } &::before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: url("/coffee-beans-pattern.png") repeat; + background: url('/coffee-beans-pattern.png') repeat; opacity: 0.05; pointer-events: none; } @@ -42,17 +42,17 @@ const NavbarContainer = styled(motion.nav)` const Logo = styled(motion.div)` font-size: 2rem; font-weight: 700; - font-family: "Playfair Display", serif; - + font-family: 'Playfair Display', serif; + a { - color: #d2691e; + color: #D2691E; text-decoration: none; - background: linear-gradient(to right, #d2691e, #cd853f); + background: linear-gradient(to right, #D2691E, #CD853F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); - + &:hover { opacity: 0.9; } @@ -71,29 +71,33 @@ const NavLinks = styled(motion.div)` const NavLink = styled(motion.div)` position: relative; - + a { - color: #deb887; + color: #DEB887; text-decoration: none; font-weight: 500; font-size: 1.1rem; transition: all 0.3s ease; - font-family: "Poppins", sans-serif; - + font-family: 'Poppins', sans-serif; + &:hover { - color: #ffe4b5; + color: #FFE4B5; } } + &.active a { + text-decoration: underline; + color: #D2691E; + } &::after { - content: "☕"; + content: '☕'; position: absolute; font-size: 0.8rem; bottom: -15px; left: 50%; transform: translateX(-50%) scale(0); transition: transform 0.3s ease; - color: #d2691e; + color: #D2691E; } &:hover::after { @@ -104,10 +108,10 @@ const NavLink = styled(motion.div)` const MobileMenuButton = styled(motion.button)` display: none; background: none; - border: 2px solid #d2691e; + border: 2px solid #D2691E; font-size: 1.8rem; cursor: pointer; - color: #deb887; + color: #DEB887; padding: 0.5rem; border-radius: 8px; transition: all 0.3s ease; @@ -120,7 +124,7 @@ const MobileMenuButton = styled(motion.button)` &:hover { background: rgba(210, 105, 30, 0.2); - color: #ffe4b5; + color: #FFE4B5; } `; @@ -143,21 +147,21 @@ const MobileNavLink = styled(motion.div)` border-radius: 8px; transition: all 0.3s ease; margin-bottom: 0.5rem; - + a { - color: #deb887; + color: #DEB887; text-decoration: none; font-weight: 500; display: block; transition: all 0.3s ease; - font-family: "Poppins", sans-serif; + font-family: 'Poppins', sans-serif; } &:hover { background: rgba(210, 105, 30, 0.2); - + a { - color: #ffe4b5; + color: #FFE4B5; transform: translateX(10px); } } @@ -168,14 +172,15 @@ function Navbar() { const [scrolled, setScrolled] = useState(false); const isLoggedIn = useSelector((state) => state.auth.isLoggedIn); const dispatch = useDispatch(); + const location = useLocation(); useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 20); }; - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); }, []); const handleLogout = () => { @@ -192,46 +197,54 @@ function Navbar() { initial={{ y: -100 }} animate={{ y: 0 }} transition={{ duration: 0.5 }} - className={scrolled ? "scrolled" : ""} + className={scrolled ? 'scrolled' : ''} > MsCafe - + Home - + Shop - + About - + Testimonial - + Contact - + {isLoggedIn ? ( <> - + Profile - + Cart - Logout ) : ( - + Login )} @@ -241,7 +254,7 @@ function Navbar() { whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} > - {isOpen ? "×" : "☰"} + {isOpen ? '×' : '☰'} @@ -253,58 +266,39 @@ function Navbar() { transition={{ duration: 0.3 }} > - - Home - + Home - - Shop - + Shop - - About - + About - - Testimonial - + Testimonial - - Contact - + Contact {isLoggedIn ? ( <> - - Profile - + Profile - - Cart - + Cart - { - handleLogout(); - toggleMenu(); - }} - style={{ cursor: "pointer" }} + { handleLogout(); toggleMenu(); }} + style={{ cursor: 'pointer' }} > Logout ) : ( - - Login - + Login )} @@ -314,4 +308,4 @@ function Navbar() { ); } -export default Navbar; +export default Navbar; \ No newline at end of file