feat module 2 : modified navigation bar (remove menu, rename menu) - website, mobile

src/components/Navbar/Navbar.jsx

@@ -83,6 +83,10 @@ const COLLECTION_PRIORITY_BY_TYPE = {
 
 const normalizeTitle = (value = "") => value.trim().toUpperCase();
 
+const getProductTypeMenuLabel = (productType = "") => {
+  return normalizeTitle(productType) === "BEAUTY" ? "Essentials" : productType;
+};
+
 const sortCollectionsByPriority = (collection = [], productType = "") => {
   const typeKey = (productType || "").trim().toLowerCase();
   const priorityList = COLLECTION_PRIORITY_BY_TYPE[typeKey] || [];
@@ -216,10 +220,13 @@ const Navbar = () => {
 
       let navItemData = mapProductTypesWithCollections(products)
       navItemData = getUniqueCollections(navItemData)
+      navItemData = navItemData.filter(({ productType }) => normalizeTitle(productType) !== "HOME")
 
       setNavItem(navItemData)
 
       // extra info for the navbar
+      setNavItemCompanyInfo([]);
+      /*
       setNavItemCompanyInfo([{
         name:"DELIVERY INFORMATION",
         link:"/delivery_info"
@@ -236,6 +243,7 @@ const Navbar = () => {
         name:"CONTACT US",
         link:"/contact_us"
       }]);
+      */
 
     }
 
@@ -480,7 +488,7 @@ const Navbar = () => {
                     ":hover::after": {
                       width: "50%", // Expands on hover
                     },
-                  }}>{productType}</Typography>
+                  }}>{getProductTypeMenuLabel(productType)}</Typography>
               </Button>))}
 
               {navItemCompanyInfo.map(({ name, link }) => (<Button

src/components/Navbar/components/MobileNav/MobileNav.jsx

@@ -5,6 +5,10 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Grid from '@mui/material/Grid2';
 import logoSrc from "../../../../assets/images/amberlogo.png";
 
+const getProductTypeMenuLabel = (productType = "") => {
+  return productType.trim().toUpperCase() === "BEAUTY" ? "Essentials" : productType;
+};
+
 const MobileNav = ({ open, onClose, menu = [], infomenu = [] }) => {
 
   // React.useEffect(()=>{
@@ -153,7 +157,7 @@ const MobileNav = ({ open, onClose, menu = [], infomenu = [] }) => {
                   },
                 }}
               >
-                {productType?.toUpperCase()}
+                {getProductTypeMenuLabel(productType)?.toUpperCase()}
               </Typography>
             </AccordionSummary>
             <AccordionDetails>

src/pages/Home.jsx

@@ -76,7 +76,8 @@ const Home = () => {
               <ProductType title={'Apparel'} img_url={AmberClothing}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
-              <ProductType title={'BEAUTY'} img_url={AmberBeautyWallpaper}/>
+              {/* <ProductType title={'BEAUTY'} img_url={AmberBeautyWallpaper}/> */}
+              <ProductType title={'Essentials'} img_url={AmberBeautyWallpaper}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
               <ProductType title={'HOME'} img_url={AmberHomeWallpaper} />