From 61f79454c2fc19f82c426cc67766e011a4d88be5 Mon Sep 17 00:00:00 2001
From: dhruvdankhara <dhruvdankhara09@gmail.com>
Date: Wed, 8 Jan 2025 19:36:06 +0530
Subject: [PATCH] remove unused and extra home menu and improve code

---
 src/componets/Navbar.js   |  70 ++++++++++----
 src/componets/Navitems.js | 191 ++++++++++++++++++--------------------
 2 files changed, 138 insertions(+), 123 deletions(-)

diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js
index a5a25ea..8f3646e 100644
--- a/src/componets/Navbar.js
+++ b/src/componets/Navbar.js
@@ -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;
@@ -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;
 
@@ -252,7 +257,7 @@ const ShopLink = styled(NavLink)`
   }
 
   &::after {
-    content: '▼';
+    content: "▼";
     font-size: 0.7rem;
     margin-left: 0.3rem;
     transition: transform 0.3s ease;
@@ -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)}
                     >
@@ -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)}
                     >
@@ -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)}
                         >
@@ -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)}
                       >
@@ -385,7 +398,10 @@ 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>
@@ -393,12 +409,11 @@ function Navbar() {
                 </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>
@@ -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
@@ -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>
@@ -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
diff --git a/src/componets/Navitems.js b/src/componets/Navitems.js
index 2afa9cd..bb0b3aa 100644
--- a/src/componets/Navitems.js
+++ b/src/componets/Navitems.js
@@ -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",
+  },
 ];
-