Skip to content

Commit

Permalink
add navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@mansi066
mansi066 committed Jan 2, 2025
1 parent bb4c248 commit 5742c65
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 82 deletions.
2 changes: 2 additions & 0 deletions src/Pages/PremiumBeans.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ const PremiumContainer = styled.div`
max-width: 1200px;
margin: 0 auto;
background-color: #fffbeb;
box-shadow: 1px 1px 5px 6px #888888;
`;

const FeatureTitle = styled(motion.h1)`
Expand Down
166 changes: 84 additions & 82 deletions src/componets/Navbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
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';
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";

const NavbarContainer = styled(motion.nav)`
display: flex;
Expand All @@ -19,21 +19,21 @@ 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;
background: rgba(44, 19, 11, 0.98);
}
&::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;
}
Expand All @@ -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;
}
Expand All @@ -71,33 +71,29 @@ 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 {
Expand All @@ -108,10 +104,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;
Expand All @@ -124,7 +120,7 @@ const MobileMenuButton = styled(motion.button)`
&:hover {
background: rgba(210, 105, 30, 0.2);
color: #FFE4B5;
color: #ffe4b5;
}
`;

Expand All @@ -147,21 +143,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);
}
}
Expand All @@ -172,15 +168,14 @@ 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 = () => {
Expand All @@ -197,63 +192,49 @@ function Navbar() {
initial={{ y: -100 }}
animate={{ y: 0 }}
transition={{ duration: 0.5 }}
className={scrolled ? 'scrolled' : ''}
className={scrolled ? "scrolled" : ""}
>
<Logo whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
<Link to="/">MsCafe</Link>
</Logo>
<NavLinks>

{/* <!-- ------NavLink:::::Home-------------------> */}
<NavLink className={location.pathname === '/' ? 'active' : ''}
whileHover={{ scale: 1.05 }}>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/">Home</Link>
</NavLink>
{/* <!-- ------NavLink:::::Shop-------------------> */}
<NavLink className={location.pathname === '/shop' ? 'active' : ''}
whileHover={{ scale: 1.05 }}>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/shop">Shop</Link>
</NavLink>

{/* <!-- ------NavLink:::::About-------------------> */}
<NavLink className={location.pathname === '/about' ? 'active' : ''}
whileHover={{ scale: 1.05 }}>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/about">About</Link>
</NavLink>

{/* <!-- ------NavLink::::Testinomial-------------------> */}
<NavLink className={location.pathname === '/testimonial' ? 'active' : ''}
whileHover={{ scale: 1.05 }}>
<Link to="/testimonial">Testimonial</Link>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/testimonial">Testimonial</Link>
</NavLink>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/premiumbeans">Premium Beans</Link>
</NavLink>

{/* <!-- ------NavLink:::::Contacts-------------------> */}
<NavLink className={location.pathname === '/contact' ? 'active' : ''}
whileHover={{ scale: 1.05 }}>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/contact">Contact</Link>
</NavLink>

{isLoggedIn ? (
<>
<NavLink className={location.pathname === '/profile' ? 'active' : ''}
whileHover={{ scale: 1.05 }}>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/profile">Profile</Link>
</NavLink>
<NavLink
whileHover={{ scale: 1.05 }}>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/cart">Cart</Link>
</NavLink>
<NavLink className={location.pathname === '/cart' ? 'active' : ''}
whileHover={{ scale: 1.05 }}
<NavLink
whileHover={{ scale: 1.05 }}
onClick={handleLogout}
style={{ cursor: 'pointer' }}
style={{ cursor: "pointer" }}
>
Logout
</NavLink>
</>
) : (
<NavLink className={location.pathname === '/login' ? 'active' : ''}
whileHover={{ scale: 1.05 }}>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/login">Login</Link>
</NavLink>
)}
Expand All @@ -263,7 +244,7 @@ function Navbar() {
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
{isOpen ? '×' : '☰'}
{isOpen ? "×" : "☰"}
</MobileMenuButton>
</NavbarContainer>
<AnimatePresence>
Expand All @@ -275,42 +256,63 @@ function Navbar() {
transition={{ duration: 0.3 }}
>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/" onClick={toggleMenu}>Home</Link>
<Link to="/" onClick={toggleMenu}>
Home
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/shop" onClick={toggleMenu}>Shop</Link>
<Link to="/shop" onClick={toggleMenu}>
Shop
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/about" onClick={toggleMenu}>About</Link>
<Link to="/about" onClick={toggleMenu}>
About
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/testimonial" onClick={toggleMenu}>Testimonial</Link>
<Link to="/testimonial" onClick={toggleMenu}>
Testimonial
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/premiumbeans" onClick={toggleMenu}>Premium Beans</Link>
<Link to="/premiumbeans" onClick={toggleMenu}>
Premium Beans
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/contact" onClick={toggleMenu}>Contact</Link>
<Link to="/contact" onClick={toggleMenu}>
Contact
</Link>
</MobileNavLink>
{isLoggedIn ? (
<>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/profile" onClick={toggleMenu}>Profile</Link>
<Link to="/profile" onClick={toggleMenu}>
Profile
</Link>
</MobileNavLink>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/cart" onClick={toggleMenu}>Cart</Link>
<Link to="/cart" onClick={toggleMenu}>
Cart
</Link>
</MobileNavLink>
<MobileNavLink
whileHover={{ scale: 1.02 }}
onClick={() => { handleLogout(); toggleMenu(); }}
style={{ cursor: 'pointer' }}
<MobileNavLink
whileHover={{ scale: 1.02 }}
onClick={() => {
handleLogout();
toggleMenu();
}}
style={{ cursor: "pointer" }}
>
Logout
</MobileNavLink>
</>
) : (
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/login" onClick={toggleMenu}>Login</Link>
<Link to="/login" onClick={toggleMenu}>
Login
</Link>
</MobileNavLink>
)}
</MobileMenu>
Expand All @@ -320,4 +322,4 @@ function Navbar() {
);
}

export default Navbar;
export default Navbar;

0 comments on commit 5742c65

Please sign in to comment.