Improved a "more" dropdown menu doesn't diappear without a user's click

.env

@@ -0,0 +1,7 @@
+MONGODB_URI=mongodb://localhost:27017/flipkart
+SENDGRID_API_KEY=SG.your_sendgrid_api_key
+CLOUDINARY_NAME=your_cloudinary_name
+CLOUDINARY_API_KEY=your_cloudinary_api_key
+CLOUDINARY_API_SECRET=your_cloudinary_api_secret
+PORT=3000
+NODE_ENV=development

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://localhost:4000",
+  "proxy": "http://localhost:3000",
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
@@ -22,7 +22,7 @@
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",
-    "react-scripts": "5.0.0",
+    "react-scripts": "^5.0.0",
     "react-slick": "^0.28.1",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",

frontend/src/App.js

@@ -73,7 +73,7 @@ function App() {
   // disable right click
   window.addEventListener("contextmenu", (e) => e.preventDefault());
   window.addEventListener("keydown", (e) => {
-    if (e.keyCode == 123) e.preventDefault();
+    if (e.keyCode === 123) e.preventDefault();
     if (e.ctrlKey && e.shiftKey && e.keyCode === 73) e.preventDefault();
     if (e.ctrlKey && e.shiftKey && e.keyCode === 74) e.preventDefault();
   });

frontend/src/components/Admin/MainData.jsx

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import Chart from 'chart.js/auto'
 import { Doughnut, Line, Pie, Bar } from 'react-chartjs-2';
 import { getAdminProducts } from '../../actions/productAction';
 import { useSelector, useDispatch } from 'react-redux';

frontend/src/components/Cart/Shipping.jsx

@@ -24,7 +24,7 @@ const Shipping = () => {
 
     const [address, setAddress] = useState(shippingInfo.address);
     const [city, setCity] = useState(shippingInfo.city);
-    const [country, setCountry] = useState('IN');
+    const [country] = useState('IN');
     const [state, setState] = useState(shippingInfo.state);
     const [pincode, setPincode] = useState(shippingInfo.pincode);
     const [phoneNo, setPhoneNo] = useState(shippingInfo.phoneNo);

frontend/src/components/Layouts/Header/Header.jsx

@@ -1,11 +1,9 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import Searchbar from './Searchbar';
 import logo from '../../../assets/images/logo.png';
 import PrimaryDropDownMenu from './PrimaryDropDownMenu';
 import SecondaryDropDownMenu from './SecondaryDropDownMenu';
-import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -15,9 +13,6 @@ const Header = () => {
 
   const { cartItems } = useSelector(state => state.cart);
 
-  const [togglePrimaryDropDown, setTogglePrimaryDropDown] = useState(false);
-  const [toggleSecondaryDropDown, setToggleSecondaryDropDown] = useState(false);
-
   return (
 
     <header className="bg-primary-blue fixed top-0 py-2.5 w-full z-10">
@@ -37,26 +32,27 @@ const Header = () => {
 
         {/* <!-- right navs --> */}
         <div className="flex items-center justify-between ml-1 sm:ml-0 gap-0.5 sm:gap-7 relative">
-
           {isAuthenticated === false ?
             <Link to="/login" className="px-3 sm:px-9 py-0.5 text-primary-blue bg-white border font-medium rounded-sm cursor-pointer">Login</Link>
             :
-            (
-              <span className="userDropDown flex items-center text-white font-medium gap-1 cursor-pointer" onClick={() => setTogglePrimaryDropDown(!togglePrimaryDropDown)}>{user.name && user.name.split(" ", 1)}
-                <span>{togglePrimaryDropDown ? <ExpandLessIcon sx={{ fontSize: "16px" }} /> : <ExpandMoreIcon sx={{ fontSize: "16px" }} />}</span>
-              </span>
-            )
+            <div className="dropdown userDropDown flex items-center text-white font-medium gap-1 cursor-pointer">
+              <span>{user.name && user.name.split(" ", 1)}</span>
+              <ExpandMoreIcon sx={{ fontSize: "16px" }} />
+              <div className="dropdown-content">
+                <PrimaryDropDownMenu user={user} />
+              </div>
+            </div>
           }
 
-          {togglePrimaryDropDown && <PrimaryDropDownMenu setTogglePrimaryDropDown={setTogglePrimaryDropDown} user={user} />}
-
-          <span className="moreDropDown hidden sm:flex items-center text-white font-medium gap-1 cursor-pointer" onClick={() => setToggleSecondaryDropDown(!toggleSecondaryDropDown)}>More
-            <span>{toggleSecondaryDropDown ? <ExpandLessIcon sx={{ fontSize: "16px" }} /> : <ExpandMoreIcon sx={{ fontSize: "16px" }} />}</span>
-          </span>
-
-          {toggleSecondaryDropDown && <SecondaryDropDownMenu />}
+          <div className="dropdown moreDropDown hidden sm:flex items-center text-white font-medium gap-1 cursor-pointer px-4 px-2">
+            <span className="px-4 py-3.5">More</span> {/* 여기서 패딩을 추가했습니다. */}
+            <ExpandMoreIcon sx={{ fontSize: "16px" }} />
+            <div className="dropdown-content">
+              <SecondaryDropDownMenu />
+            </div>
+          </div>
 
-          <Link to="/cart" className="flex items-center text-white font-medium gap-2 relative">
+          <Link to="/cart" className="flex items-center text-white font-medium gap-2 relative ">
             <span><ShoppingCartIcon /></span>
             {cartItems.length > 0 &&
               <div className="w-5 h-5 p-2 bg-red-500 text-xs rounded-full absolute -top-2 left-3 flex justify-center items-center border">

frontend/src/components/Products/Products.jsx

@@ -17,7 +17,6 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import StarIcon from '@mui/icons-material/Star';
 import { categories } from '../../utils/constants';
 import MetaData from '../Layouts/MetaData';
-import { getRandomProducts } from '../../utils/functions';
 import { useLocation } from 'react-router-dom';
 
 const Products = () => {
@@ -38,7 +37,7 @@ const Products = () => {
     const [categoryToggle, setCategoryToggle] = useState(true);
     const [ratingsToggle, setRatingsToggle] = useState(true);
 
-    const { products, loading, error, productsCount, resultPerPage, filteredProductsCount } = useSelector((state) => state.products);
+    const { products, loading, error, resultPerPage, filteredProductsCount } = useSelector((state) => state.products);
     const keyword = params.keyword;
 
     const priceHandler = (e, newPrice) => {
@@ -59,6 +58,7 @@ const Products = () => {
         dispatch(getProducts(keyword, category, price, ratings, currentPage));
     }, [dispatch, keyword, category, price, ratings, currentPage, error, enqueueSnackbar]);
 
+
     return (
         <>
             <MetaData title="All Products | Flipkart" />

frontend/src/index.css

@@ -21,4 +21,58 @@ body {
     background-position: center 85%;
     background-repeat: no-repeat;
 }
-/* login signup sidebar bg image */
+/* login signup sidebar bg image */
+
+/* dropdown */ 
+/* Dropdown Button */
+.dropbtn {
+  background-color: #04AA6D;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+  display: block;
+  opacity: 1;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+  background-color: #3e8e41;
+  opacity: 0;
+}
+/* dropdown */