From 6f3c7181291c54a89762782da08d39021aee0735 Mon Sep 17 00:00:00 2001
From: hozayves <muhozayves2014@gmail.com>
Date: Wed, 12 Jun 2024 17:23:13 +0200
Subject: [PATCH] fix-ui Navbar ui design bug fix

---
 package.json                            |  2 +-
 src/components/navbar/Navbar.tsx        | 23 +++++++++++---
 src/containers/footer/SocialIcon.tsx    |  8 ++---
 src/containers/nav/NavbarComponents.tsx | 42 ++++++++++++-------------
 4 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 0cfb066..3be7aea 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,9 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.5",
     "@types/react-redux": "^7.1.33",
-    "lucide-react": "^0.387.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
     "sass": "^1.77.2"
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index cf0fda9..4516326 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -7,25 +7,38 @@ function Navbar() {
         const closeBtn = document.getElementById('close');
         const overlay = document.getElementById('overlay');
         const container = document.getElementById('humbergerContainer');
+        const hideScrollbar = () => {
+            document.body.style.overflow = 'hidden';
+        };
+
+        const showScrollbar = () => {
+            document.body.style.overflow = 'auto';
+        };
 
         closeBtn?.addEventListener('click', () => {
             overlay?.classList.add('-translate-x-full');
             container?.classList.add('-translate-x-full');
+            showScrollbar()
         });
 
         humbergurBtn?.addEventListener('click', () => {
             overlay?.classList.remove('-translate-x-full');
             container?.classList.remove('-translate-x-full');
+            hideScrollbar()
         });
-        overlay?.addEventListener('click', () => {
+        overlay?.addEventListener('click', (e) => {
+            if (e.target !== e.currentTarget) {
+                return;
+            }
             overlay?.classList.add('-translate-x-full');
             container?.classList.add('-translate-x-full');
+            showScrollbar()
         });
     }, []);
 
     return (
-        <div className='flex flex-col bg-blackColor md:bg-whiteColor md:text-blackColor text-whiteColor font-roboto w-screen 2xl:items-center relative'>
-            <div className="flex justify-between gap-2 flex-wrap p-3 md:p-4 xl:px-10 2xl:w-[1440px] ">
+        <div className='flex flex-col bg-blackColor md:bg-whiteColor md:text-blackColor text-whiteColor font-roboto w-full 2xl:items-center fixed'>
+            <div className="flex justify-between gap-2 flex-wrap p-3 md:p-4 xl:px-10 2xl:w-[1440px] relative">
                 <div className="flex items-center gap-3 order-1">
                     <div id="humbergurBtn" className="rounded-full p-1 text-txtColor active:bg-greenColor hover:bg-grayColor transition-all active:text-blackColor hover:text-blackColor md:hidden">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="size-7">
@@ -66,9 +79,9 @@ function Navbar() {
             </div>
             <DesktopNav />
             <div id="overlay" className=" w-full h-screen z-40 bg-overlay absolute -translate-x-full transition-transform ease-linear">
-                <div id="humbergerContainer" className="bg-whiteColor w-4/5 text-blackColor p-5 flex flex-col select-none h-screen overflow-auto -translate-x-full transition-transform duration-500 ease-in-out">
+                <div id="humbergerContainer" className="bg-whiteColor py-2 w-4/5 text-blackColor flex flex-col select-none h-screen overflow-auto -translate-x-full transition-transform duration-500 ease-in-out">
                     {/* close */}
-                    <div className=" flex justify-end">
+                    <div className=" flex justify-end p-2">
                         <div id="close" className="p-2 rounded-full active:bg-grayColor hover:bg-grayColor hover:cursor-pointer transition-all ease-in-out delay-75">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="size-8">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
diff --git a/src/containers/footer/SocialIcon.tsx b/src/containers/footer/SocialIcon.tsx
index dd5e2d6..8407b7a 100644
--- a/src/containers/footer/SocialIcon.tsx
+++ b/src/containers/footer/SocialIcon.tsx
@@ -1,14 +1,14 @@
-import { Facebook, Instagram, Twitter } from "lucide-react"
+import { FaFacebook, FaInstagram, FaXTwitter } from "react-icons/fa6";
 
 const SocialIcon = ({ name }: { name: string }) => {
 
     switch (name) {
         case "facebook":
-            return <Facebook size={24} />;
+            return <FaFacebook />;
         case "instagram":
-            return <Instagram size={24} />;
+            return <FaInstagram />;
         case "twitter":
-            return <Twitter size={24} />;
+            return <FaXTwitter />;
         default:
             return null;
     }
diff --git a/src/containers/nav/NavbarComponents.tsx b/src/containers/nav/NavbarComponents.tsx
index 7e10733..9a0a0e2 100644
--- a/src/containers/nav/NavbarComponents.tsx
+++ b/src/containers/nav/NavbarComponents.tsx
@@ -4,52 +4,52 @@ import education from '../../assets/education.png'
 import suppliment from '../../assets/supplement.png'
 import shoes from '../../assets/shoes.png'
 import electronics from '../../assets/electronics.png'
-import { Link } from 'react-router-dom'
+import { Link, NavLink } from 'react-router-dom'
 
 export function PopularCategory({ title }: { title: string }) {
     return (
         <>
-            <div className='py-3'>
+            <div className='p-3'>
                 <h2 className="capitalize font-bold text-2xl">{title}</h2>
             </div>
-            <NavLink icon={clothes} name='women clothes' />
-            <NavLink icon={watches} name='watches' />
-            <NavLink icon={education} name='education' />
-            <NavLink icon={suppliment} name='suppliment' />
-            <NavLink icon={shoes} name='shoes' />
-            <NavLink icon={electronics} name='electronics' />
+            <SidebarLink icon={clothes} to='/' name='women clothes' />
+            <SidebarLink icon={watches} to='/' name='watches' />
+            <SidebarLink icon={education} to='/' name='education' />
+            <SidebarLink icon={suppliment} to='/' name='suppliment' />
+            <SidebarLink icon={shoes} to='/' name='shoes' />
+            <SidebarLink icon={electronics} to='/' name='electronics' />
         </>
     )
 }
-export function NavLink({ icon, name }: { icon: string, name: string }) {
+export function SidebarLink({ icon, name, to }: { icon: string, name: string, to: string }) {
     return (
-        <div className="flex items-center justify-start gap-3 px-1 active:bg-grayColor">
+        <NavLink to={to} className="flex items-center justify-start gap-3 px-3 cursor-pointer active:bg-grayColor transition-all ease-in py-1 hover:bg-grayColor">
             <div className="rounded-md h-[50px] w-[50px] flex justify-center items-center">
                 <img src={icon} alt="" className="w-full rounded-md" />
             </div>
             <p className="leading-none font-medium text-base capitalize">{name}</p>
-        </div>
+        </NavLink>
     )
 }
 export function DesktopNav() {
     return (
-        <div className="bg-blackColor text-whiteColor hidden md:block w-screen">
+        <div className="bg-blackColor text-whiteColor hidden md:block w-full">
             <div className="flex justify-center items-center border-whiteColor">
-                <Navlink to="/" name='Plus' />
-                <Navlink to="/" name='Flash Sales' />
-                <Navlink to="/" name='Babies' />
-                <Navlink to="/" name='Fathers' />
-                <Navlink to="/" name='Electronics' />
-                <Navlink to="/" name='Beauty' />
-                <Navlink to="/" name='Sports' />
+                <DeskNavLink to="/" name='Plus' />
+                <DeskNavLink to="/" name='Flash Sales' />
+                <DeskNavLink to="/" name='Babies' />
+                <DeskNavLink to="/" name='Fathers' />
+                <DeskNavLink to="/" name='Electronics' />
+                <DeskNavLink to="/" name='Beauty' />
+                <DeskNavLink to="/" name='Sports' />
             </div>
         </div>
     )
 }
 
-function Navlink({ to, name }: { to: string, name: string }) {
+function DeskNavLink({ to, name }: { to: string, name: string }) {
     return (
-        <Link to={to} className={`px-5 py-2 hover:bg-whiteColor hover:text-blackColor transition-all delay-100 ease-linear`}>
+        <Link to={to} className={`px-5 py-2 cursor-pointer hover:bg-whiteColor hover:text-blackColor transition-all delay-100 ease-linear`}>
             {name}
         </Link>
     );