From 4b6f2ddcb6cd134e4636c81b4e8981b53965b76e Mon Sep 17 00:00:00 2001
From: MaragathaMeenakshi <mahiriya2019@gmail.com>
Date: Mon, 3 Jun 2024 18:57:37 +0530
Subject: [PATCH 1/4] Changes made in category list dropdown

---
 categorylist.css | 115 ++++++++++++++++++++++++++++++++++++++++-------
 categorylist.js  |  53 +++++++++++++++++-----
 index.html       |  15 +++++--
 3 files changed, 151 insertions(+), 32 deletions(-)

diff --git a/categorylist.css b/categorylist.css
index ed8bd0fc..8908bd89 100644
--- a/categorylist.css
+++ b/categorylist.css
@@ -12,8 +12,6 @@ body {
 .categorylist-wrapper {
     width: 100%;
     overflow-x: scroll;
-    position: absolute;
-    top: 8vh;
     right: 0;
     z-index: 500;
 }
@@ -29,10 +27,9 @@ body {
     background-color: rgb(255, 253, 253);
     position: relative;
     padding: 0;
-    padding: 0 4%;
+    padding: 1% 4%;
     width: 100%;
     min-width: 1000px;
-    box-shadow: 0 0 10px rgb(87, 110, 172);
 }
 
 .categories > li {
@@ -43,37 +40,28 @@ body {
 
 .categories > li > ul {
     display: none;
-    position: fixed;
+    /* position: fixed; */
     background-color: rgb(201, 224, 252) !important;
     padding: 15px;
     gap: 15px 5px;
     flex-wrap: wrap;
-    width: 90vw;
     height: max-content;
     max-height: 100vh;
-    padding: 0 10%;
     top: 20vh; /* Adjust this value to move the subcategory menu down */
     left: 70px;
     font-size: 14px;
-    overflow: hidden;
-    z-index: 500;
-}
-
-.categories > li:hover > ul {
-    display: flex;
-    justify-content: left;
-    align-items: stretch;
 }
 
 .categories > li:hover {
-    background-color: #bac8f6;
+    background-color: #ffffff;
     transition: all 0.5s;
     border-radius: 20px;
 }
 
 .categories > li:hover > ul > li {
     margin: 15px 0;
-    flex: 1 1 200px;
+    position: relative;
+    /* flex: 1 1 200px; */
     list-style-type: none;
 }
 
@@ -98,3 +86,96 @@ body {
     margin-right: 10px;
     vertical-align: middle;
 }
+
+/* dropdown Nav bar */
+.dropdownbox {
+    /* left:20%; */
+    position: absolute;
+    top:23%;
+    width:240px;
+    /* height:528px; */
+    box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
+    border-radius: 8px;
+    background-color: #fff;
+    color: rgb(43, 42, 42);
+    line-height: 20px;
+    font-size: 12px;
+    z-index: 1000;
+}
+.grocery{
+    left:10%;
+}
+.electronics{
+    left:20%;
+}
+.clothing{
+    left:30%;
+}
+.home-furniture{
+    left:50%;
+}
+.beauty{
+    left:65%;
+}
+.travel{
+    left:70%;
+}
+.sports-stationary{
+    left:80%;
+}
+
+.dropdownbox > div > div + div{
+    display: none;
+    position: absolute;
+    top:0%;
+    width:240px;
+    left: 100%;
+    box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
+    border-radius: 8px;
+    background-color: #fff;
+    line-height: 20px;
+}
+
+.dropdownbox > div:hover > div + div{
+    display: block;
+}
+
+.sidearrow{
+    display: none;
+    position: absolute;
+    right: 30px;
+    height: 6px;
+    width: 6px;
+    margin: 15px 0 15px 0;
+    border-color: #111112;
+    border-style: solid;
+    border-width: 0 1px 1px 0;
+    transform-origin: 50% 50%;
+    transform: translateY(75%) rotate(-45deg);
+}
+.dropdownbox > div{
+    display: flex;
+}
+.dropdownbox > div > div:not(.subdropdown){
+    padding: 12px 16px;
+}
+.dropdownbox > div:hover > div:not(.subdropdown){
+    font-weight:bold;
+}
+.dropdownbox > div:hover{
+    background-color:#cbdcf7;
+}
+.dropdownbox > div:hover >.sidearrow{
+    display: block;
+}
+.subdropdown > div:first-child {
+    font-weight: bold;
+}
+.dropdownbox > div > div > div{
+    padding: 12px 16px;
+    font-size: 12px;
+}
+
+.subdropdown > div:hover{
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/categorylist.js b/categorylist.js
index 5d6fd623..f99557a8 100644
--- a/categorylist.js
+++ b/categorylist.js
@@ -196,7 +196,7 @@ $(document).ready(function () {
     const categoriesList = $("#categories");
 
     function createCategoryItem(categoryData) {
-        const categoryItem = $("<li>");
+        const categoryItem = $("<li>").attr('id', `${categoryData.id}`);
         const categoryLink = $("<a>").attr("href", `#${categoryData.id}`).text(categoryData.name);
 
         // Adding images to the main category items only
@@ -205,15 +205,16 @@ $(document).ready(function () {
 
         categoryItem.append(categoryLink);
 
-        const subcategoriesList = $("<ul>");
+        const subcategoriesList = $("<div>").attr("class", `dropdownbox ${categoryData.id}`);
+
 
         if (!categoryData.subcategories) {
-            const singleItem = $("<li>").text(categoryData.name);
+            const singleItem = $("<div>").text(categoryData.name);
             subcategoriesList.append(singleItem);
         } else {
-            $.each(categoryData.subcategories, function(index, subcategoryData) {
+            $.each(categoryData.subcategories, function (index, subcategoryData) {
                 if (subcategoryData && typeof subcategoryData === "string") {
-                    const subcategoryItem = $("<li>").text(subcategoryData);
+                    const subcategoryItem = $("<div>").text(subcategoryData);
                     subcategoriesList.append(subcategoryItem);
                 } else if (subcategoryData) {
                     const subcategoryItem = createSubcategoryItem(subcategoryData);
@@ -222,27 +223,57 @@ $(document).ready(function () {
             });
         }
 
-        categoryItem.append(subcategoriesList);
+        categoryItem.on('mouseenter', function (event) {
+            $('.categorylist-wrapper').append(subcategoriesList);
+            //categoryItem.append(subcategoriesList);
+            subcategoriesList.show();
+        });
+
+        categoryItem.on('mouseleave', function (event) {
+
+            // subcategorieslist should not hide when mouse leave to subdropdown
+            const relatedTarget = event.relatedTarget;
+            if (!relatedTarget.closest(`.${event.target.id}`)) {
+                $(`.${event.target.id}`).remove();
+                subcategoriesList.hide();
+            }
+        });
+
+        if (subcategoriesList && subcategoriesList.length) {
+            subcategoriesList.on('mouseleave', function (event) {
+                console.log(event.relatedTarget);
+                subcategoriesList.hide();
+                $(`.${categoryData.id}`).remove();
+            });
+        } else {
+            console.log("subcategoriesList is not defined or is empty.");
+        }
+
         return categoryItem;
     }
 
     function createSubcategoryItem(subcategoryData) {
-        const subcategoryItem = $("<li>").text(subcategoryData.name);
+        const subcategoryItem = $("<div>");
+        subcategoryItem.append($("<div>").text(subcategoryData.name));
         if (subcategoryData.subcategories) {
-            const subsubcategoriesList = $("<ul>");
-            $.each(subcategoryData.subcategories, function(index, subsubcategoryData) {
-                const subsubcategoryItem = $("<li>").text(subsubcategoryData);
+            const subsubcategoriesList = $("<div>").attr({ "id": subcategoryData.id, "class": "subdropdown" });
+            subsubcategoriesList.append($("<div>").text(`More in ${subcategoryData.name}`));
+
+            $.each(subcategoryData.subcategories, function (index, subsubcategoryData) {
+                const subsubcategoryItem = $("<div>").text(subsubcategoryData);
                 subsubcategoriesList.append(subsubcategoryItem);
             });
             subcategoryItem.append(subsubcategoriesList);
         }
+        subcategoryItem.append($("<span>").attr('class', 'sidearrow'));
         return subcategoryItem;
     }
 
-    categoriesData.forEach(function(categoryData) {
+    categoriesData.forEach(function (categoryData) {
         const categoryItem = createCategoryItem(categoryData);
         categoriesList.append(categoryItem);
     });
+
 });
 
 
diff --git a/index.html b/index.html
index 2766fd46..2ed8a9d3 100644
--- a/index.html
+++ b/index.html
@@ -113,14 +113,20 @@
         
 
         #navbar-container {
-          position: fixed;
+          position: sticky;
           top: 0;right: 0;
           width: 100%;
           height: 10vh;
           z-index: 600;
         }
+        #category-list{
+          margin-top: 1%;
+          padding: 0 2% 0 2%;
+          width: 100%;
+        }
         #carousal {
-          padding: 18vh 2% 15px;
+          /* padding: 18vh 2% 15px; */
+          padding: 0 2% 0 2%;
           width: 100%;
         }
         #top-deals {
@@ -157,9 +163,10 @@
 .footer-section {
     animation: slideInFromLeft 0.5s ease forwards;
 }
-#carouselExampleIndicators{
+/* #carouselExampleIndicators{
   padding: 60px;
-}.container {
+} */
+.container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 2rem 1rem;

From 701dd53bf928d4aef2972caecf8cc6dbebabb013 Mon Sep 17 00:00:00 2001
From: MaragathaMeenakshi <mahiriya2019@gmail.com>
Date: Sat, 8 Jun 2024 20:34:21 +0530
Subject: [PATCH 2/4] Change made in dropdown in new ui .

---
 css/index.css        | 136 +++++++++++++++++++++++++++++++++----------
 js/categoryData.json |  53 +++++++++++++----
 js/categoryjs.js     |  77 ++++++++++++++++++++++--
 3 files changed, 219 insertions(+), 47 deletions(-)

diff --git a/css/index.css b/css/index.css
index 5c59bbae..73b3423f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -26,6 +26,7 @@ body {
 
 #categorylist-wrapper {
   margin-top: 8px;
+  width: -webkit-fill-available;
 }
 
 @media screen and (max-width: 770px) {
@@ -59,10 +60,9 @@ body {
   width: 100%;
   min-width: 1000px;
   box-shadow: 0 0 10px rgb(87, 110, 172);
-
 }
 
-.categories>li {
+ .categories>li {
   position: static;
   display: inline-block;
   padding: 20px 15px;
@@ -71,6 +71,8 @@ body {
 
 .categories li a {
   text-decoration: none;
+  color: black;
+  font-weight: 500;
 }
 
 .categories>li>ul {
@@ -90,33 +92,6 @@ body {
   z-index: 500;
 }
 
-.categories>li:hover>ul {
-  display: flex;
-  justify-content: left;
-  align-items: stretch;
-}
-
-.categories>li:hover {
-  background-color: #bac8f6;
-  transition: all 0.5s;
-  border-radius: 20px;
-}
-
-.categories>li:hover>ul>li {
-  margin: 15px 0;
-  flex: 1 1 200px;
-  list-style-type: none;
-}
-
-.categories>li:hover>ul>li li {
-  list-style-type: none;
-  margin: 15px 0;
-  color: rgb(88, 116, 194);
-}
-
-.categories>li:hover>ul li li:hover {
-  color: rgb(112, 112, 166);
-}
 .categories li ul li img{
   display: none;
 }
@@ -148,6 +123,105 @@ body {
   color: #333333;
 }
 
+.dropdownbox {
+  /* left:20%; */
+  display: none;
+  position: absolute;
+  top:30%;
+  width:240px;
+  /* height:528px; */
+  box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
+  border-radius: 8px;
+  background-color: #fff;
+  color: rgb(43, 42, 42);
+  line-height: 20px;
+  font-size: 12px;
+  z-index: 1000;
+}
+.grocery{
+  left:5%;
+}
+.Mobiles{
+  left: 10%;
+}
+.Fashion{
+  left:20%;
+}
+.electronics{
+  left:30%;
+}
+.home-furniture{
+  left:40%;
+}
+.appliances{
+  left: 50%;
+}
+.travel{
+  left:65%;
+}
+.beauty{
+  left:70%;
+}
+.twowheelers{
+  left:80%;
+}
+
+.dropdownbox > div > div + div{
+  display: none;
+  position: absolute;
+  top:0%;
+  width:240px;
+  left: 100%;
+  box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
+  border-radius: 8px;
+  background-color: #fff;
+  line-height: 20px;
+}
+
+.dropdownbox > div:hover > div + div{
+  display: block;
+}
+
+.sidearrow{
+  display: none;
+  position: absolute;
+  right: 30px;
+  height: 6px;
+  width: 6px;
+  margin: 15px 0 15px 0;
+  border-color: #111112;
+  border-style: solid;
+  border-width: 0 1px 1px 0;
+  transform-origin: 50% 50%;
+  transform: translateY(75%) rotate(-45deg);
+}
+.dropdownbox > div{
+  display: flex;
+}
+.dropdownbox > div > div:not(.subdropdown){
+  padding: 12px 16px;
+}
+.dropdownbox > div:hover > div:not(.subdropdown){
+  font-weight:bold;
+}
+.dropdownbox > div:hover{
+  background-color:#cbdcf7;
+}
+.dropdownbox > div:hover >.sidearrow{
+  display: block;
+}
+.subdropdown > div:first-child {
+  font-weight: bold;
+}
+.dropdownbox > div > div > div{
+  padding: 12px 16px;
+  font-size: 12px;
+}
+
+.subdropdown > div:hover{
+  font-weight: bold;
+}
+
 /*adding transition property to the images of the cateogory-grid section*/
 #category-grid img {
   transition: transform 0.3s ease-in-out;
@@ -180,12 +254,12 @@ body {
   width: 100%;
   height: auto;
   transition: transform 0.3s ease-in-out;
-}
+} 
 
 #img-box img:hover {
   transform: scale(1.2);
   opacity: 0.82;
-}
+} */
 
 /* product best for you */
 #s1-product .products {
diff --git a/js/categoryData.json b/js/categoryData.json
index 8c1d5465..8b1097ee 100644
--- a/js/categoryData.json
+++ b/js/categoryData.json
@@ -49,20 +49,44 @@
         "icon": "fashion.png",
         "subcategories": [
             {
-                "id": "mens-clothing",
-                "name": "Men's Clothing",
+                "id": "mens-top_wear",
+                "name": "Men's Top Wear",
                 "icon": "fashion.png",
-                "subcategories": ["Shirts", "Pants", "Jackets"]
+                "subcategories": ["All" ,"Men's T-Shirts", "Men's Casual Shirts","Men's Kurtas","Men's Ethnic Sets", "Men's Blazers", "Men's Raincoat","Men's Formal Shirts", "Men's Pants", "Men's Jackets"]
             },
             {
-                "id": "womens-clothing",
-                "name": "Women's Clothing",
+                "id": "mens-bottom_wear",
+                "name": "Men's Bottom Wear",
                 "icon": "fashion.png",
-                "subcategories": ["Dresses", "Skirts", "Tops"]
+                "subcategories": ["All" ,"Men's Jeans", "Men's Tousers","Men's Track Pants","Men's Shorts", "Men's Cargo", "Men's Threefourths","Men's Dhoti", "Men's Ethnic Pyjama", "Men's Pyjama & Loungerpants"]
+            },
+            {
+                "id": "womens-ethnics",
+                "name": "Women's Ethnic",
+                "icon": "fashion.png",
+                "subcategories": ["All","Women Sarees","Women kurtas & Kurtis","Women Kurta Set & Salwar Suits","Women Gowns","Women Blouse","Ethnic Dresses", "Women Dupatta"]
+            },
+            {
+                "id": "mens-Footwear_wear",
+                "name": "Men's Footwear",
+                "icon": "fashion.png",
+                "subcategories": ["All", "Men's Sports Shoe","Mens Casual shoes", "Shoe Care"]
+            },
+            {
+                "id": "women-Footwear_wear",
+                "name": "Women Footwear",
+                "icon": "fashion.png",
+                "subcategories": ["All","Women Flats","Women Heels","Women Sports Shoe","Women Casual shoes", "Shoe Care"]
+            },
+            {
+                "id": "watches_and_accessories",
+                "name": "Watches And Accessories",
+                "icon": "fashion.png",
+                "subcategories": ["All","Men & Women Watches", "Men & Women Sunglasses","Wallets","Mens & Women Belts"]
             },
             {
                 "id": "kids-clothing",
-                "name": "Kids' Clothing",
+                "name": "Kids",
                 "icon": "fashion.png",
                 "subcategories": ["T-shirts", "Jeans", "Dresses"]
             }
@@ -125,8 +149,7 @@
         "id": "appliances",
         "name":"Appliances",
         "icon": "appliances.jpg",
-        "subcategories": [
-        ]
+        "subcategories": []
     },
     {
         "id": "travel",
@@ -166,8 +189,16 @@
         "name": "Two Wheelers",
         "icon": "twowheelers.png",
         "subcategories": [
-        
-
+            {
+                "id": "petrol-vehicles",
+                "name": "Petrol Vehicles",
+                "subcategories": ["TVS scooty","Honda"]
+            },
+            {
+                "id": "electric-vehicles",
+                "name": "Electric Vehicles",
+                "subcategories": ["Ola Electric S1","Ather 450X"]
+            }
         ]
     }
 ]
\ No newline at end of file
diff --git a/js/categoryjs.js b/js/categoryjs.js
index 50027403..508f7d4e 100644
--- a/js/categoryjs.js
+++ b/js/categoryjs.js
@@ -3,6 +3,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     function createCategoryItem(categoryData) {
         const categoryItem = document.createElement("li");
+        categoryItem.id = categoryData.id;
 
         const icon = document.createElement("img");
         icon.src = "img/" + categoryData.icon;
@@ -18,10 +19,11 @@ document.addEventListener("DOMContentLoaded", function () {
         categoryItem.appendChild(icon);
         categoryItem.appendChild(name);
 
-        const subcategoriesList = document.createElement("ul");
+        const subcategoriesList = document.createElement("div");
+        subcategoriesList.classList.add('dropdownbox', `${categoryData.id}`);
 
         if (!categoryData.subcategories) {
-            const singleItem = document.createElement("li");
+            const singleItem = document.createElement("div");
             const singleLink = document.createElement("a");
             singleLink.href = categoryData.name + "-/";
             singleLink.textContent = categoryData.name;
@@ -30,22 +32,87 @@ document.addEventListener("DOMContentLoaded", function () {
         } else {
             categoryData.subcategories.forEach(function (subcategoryData) {
                 if (subcategoryData && subcategoryData.name === undefined) {
-                    const singleItem = document.createElement("li");
+                    const singleItem = document.createElement("div");
                     singleItem.textContent = subcategoryData;
                     subcategoriesList.appendChild(singleItem);
                 } else if (subcategoryData) {
-                    const subcategoryItem = createCategoryItem(subcategoryData);
+                    const subcategoryItem = createSubcategoryItem(subcategoryData);
                     subcategoriesList.appendChild(subcategoryItem);
                 }
             });
         }
 
         categoryItem.appendChild(subcategoriesList);
-        // console.log(categoryItem);
+
+
+        categoryItem.addEventListener('mouseenter', function (event) {
+            document.querySelector('.categorylist-wrapper').appendChild(subcategoriesList);
+            subcategoriesList.style.display = 'block';
+        });
+
+        categoryItem.addEventListener('mouseleave', function (event) {
+            const relatedTarget = event.relatedTarget;
+            if (!relatedTarget || !relatedTarget.closest(`.${event.target.id}`)) {
+                document.querySelectorAll(`.${event.target.id}`).forEach(elem => elem.remove());
+                subcategoriesList.style.display = 'none';
+            }
+
+        });
+
+        if (subcategoriesList && subcategoriesList.childNodes.length) {
+            subcategoriesList.addEventListener('mouseenter', function(event){
+                subcategoriesList.style.display = 'block';
+            });
+            
+            subcategoriesList.addEventListener('mouseleave', function (event) {
+                subcategoriesList.style.display = 'none';
+                document.querySelectorAll(`.${categoryData.id}`).forEach(elem => elem.remove());
+            });
+        } else {
+            console.log("subcategoriesList is not defined or is empty.");
+        }
 
         return categoryItem;
     }
 
+    function createSubcategoryItem(subcategoryData) {
+        // Create the main subcategory item div
+        const subcategoryItem = document.createElement("div");
+
+        // Append the subcategory name
+        const subcategoryName = document.createElement("div");
+        subcategoryName.textContent = subcategoryData.name;
+        subcategoryName.className = subcategoryData.id;
+        subcategoryItem.appendChild(subcategoryName);
+
+        // If there are subcategories, create a subsubcategories list
+        if (subcategoryData.subcategories) {
+            const subsubcategoriesList = document.createElement("div");
+            subsubcategoriesList.id = subcategoryData.id;
+            subsubcategoriesList.className = "subdropdown";
+
+            const moreInText = document.createElement("div");
+            moreInText.textContent = `More in ${subcategoryData.name}`;
+            subsubcategoriesList.appendChild(moreInText);
+
+            // Iterate over subcategories and append each subsubcategory item
+            subcategoryData.subcategories.forEach(function (subsubcategoryData) {
+                const subsubcategoryItem = document.createElement("div");
+                subsubcategoryItem.textContent = subsubcategoryData;
+                subsubcategoriesList.appendChild(subsubcategoryItem);
+            });
+
+            subcategoryItem.appendChild(subsubcategoriesList);
+        }
+
+        // Append the side arrow span
+        const sideArrow = document.createElement("span");
+        sideArrow.className = 'sidearrow';
+        subcategoryItem.appendChild(sideArrow);
+
+        return subcategoryItem;
+    }
+
     fetch('js/categoryData.json')
         .then(response => response.json())
         .then(data => {

From 27d4b8abfd222c681c04481d39fbbd8524d4adc1 Mon Sep 17 00:00:00 2001
From: Margatha Meenakshi
 <113226919+MaragathaMeenakshi@users.noreply.github.com>
Date: Tue, 11 Jun 2024 19:13:12 +0530
Subject: [PATCH 3/4] Deleted categorylist.css

---
 categorylist.css | 182 -----------------------------------------------
 1 file changed, 182 deletions(-)
 delete mode 100644 categorylist.css

diff --git a/categorylist.css b/categorylist.css
deleted file mode 100644
index 47e4d702..00000000
--- a/categorylist.css
+++ /dev/null
@@ -1,182 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Roboto', sans-serif;
-}
-
-body {
-    background-color: rgb(255, 255, 255);
-}
-
-.categorylist-wrapper {
-    width: 100%;
-    overflow-x: scroll;
-    right: 0;
-    z-index: 500;
-}
-
-.categorylist-wrapper::-webkit-scrollbar {
-    display: none;
-}
-
-.categories {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    background-color: rgb(255, 253, 253);
-    position: relative;
-    padding: 0;
-    padding: 1% 4%;
-    width: 100%;
-    min-width: 1000px;
-}
-
-.categories > li {
-    display: inline-block;
-    padding: 20px 15px;
-    cursor: pointer;
-    margin:6px;
-}
-
-.categories > li > ul {
-    display: none;
-    /* position: fixed; */
-    background-color: rgb(201, 224, 252) !important;
-    padding: 15px;
-    gap: 15px 5px;
-    flex-wrap: wrap;
-    height: max-content;
-    max-height: 100vh;
-    top: 20vh; /* Adjust this value to move the subcategory menu down */
-    left: 70px;
-    font-size: 14px;
-}
-
-.categories > li:hover {
-    background-color: #ffffff;
-    transition: all 0.5s;
-    border-radius: 20px;
-}
-
-.categories > li:hover > ul > li {
-    margin: 15px 0;
-    position: relative;
-    /* flex: 1 1 200px; */
-    list-style-type: none;
-}
-
-.categories > li:hover > ul > li li {
-    list-style-type: none;
-    margin: 15px 0;
-    color: rgb(88, 116, 194);
-}
-
-.categories > li:hover > ul li li:hover {
-    color: rgb(112, 112, 166);
-}
-
-.categories a {
-    text-decoration: none;
-    color: black;
-}
-
-.categories > li > a > img {
-    width: 40px;
-    height: 40px;
-    margin-right: 10px;
-    vertical-align: middle;
-}
-
-/* dropdown Nav bar */
-.dropdownbox {
-    /* left:20%; */
-    position: absolute;
-    top:23%;
-    width:240px;
-    /* height:528px; */
-    box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
-    border-radius: 8px;
-    background-color: #fff;
-    color: rgb(43, 42, 42);
-    line-height: 20px;
-    font-size: 12px;
-    z-index: 1000;
-}
-.grocery{
-    left:10%;
-}
-.electronics{
-    left:20%;
-}
-.clothing{
-    left:30%;
-}
-.home-furniture{
-    left:50%;
-}
-.beauty{
-    left:65%;
-}
-.travel{
-    left:70%;
-}
-.sports-stationary{
-    left:80%;
-}
-
-.dropdownbox > div > div + div{
-    display: none;
-    position: absolute;
-    top:0%;
-    width:240px;
-    left: 100%;
-    box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
-    border-radius: 8px;
-    background-color: #fff;
-    line-height: 20px;
-}
-
-.dropdownbox > div:hover > div + div{
-    display: block;
-}
-
-.sidearrow{
-    display: none;
-    position: absolute;
-    right: 30px;
-    height: 6px;
-    width: 6px;
-    margin: 15px 0 15px 0;
-    border-color: #111112;
-    border-style: solid;
-    border-width: 0 1px 1px 0;
-    transform-origin: 50% 50%;
-    transform: translateY(75%) rotate(-45deg);
-}
-.dropdownbox > div{
-    display: flex;
-}
-.dropdownbox > div > div:not(.subdropdown){
-    padding: 12px 16px;
-}
-.dropdownbox > div:hover > div:not(.subdropdown){
-    font-weight:bold;
-}
-.dropdownbox > div:hover{
-    background-color:#cbdcf7;
-}
-.dropdownbox > div:hover >.sidearrow{
-    display: block;
-}
-.subdropdown > div:first-child {
-    font-weight: bold;
-}
-.dropdownbox > div > div > div{
-    padding: 12px 16px;
-    font-size: 12px;
-}
-
-.subdropdown > div:hover{
-    font-weight: bold;
-}
\ No newline at end of file

From ad514f456f097092282b7888085f5181af6551d3 Mon Sep 17 00:00:00 2001
From: Margatha Meenakshi
 <113226919+MaragathaMeenakshi@users.noreply.github.com>
Date: Tue, 11 Jun 2024 19:14:02 +0530
Subject: [PATCH 4/4] Delete categorylist.js

---
 categorylist.js | 279 ------------------------------------------------
 1 file changed, 279 deletions(-)
 delete mode 100644 categorylist.js

diff --git a/categorylist.js b/categorylist.js
deleted file mode 100644
index 5d21b007..00000000
--- a/categorylist.js
+++ /dev/null
@@ -1,279 +0,0 @@
-const categoriesData = [
-    {
-        "id": "grocery",
-        "name": "Grocery&Food",
-        "image": "images/grocery.webp", // Add the path to the image
-        "subcategories": [
-            {
-                "id": "fruits-vegetables",
-                "name": "Fruits & Vegetables",
-                "subcategories": ["Fresh Fruits", "Fresh Vegetables"]
-            },
-            {
-                "id": "dairy-eggs",
-                "name": "Dairy & Eggs",
-                "subcategories": ["Milk", "Cheese", "Eggs"]
-            },
-            {
-                "id": "bakery",
-                "name": "Bakery",
-                "subcategories": ["Bread", "Pastries", "Cakes"]
-            },
-            {
-                "id": "canned-packaged",
-                "name": "Canned & Packaged",
-                "subcategories": ["Canned Food", "Pasta", "Rice", "Snacks"]
-            },
-            {
-                "id": "desserts",
-                "name": "Desserts",
-                "subcategories": ["Cookies", "Ice-Cream"]
-            }
-        ]
-    },
-    {
-        "id": "electronics",
-        "name": "Electronics",
-        "image": "images/electronics.png",
-        "subcategories": [
-            {
-                "id": "mobile-phones",
-                "name": "Mobile Phones",
-                "subcategories": ["Smartphones", "Feature Phones"]
-            },
-            {
-                "id": "computers",
-                "name": "Computers",
-                "subcategories": ["Laptops", "Desktops", "Tablets"]
-            },
-            {
-                "id": "accessories",
-                "name": "Accessories",
-                "subcategories": ["Headphones", "Chargers", "Cases"]
-            }
-        ]
-    },
-    {
-        "id": "clothing",
-        "name": "Clothing",
-        "image": "images/clothing.png",
-        "subcategories": [
-            {
-                "id": "mens-clothing",
-                "name": "Men's Clothing",
-                "subcategories": ["Shirts", "Pants", "Jackets"]
-            },
-            {
-                "id": "womens-clothing",
-                "name": "Women's Clothing",
-                "subcategories": ["Dresses", "Skirts", "Tops"]
-            },
-            {
-                "id": "kids-clothing",
-                "name": "Kids' Clothing",
-                "subcategories": ["T-shirts", "Jeans", "Dresses"]
-            }
-        ]
-    },
-    {
-        "id": "home-furniture",
-        "name": "Home & Furniture",
-        "image": "images/home-furniture.png",
-        "subcategories": [
-            {
-                "id": "Kitchen-appliances",
-                "name": "Kitchen Appliances",
-                "subcategories": ["Blenders", "Microwaves", "Coffee Makers", "Pressure cookers", "Pans"]
-            },
-            {
-                "id": "furniture",
-                "name": "Furniture",
-                "subcategories": ["Sofas", "Tables", "Chairs", "Beds"]
-            },
-            {
-                "id": "home-decor",
-                "name": "Home Decor",
-                "subcategories": ["Rugs", "Lamps", "Mirrors", "Clocks"]
-            },
-            {
-                "id": "pet",
-                "name": "Pet Supplies",
-                "subcategories": ["Dogs", "Cats", "Fish and Aquatics"]
-            }
-        ]
-    },
-    {
-        "id": "beauty",
-        "name": "Beauty",
-        "image": "images/beauty.png",
-        "subcategories": [
-            {
-                "id": "face",
-                "name": "Face",
-                "subcategories": ["Foundation", "Concealer", "Powder"]
-            },
-            {
-                "id": "eyes",
-                "name": "Eyes",
-                "subcategories": ["Eyeshadow", "Mascara", "Eyeliner"]
-            },
-            {
-                "id": "lips",
-                "name": "Lips",
-                "subcategories": ["Lipstick", "Lip Gloss", "Lip Liner"]
-            }
-        ]
-    },
-    {
-        "id": "travel",
-        "name": "Travel",
-        "image": "images/travel.png",
-        "subcategories": [
-            {
-                "id": "luggage",
-                "name": "Luggage",
-                "subcategories": ["Suitcases", "Backpacks", "Duffel Bags"]
-            },
-            {
-                "id": "travel-accessories",
-                "name": "Accessories",
-                "subcategories": ["Travel Pillows", "Travel Adapters", "Luggage Tags"]
-            },
-            {
-                "id": "travel-essentials",
-                "name": "Travel Essentials",
-                "subcategories": ["Passport Holders", "Toiletry Bags", "Travel Bottles"]
-            }
-        ]
-    },
-    {
-        "id": "sports-stationary",
-        "name": "Sports",
-        "image": "images/sports-stationary.png",
-        "subcategories": [
-            {
-                "id": "fitness-equipment",
-                "name": "Fitness Equipment",
-                "subcategories": ["Dumbbells", "Resistance Bands", "Yoga Mats"]
-            },
-            {
-                "id": "sports-clothing",
-                "name": "Clothing",
-                "subcategories": ["Athletic Wear", "Running Shoes", "Sports Bras"]
-            },
-            {
-                "id": "sports-accessories",
-                "name": "Accessories",
-                "subcategories": ["Water Bottles", "Gym Bags", "Fitness Trackers"]
-            },
-            {
-                "id": "toys",
-                "name": "Toys",
-                "subcategories": [
-                    "Action Figures",
-                    "Board Games",
-                    "Dolls",
-                    "Puzzles",
-                    "Remote Control Toys"
-                ]
-            },
-            {
-                "id": "stationary",
-                "name": "Stationary",
-                "subcategories": [
-                    "Notebooks",
-                    "Pens",
-                    "Markers",
-                    "Folders",
-                    "Sticky Notes"
-                ]
-            }
-        ]
-    }
-];
-
-$(document).ready(function () {
-    const categoriesList = $("#categories");
-
-    function createCategoryItem(categoryData) {
-        const categoryItem = $("<li>").attr('id', `${categoryData.id}`);
-        const categoryLink = $("<a>").attr("href", `#${categoryData.id}`).text(categoryData.name);
-
-        // Adding images to the main category items only
-        const categoryImage = $("<img>").attr("src", `./assets/images/${categoryData.id}.webp`).attr("alt", categoryData.name);
-        categoryLink.prepend(categoryImage);
-
-        categoryItem.append(categoryLink);
-
-        const subcategoriesList = $("<div>").attr("class", `dropdownbox ${categoryData.id}`);
-
-
-        if (!categoryData.subcategories) {
-            const singleItem = $("<div>").text(categoryData.name);
-            subcategoriesList.append(singleItem);
-        } else {
-            $.each(categoryData.subcategories, function (index, subcategoryData) {
-                if (subcategoryData && typeof subcategoryData === "string") {
-                    const subcategoryItem = $("<div>").text(subcategoryData);
-                    subcategoriesList.append(subcategoryItem);
-                } else if (subcategoryData) {
-                    const subcategoryItem = createSubcategoryItem(subcategoryData);
-                    subcategoriesList.append(subcategoryItem);
-                }
-            });
-        }
-
-        categoryItem.on('mouseenter', function (event) {
-            $('.categorylist-wrapper').append(subcategoriesList);
-            //categoryItem.append(subcategoriesList);
-            subcategoriesList.show();
-        });
-
-        categoryItem.on('mouseleave', function (event) {
-
-            // subcategorieslist should not hide when mouse leave to subdropdown
-            const relatedTarget = event.relatedTarget;
-            if (!relatedTarget.closest(`.${event.target.id}`)) {
-                $(`.${event.target.id}`).remove();
-                subcategoriesList.hide();
-            }
-        });
-
-        if (subcategoriesList && subcategoriesList.length) {
-            subcategoriesList.on('mouseleave', function (event) {
-                console.log(event.relatedTarget);
-                subcategoriesList.hide();
-                $(`.${categoryData.id}`).remove();
-            });
-        } else {
-            console.log("subcategoriesList is not defined or is empty.");
-        }
-
-        return categoryItem;
-    }
-
-    function createSubcategoryItem(subcategoryData) {
-        const subcategoryItem = $("<div>");
-        subcategoryItem.append($("<div>").text(subcategoryData.name));
-        if (subcategoryData.subcategories) {
-            const subsubcategoriesList = $("<div>").attr({ "id": subcategoryData.id, "class": "subdropdown" });
-            subsubcategoriesList.append($("<div>").text(`More in ${subcategoryData.name}`));
-
-            $.each(subcategoryData.subcategories, function (index, subsubcategoryData) {
-                const subsubcategoryItem = $("<div>").text(subsubcategoryData);
-                subsubcategoriesList.append(subsubcategoryItem);
-            });
-            subcategoryItem.append(subsubcategoriesList);
-        }
-        subcategoryItem.append($("<span>").attr('class', 'sidearrow'));
-        return subcategoryItem;
-    }
-
-    categoriesData.forEach(function (categoryData) {
-        const categoryItem = createCategoryItem(categoryData);
-        categoriesList.append(categoryItem);
-    });
-
-});
-
-