Skip to content

Commit

Permalink
Merge pull request #96 from Sowdarjya/Sowdarjya
Browse files Browse the repository at this point in the history 
Fixed hamburger menu for small screen devices
  • Loading branch information
@Mujtabaa07
Mujtabaa07 authored Jan 2, 2025
2 parents 4e04756 + 82a6d55 commit a80f1b5
Showing 1 changed file with 71 additions and 51 deletions.
122 changes: 71 additions & 51 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 } 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,29 +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;
}
}
&::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 @@ -104,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 @@ -120,7 +120,7 @@ const MobileMenuButton = styled(motion.button)`
&:hover {
background: rgba(210, 105, 30, 0.2);
color: #FFE4B5;
color: #ffe4b5;
}
`;

Expand All @@ -131,9 +131,10 @@ const MobileMenu = styled(motion.div)`
right: 0;
background: rgba(44, 19, 11, 0.98);
padding: 1rem;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
border-radius: 0 0 15px 15px;
border: 2px solid #8B4513;
border: 2px solid #8b4513;
border-top: none;
`;

Expand All @@ -142,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 @@ -173,8 +174,8 @@ function Navbar() {
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 @@ -191,7 +192,7 @@ 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>
Expand All @@ -212,7 +213,7 @@ function Navbar() {
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/contact">Contact</Link>
</NavLink>

{isLoggedIn ? (
<>
<NavLink whileHover={{ scale: 1.05 }}>
Expand All @@ -221,10 +222,10 @@ function Navbar() {
<NavLink whileHover={{ scale: 1.05 }}>
<Link to="/cart">Cart</Link>
</NavLink>
<NavLink
whileHover={{ scale: 1.05 }}
<NavLink
whileHover={{ scale: 1.05 }}
onClick={handleLogout}
style={{ cursor: 'pointer' }}
style={{ cursor: "pointer" }}
>
Logout
</NavLink>
Expand All @@ -240,7 +241,7 @@ function Navbar() {
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
{isOpen ? '×' : '☰'}
{isOpen ? "×" : "☰"}
</MobileMenuButton>
</NavbarContainer>
<AnimatePresence>
Expand All @@ -252,39 +253,58 @@ 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="/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 @@ -294,4 +314,4 @@ function Navbar() {
);
}

export default Navbar;
export default Navbar;

0 comments on commit a80f1b5

Please sign in to comment.