Merge pull request #189 from saketh-05/changes

Made several changes and fixed navbar responsiveness.
SUGAM-ARORA · Jun 2, 2024 · 6a7bb56 · 6a7bb56
2 parents 407a8ad + 41db471
commit 6a7bb56
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 67 deletions.
diff --git a/src/Components/Container.css b/src/Components/Container.css
@@ -79,6 +79,10 @@
   padding-top: 2px;
 }
 
+.search_icon{
+  display: none;
+}
+
 .topContainer .inputBox input:focus {
   border-width: 1.5px;
   border-color: #0db5cb;
@@ -155,14 +159,14 @@
 
 .profileContainer .menuContainer {
   position: absolute;
-  right: 10px;
+  right: 15px;
   top: 50px;
-  background: #19162c;
+  background: #100707d7;
   border-radius: 10px;
   width: 180px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
   z-index: 1;
-  transform: translateX(300px);
+  display:none;
   transition: transform 0.3s cubic-bezier(0.17, 0.81, 0.38, 1.39);
 }
 
@@ -255,13 +259,59 @@
     padding-left: 0;
   }
 
+  .topContainer{
+    position: relative;
+  }
+
   .topContainer .inputBox {
-    width: 120px;
-    z-index: 101;
+    width: 100%;
+    height: 4.5vh;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .topContainer .inputBox .search_icon{
+    display: flex;
+    background-color: #0db5cb;
+    align-items: center;
+    border-radius: 10px;
+    padding-left: 5%;
+    padding-right: 5%;
+    margin-right: 5px;
+  }
+
+  .topContainer .inputBox .search_input{
+    display: none;
+    width: 55%;
   }
 
   .topContainer .inputBox input:focus {
-    width: 320px;
+    width: 54%;
     transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
+
+  .topContainer .profileName {
+    display: none;
+  }
+
+  .dropdown-content {
+    position: absolute;
+    background-color: #19162c;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
+    width: 220px; 
+  }
+
+  .notification-item {
+    padding: 9px 0;
+    border-bottom: 1px solid #eee;
+  }
+
+  .notification-item:last-child {
+    border-bottom: none;
+  }
+
+  .search_icon:hover{
+    cursor: pointer;
+  }
 }
diff --git a/src/Components/Menu.css b/src/Components/Menu.css
@@ -123,5 +123,29 @@ menu ul li:hover .tooltip {
 @media only screen and (max-width: 525px) {
   menu {
     min-width: 68px;
+    width: auto;
+  }
+  menu ul{
+    display: none;
+    position: relative;
+    top: 50px;
+    right: 0;
+    width: 100%;
+    background-color: #19162c;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
+  }
+  menu img{
+    position: absolute;
+    left: 1px;
+    padding: 0;
+  }
+  menu ul li{
+    display: block;
+    padding: 10px;
+    border-bottom: 1px solid #eee;
+  }
+  .logo{
+    cursor: pointer;
   }
 }
diff --git a/src/Components/Menu.js b/src/Components/Menu.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import "./Menu.css";
 import logo from "../img/logo.png";
 import { Link } from "react-router-dom";
@@ -13,6 +13,9 @@ import {
 } from "react-icons/fa";
 
 function Menu() {
+
+  let toggle = false;
+
   useEffect(() => {
     const mainMenuLi = document
       .getElementById("mainMenu")
@@ -26,23 +29,50 @@ function Menu() {
     mainMenuLi.forEach((n) => n.addEventListener("click", changeActive));
   }, []);
 
+  const showDropDown = () => {
+    if(!toggle){
+      document.getElementById("mainMenu").style.display = "flex";
+      document.getElementById("lastMenu").style.display = "flex";
+      toggle = true;
+    } else{
+      document.getElementById("mainMenu").style.display = "none";
+      document.getElementById("lastMenu").style.display = "none";
+      toggle = false;
+    }
+  };
+
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 524);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 524);
+    };
+
+    window.addEventListener('resize', handleResize);
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
-    <menu className="fromLeft">
-      <img src={logo} alt="" />
-
-      <ul className="fromTop" id="mainMenu">
-        <Icon icon={<FaDelicious />} tooltip="Delicious" href="/" />
-        <Icon icon={<FaShoppingCart />} tooltip="Cart" href="/" />
-        <Icon icon={<FaWallet />} tooltip="Wallet" href="/" />
-        <Icon icon={<FaChartLine />} tooltip="Trending" href="/" />
-        <Icon icon={<FaRegClock />} tooltip="Speed" href="/" />
+    <menu className='fromLeft'>
+        <img src={logo} alt='icon' className="logo" id='logo' onClick={isMobile ? showDropDown : null}
+        style={{ cursor: isMobile ? 'pointer' : 'default' }}/>
+
+      <ul className='fromTop' id='mainMenu'>
+        <Icon icon={<FaDelicious />} tooltip='Delicious' href='/' />
+        <Icon icon={<FaShoppingCart />} tooltip='Cart' href='/' />
+        <Icon icon={<FaWallet />} tooltip='Wallet' href='/' />
+        <Icon icon={<FaChartLine />} tooltip='Trending' href='/' />
+        <Icon icon={<FaRegClock />} tooltip='Speed' href='/' />
       </ul>
 
-      <ul className="lastMenu">
-        <Link to="/settings">
-          <Icon icon={<FaCog />} tooltip="Settings" />
+      <ul className='lastMenu' id='lastMenu'>
+        <Link to='/settings'>
+          <Icon icon={<FaCog />} tooltip='Settings' />
         </Link>
-        <Icon icon={<FaSignOutAlt />} tooltip="Sign Out" href="/" />
+        <Icon icon={<FaSignOutAlt />} tooltip='Sign Out' href='/' />
       </ul>
     </menu>
   );
@@ -52,7 +82,7 @@ const Icon = ({ icon, tooltip, href }) => (
   <li>
     <a href={href}>
       {icon}
-      <span className="tooltip">{tooltip}</span>
+      <span className='tooltip'>{tooltip}</span>
     </a>
   </li>
 );