navbar

piyush7833 · Feb 12, 2024 · 14cb102 · 14cb102
1 parent 2990ad4
commit 14cb102
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 27 deletions.
diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
@@ -7,6 +7,7 @@ import ModeBtn from '../partials/ModeBtn';
 import UserLinks from './UserLinks';
 import SearchIcon from '@mui/icons-material/Search';
 import Menu from './Menu';
+import MenuIcon from '@mui/icons-material/Menu';
 import { userAuthStore } from '@/utils/userStore';
 
 const links = [
@@ -22,24 +23,25 @@ const adminLinks = [
     { id: 5, title: "Orders", url: "/pages/admin/orders" },
     { id: 6, title: "Contact Us", url: "/pages/admin/contact" },
 ];
-const ownerLinks=[
+const ownerLinks = [
     { id: 1, title: "Add Shop", url: "/pages/add/shop" },
     { id: 2, title: "Add Product", url: "/pages/add/product" },
-];  
+];
 
 const Navbar = () => {
+    const [open, SetOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const [showSearchInput, setShowSearchInput] = useState(false);
-    const {role} = userAuthStore();
+    const { role } = userAuthStore();
     const handleSearchButtonClick = () => {
         setShowSearchInput(true);
     };
 
-    const handleSearchInputChange = (e:React.ChangeEvent<HTMLInputElement>) => {
+    const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setSearchQuery(e.target.value);
     };
 
-    const handleSearch = (e:React.FormEvent<HTMLFormElement>) => {
+    const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         console.log("Searching for:", searchQuery);
     };
@@ -48,47 +50,55 @@ const Navbar = () => {
         <div className='bg-red-500 p-4 h-fit  flex items-center justify-between border-b-2 border-b-red-600 '>
             <div>
                 <Link href='/'>
-                    <Image src={"/images/logo.png"} alt='logo' className='h-fit  w-20' width={10} height={10}/>
+                    <Image src={"/images/logo.png"} alt='logo' className='h-fit  w-20' width={10} height={10} />
                 </Link>
             </div>
             <div className='hidden md:flex gap-4 text-white text-lg items-center flex-wrap justify-end'>
-                <ModeBtn />
                 {showSearchInput && (
-                    <form className="relative" onSubmit={(e)=>handleSearch(e)}>
+                    <form className="relative" onSubmit={(e) => handleSearch(e)}>
                         <input
                             type="text"
                             placeholder="Search Products"
                             value={searchQuery}
-                            onChange={(e)=>handleSearchInputChange(e)}
+                            onChange={(e) => handleSearchInputChange(e)}
                             className="px-3 py-1 text-black rounded-md border-gray-400 focus:outline-none focus:border-gray-600"
                         />
-                        <button type='submit' className="absolute right-0 top-0 h-full px-2 bg-main disabled:cursor-not-allowed disabled:bg-gray-200 rounded-r-md hover:bg-green-300 focus:outline-none" disabled={searchQuery.length<=0}>
+                        <button type='submit' className="absolute right-0 top-0 h-full px-2 bg-main disabled:cursor-not-allowed disabled:bg-gray-200 rounded-r-md hover:bg-green-300 focus:outline-none" disabled={searchQuery.length <= 0}>
                             <SearchIcon />
                         </button>
                     </form>
                 )}
                 {!showSearchInput && (
                     <button onClick={handleSearchButtonClick} className="text-white hover:text-gray-200">
                         <SearchIcon />
+                        Search
                     </button>
                 )}
-                {links.map(item => (
-                    <Link key={item.id} href={item.url} className='hover:scale-105 hover:animate-bounce' >{item.title}</Link>
-                ))}
-                {role==="ShopOwner" && ownerLinks.map(item => (
-                    <Link key={item.id}
-                    href={item.url} className='hover:scale-105 hover:animate-bounce' >{item.title}</Link>
-                ))}
-                {role==="Admin" && adminLinks.map(item => (
-                    <Link key={item.id}
-                    href={item.url} className='hover:scale-105 hover:animate-bounce' >{item.title}</Link>
-                ))}
+                <ModeBtn />
                 <Link href='/pages/cart' className='hover:scale-105 hover:animate-bounce' ><CartIcon /></Link>
-                <UserLinks/>
+
+            <div className="relative">
+                <MenuIcon onClick={() => SetOpen(!open)} className='cursor-pointer text-white' />
+                {open && <div className="absolute w-40 right-0 top-8 border flex flex-col  shadow-md p-2 rounded-md bg-red-500 border-red-600">
+                    {links.map(item => (
+                        <Link key={item.id} href={item.url} className='hover:scale-105 hover:animate-bounce block'onClick={()=>{SetOpen(false)}} >{item.title}</Link>
+                    ))}
+                    {role === "ShopOwner" && ownerLinks.map(item => (
+                        <Link key={item.id}
+                            href={item.url} className='hover:scale-105 hover:animate-bounce block' onClick={()=>{SetOpen(false)}} >{item.title}</Link>
+                    ))}
+                    {role === "Admin" && adminLinks.map(item => (
+                        <Link key={item.id}
+                            href={item.url} className='hover:scale-105 hover:animate-bounce block'onClick={()=>{SetOpen(false)}} >{item.title}</Link>
+                    ))}
+                    <UserLinks />
+                </div>}
+            </div>
             </div>
             <div className='md:hidden'>
                 <Menu />
             </div>
+
         </div>
     );
 };

diff --git a/src/components/common/UserLinks.tsx b/src/components/common/UserLinks.tsx
@@ -9,11 +9,11 @@ const UserLinks = () => {
   }, [])
   const { name, userName } = userAuthStore()
   return (
-    <div className='gap-4 flex-col lg:flex-row flex'>
+    <div className='flex-col  flex'>
       {(name !== null || userName !== null) ?
-        <Link href='/pages/orders' className='hover:scale-105 hover:animate-bounce' >Orders</Link>
-        : <Link href='/pages/auth' className='hover:scale-105 hover:animate-bounce' >Login</Link>}
-      {(name !== null || userName !== null) && <Link href='/pages/profile' className='hover:scale-105 hover:animate-bounce'>{name?.split(" ")[0]}</Link>}
+        <Link href='/pages/orders' className='hover:scale-105 hover:animate-bounce ' >Orders</Link>
+        : <Link href='/pages/auth' className='hover:scale-105 hover:animate-bounce ' >Login</Link>}
+      {(name !== null || userName !== null) && <Link href='/pages/profile' className='hover:scale-105 hover:animate-bounce '>{name?.split(" ")[0]}</Link>}
     </div>
   )
 }

diff --git a/src/components/partials/ModeBtn.tsx b/src/components/partials/ModeBtn.tsx
@@ -8,7 +8,8 @@ const ModeBtn = () => {
   const { toggleTheme, themeMode } = useTheme();
   return (
     <div className="cursor-pointer text-white">
-    {themeMode==="dark"?<LightModeIcon onClick={toggleTheme}/>:<DarkModeIcon onClick={toggleTheme}/>}
+    {themeMode==="dark"?
+    <span onClick={toggleTheme}><LightModeIcon /> Light</span> : <span onClick={toggleTheme}><DarkModeIcon /> Dark</span> }
     </div>
   );
 };