Skip to content

Commit

Permalink
Merge pull request #269 from dhruvdankhara/update-navbar
Browse files Browse the repository at this point in the history 
remove unused and extra home menu and improve code
  • Loading branch information
@Mujtabaa07
Mujtabaa07 authored Jan 9, 2025
2 parents 63a2aaf + 61f7945 commit 0775fba
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 123 deletions.
70 changes: 50 additions & 20 deletions src/componets/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@ import { logout } from "../Store/authSlice";
import styled from "styled-components";
import { motion, AnimatePresence } from "framer-motion";
import { navItems } from "./Navitems";
import { ProDropdown, OsDropdown, UsLoginDropdown, UsLogoutDropdown } from "./Dropdown";
import {
ProDropdown,
OsDropdown,
UsLoginDropdown,
UsLogoutDropdown,
} from "./Dropdown";

const NavbarContainer = styled(motion.nav)`
display: flex;
Expand Down Expand Up @@ -233,7 +238,7 @@ const DropdownMenu = styled(motion.div)`
padding: 0.5rem 1rem;
text-decoration: none;
color: #deb887;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
font-size: 1rem;
transition: background 0.3s ease;
Expand All @@ -252,7 +257,7 @@ const ShopLink = styled(NavLink)`
}
&::after {
content: '▼';
content: "▼";
font-size: 0.7rem;
margin-left: 0.3rem;
transition: transform 0.3s ease;
Expand Down Expand Up @@ -312,7 +317,9 @@ function Navbar() {
<NavLinks>
<li
key={items.id}
className={location.pathname === items.path ? "active" : ""}
className={
location.pathname === items.path ? "active" : ""
}
onMouseEnter={() => setproDropdown(true)}
onMouseLeave={() => setproDropdown(false)}
>
Expand All @@ -330,7 +337,9 @@ function Navbar() {
<NavLinks>
<li
key={items.id}
className={location.pathname === items.path ? "active" : ""}
className={
location.pathname === items.path ? "active" : ""
}
onMouseEnter={() => setosDropdown(true)}
onMouseLeave={() => setosDropdown(false)}
>
Expand All @@ -350,7 +359,9 @@ function Navbar() {
<>
<li
key={items.id}
className={location.pathname === items.path ? "active" : ""}
className={
location.pathname === items.path ? "active" : ""
}
onMouseEnter={() => setusloginDropdown(true)}
onMouseLeave={() => setusloginDropdown(false)}
>
Expand All @@ -369,7 +380,9 @@ function Navbar() {
) : (
<li
key={items.id}
className={location.pathname === items.path ? "active" : ""}
className={
location.pathname === items.path ? "active" : ""
}
onMouseEnter={() => setuslogoutDropdown(true)}
onMouseLeave={() => setuslogoutDropdown(false)}
>
Expand All @@ -385,20 +398,22 @@ function Navbar() {

return (
<NavLinks>
<li key={items.id} className={location.pathname === items.path ? "active" : ""}>
<li
key={items.id}
className={location.pathname === items.path ? "active" : ""}
>
<NavLink whileHover={{ scale: 1.05 }}>
<Link to={items.path}>{items.title}</Link>
</NavLink>
</li>
</NavLinks>
);
})}
<NavLinks>
<NavLink className={location.pathname === "/" ? "active" : ""} whileHover={{ scale: 1.05 }}>
<Link to="/">Home</Link>
</NavLink>

<ShopLink className={location.pathname === "/shop" ? "active" : ""}>
<NavLinks>
<ShopLink
className={location.pathname === "/shop" ? "active" : ""}
>
<Link to="/shop">Shop</Link>
<DropdownMenu>
<Link to="/shop/cake">Cakes</Link>
Expand All @@ -408,14 +423,20 @@ function Navbar() {
</DropdownMenu>
</ShopLink>

{/* removed unnecessary links that were already hidden and obsolete. */}
{/* removed unnecessary links that were already hidden and obsolete. */}

{isLoggedIn ? (
{isLoggedIn && (
<>
<NavLink className={location.pathname === "/profile" ? "active" : ""} whileHover={{ scale: 1.05 }}>
<NavLink
className={location.pathname === "/profile" ? "active" : ""}
whileHover={{ scale: 1.05 }}
>
<Link to="/profile">Profile</Link>
</NavLink>
<NavLink className={location.pathname === "/cart" ? "active" : ""} whileHover={{ scale: 1.05 }}>
<NavLink
className={location.pathname === "/cart" ? "active" : ""}
whileHover={{ scale: 1.05 }}
>
<Link to="/cart">Cart</Link>
</NavLink>
<NavLink
Expand All @@ -429,10 +450,14 @@ function Navbar() {
<span style={{ color: "#deb887" }}>Logout</span>
</NavLink>
</>
) : null}
)}
</NavLinks>

<MobileMenuButton onClick={toggleMenu} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<MobileMenuButton
onClick={toggleMenu}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
{isOpen ? "×" : "☰"}
</MobileMenuButton>
</RightNav>
Expand All @@ -441,7 +466,12 @@ function Navbar() {

<AnimatePresence>
{isOpen && (
<MobileMenu initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.3 }}>
<MobileMenu
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
>
<MobileNavLink whileHover={{ scale: 1.02 }}>
<Link to="/" onClick={toggleMenu}>
Home
Expand Down
191 changes: 88 additions & 103 deletions src/componets/Navitems.js
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,98 @@
export const navItems = [
{
id:1,
title:"Home",
path:"./",
cName:"nav-item",
},
{
id:2,
title:"Product",
path:"./product",
cName:"nav-item",
},



{
id:3,
title:"Contact",
path:"./contact",
cName:"nav-item",
},

{
id:4,
title:"Stories",
path:"./our-story",
cName:"nav-item",
},

{
id:5,
title:"User",
path:"./user",
cName:"nav-item",
},
{
id: 1,
title: "Home",
path: "./",
cName: "nav-item",
},
{
id: 2,
title: "Product",
path: "./product",
cName: "nav-item",
},
{
id: 3,
title: "Contact",
path: "./contact",
cName: "nav-item",
},
{
id: 4,
title: "Stories",
path: "./our-story",
cName: "nav-item",
},
{
id: 5,
title: "User",
path: "./user",
cName: "nav-item",
},
];

export const productDropdown =[
{
id:1,
title:"Shop",
path:"./shop",
cName:"submenu-item",
},

{
id:2,
title:"Premium Beans",
path:"./premiumBeans",
cName:"submenu-item",
},

{
id:3,
title:"expert bistas",
path:"./expertbaristas",
cName:"submenu-item",
},
export const productDropdown = [
{
id: 1,
title: "Shop",
path: "./shop",
cName: "submenu-item",
},
{
id: 2,
title: "Premium Beans",
path: "./premiumBeans",
cName: "submenu-item",
},
{
id: 3,
title: "expert bistas",
path: "./expertbaristas",
cName: "submenu-item",
},
];

export const ourstoryDropdown =[
{
id:1,
title:"about",
path:"./about",
cName:"submenu-item",
},

{
id:2,
title:"testimonials",
path:"./testimonial",
cName:"submenu-item",
},


export const ourstoryDropdown = [
{
id: 1,
title: "about",
path: "./about",
cName: "submenu-item",
},
{
id: 2,
title: "testimonials",
path: "./testimonial",
cName: "submenu-item",
},
];

export const userLogoutDropdown =[
{
id:1,
title:"login",
path:"./login",
cName:"submenu-item",
},

{
id:2,
title:"register",
path:"./register",
cName:"submenu-item",
},
export const userLogoutDropdown = [
{
id: 1,
title: "login",
path: "./login",
cName: "submenu-item",
},
{
id: 2,
title: "register",
path: "./register",
cName: "submenu-item",
},
];

export const userLoginDropdown =[
{
id:1,
title:"cart",
path:"./cart",
cName:"submenu-item",
},

{
id:2,
title:"profile",
path:"./profile",
cName:"submenu-item",
},


export const userLoginDropdown = [
{
id: 1,
title: "cart",
path: "./cart",
cName: "submenu-item",
},
{
id: 2,
title: "profile",
path: "./profile",
cName: "submenu-item",
},
];

0 comments on commit 0775fba

Please sign in to comment.