hamburger

frontend/src/Pages/Herosection.jsx

@@ -9,9 +9,8 @@ import noticationsvg from '../assets/svg/notification.svg';
 import mapsvg from '../assets/svg/3dmap.svg';
 import schedulesvg from '../assets/svg/schedule.svg';
 import searchsvg from '../assets/svg/search.svg';
-import { TfiAlignLeft } from "react-icons/tfi";
 import { useNavigate } from 'react-router-dom';
-
+import HamburgerMenu from './hamburger';
 
 const Herosection = () => {
     const navigate = useNavigate();
@@ -24,8 +23,9 @@ const Herosection = () => {
     };
     return (
         <>
-        <div className='flex items-center justify-between pl-5 pr-5 md:pr-20 md:pl-20'>
-        <div><TfiAlignLeft className='fill-blue-800 h-[10vh] w-[6vh] font-extrabold ml-4 cursor-pointer'>  </TfiAlignLeft></div>
+
+        <div className='relative z-50 flex items-center justify-betweenv'>
+        <div><HamburgerMenu /></div>
         <div className='cursor-pointer'><img src={searchsvg} alt="" srcset="" /></div>
         </div>
         <h1 className='pl-4 text-2xl font-extrabold text-left text-white md:pl-40 '>Namaste !! Yatree </h1>

frontend/src/Pages/hamburger.jsx

@@ -0,0 +1,44 @@
+
+
+import React, { useState } from 'react';
+import 'tailwindcss/tailwind.css'; // Import Tailwind CSS
+
+const HamburgerMenu = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleMenu = () => {
+        setIsOpen(!isOpen);
+    };
+
+    return (
+        <div>
+            <nav role="navigation">
+                <div className="relative">
+                    <input
+                        type="checkbox"
+                        checked={isOpen}
+                        onChange={toggleMenu}
+                        id="menuToggle"
+                    />
+                    <label htmlFor="menuToggle" className="block cursor-pointer">
+                        <div className={`w-8 h-1 bg-black my-1 transition-transform ${isOpen ? 'transform rotate-45 translate-y-2' : ''}`}></div>
+                        <div className={`w-8 h-1 bg-black my-1 transition-opacity ${isOpen ? 'opacity-0' : ''}`}></div>
+                        <div className={`w-8 h-1 bg-black my-1 transition-transform ${isOpen ? 'transform -rotate-45 -translate-y-2' : ''}`}></div>
+                    </label>
+                    <div className="absolute top-0 left-0 w-8 h-8 cursor-pointer" onClick={toggleMenu}></div>
+                    <ul className={`absolute top-0 left-0 w-[70vw] h-[100vh] bg-white transition-transform transform ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}>
+                        {['Home', 'About', 'Info', 'Contact'].map((item, index) => (
+                            <a href="#" key={index} className="block p-4 border-b border-gray-200">
+
+                                <li>{item}</li>
+                            </a>
+                        ))}
+                    </ul>
+                </div>
+            </nav>
+        </div>
+    );
+
+};
+
+export default HamburgerMenu;