Merge pull request #51 from kushalkumar1362/hamburger

Fixed hamburger menu functionality for mobile screen and resize the TimeWarp heading.
Akshatchaube01 · May 13, 2024 · cef987c · cef987c
2 parents e44753d + f71d7b0
commit cef987c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 deletions.
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -12,8 +12,21 @@ const Home = () => {
     });
   }, []);
 
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   const newTextStyles = {
-    fontSize: "100px",
+    fontSize: windowWidth < 768 ? "80px" : "100px",
     textAlign: "center",
     position: "absolute",
     top: "50%",

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,35 +1,46 @@
-import React from "react";
+import React, { useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 
 const Navbar = () => {
     const location = useLocation();
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleMenu = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const closeMenu = () => {
+        setIsOpen(false);
+    };
 
     const isActive = (path) => location.pathname === path ? 'text-[#00bfff] underline' : 'text-white';
 
     return (
         <nav className="z-50 h-16 flex justify-center sticky top-0 w-screen backdrop-filter backdrop-blur-lg bg-opacity-40 p-4">
-            <ul className="flex flex-col md:flex-row justify-center items-center list-none m-0 p-4 gap-x-0 md:gap-x-10 text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-3xl">
-                <li className="hover:underline block md:hidden">
-                    <span className="fa fa-bars"></span>
-                </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/" className={isActive('/')}>Home</NavLink>
-                </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/AboutUs" className={isActive('/AboutUs')}>About Us</NavLink>
-                </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/DemoSection" className={isActive('/DemoSection')}>Demo Section</NavLink>
-                </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/Models" className={isActive('/Models')}>Models</NavLink>
-                </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/ContactUs" className={isActive('/ContactUs')}>Contact Us</NavLink>
-                </li>
-            </ul>
+            <div className="flex items-center">
+                <button onClick={toggleMenu} className="hover:underline block md:hidden">
+                    <span className={`fa ${isOpen ? 'fa-times' : 'fa-bars'}`}></span>
+                </button>
+                <ul className={`flex flex-col md:flex-row justify-center items-center list-none m-0 p-4 gap-x-0 md:gap-x-10 text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-3xl ${isOpen ? 'block' : 'hidden'} md:flex`}>
+                    <li className="hover:underline" onClick={closeMenu}>
+                        <NavLink to="/" className={isActive('/')}>Home</NavLink>
+                    </li>
+                    <li className="hover:underline" onClick={closeMenu}>
+                        <NavLink to="/AboutUs" className={isActive('/AboutUs')}>About Us</NavLink>
+                    </li>
+                    <li className="hover:underline" onClick={closeMenu}>
+                        <NavLink to="/DemoSection" className={isActive('/DemoSection')}>Demo Section</NavLink>
+                    </li>
+                    <li className="hover:underline" onClick={closeMenu}>
+                        <NavLink to="/Models" className={isActive('/Models')}>Models</NavLink>
+                    </li>
+                    <li className="hover:underline" onClick={closeMenu}>
+                        <NavLink to="/ContactUs" className={isActive('/ContactUs')}>Contact Us</NavLink>
+                    </li>
+                </ul>
+            </div>
         </nav>
-
     );
 };
+
 export default Navbar;