From 3d73fdff36804164c9304fcdce68e6dbb07fafbb Mon Sep 17 00:00:00 2001
From: aryansingh144 <aryansingh7910@gmail.com>
Date: Mon, 14 Oct 2024 13:26:22 +0530
Subject: [PATCH] Navbar completly fixed

---
 .env                          |   4 ++
 src/app/components/Navbar.tsx | 117 +++++++++++++++++++++++++---------
 2 files changed, 91 insertions(+), 30 deletions(-)
 create mode 100644 .env

diff --git a/.env b/.env
new file mode 100644
index 0000000..81c3310
--- /dev/null
+++ b/.env
@@ -0,0 +1,4 @@
+   NEXT_PUBLIC_SUPABASE_URL=https://twsbyjhyntfbcadywdkl.supabase.co
+   NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR3c2J5amh5bnRmYmNhZHl3ZGtsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mjg4ODM1NTYsImV4cCI6MjA0NDQ1OTU1Nn0.2rTbjf9CLJObMq3hHuYG_dY03mywwTHEzBt0Jz8iflI
+   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=youplay
+   NEXT_PUBLIC_CLOUDINARY_API_KEY=151273272649153
\ No newline at end of file
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
index efc78bd..f2fdee4 100644
--- a/src/app/components/Navbar.tsx
+++ b/src/app/components/Navbar.tsx
@@ -1,39 +1,96 @@
-import React from 'react'
+import React, { useState } from 'react';
 import Image from 'next/image';
-import Logo from '../public/Logo.png'
-import '@/styles.css'
+import Logo from '../public/Logo.png';
+import '@/styles.css';
+
 const Navbar = () => {
-    const navItems = [
-        { label: 'Home', id: 'home' },
-        { label: 'Team', id: 'team' },
-        { label: 'Projects', id: 'projects' },
-        { label: 'Events', id: 'events' },
-        { label: 'Notice', id: 'notice' },
-      ];
+  const [isOpen, setIsOpen] = useState(false);
+
+  const navItems = [
+    { label: 'Home', id: 'home' },
+    { label: 'Team', id: 'team' },
+    { label: 'Projects', id: 'projects' },
+    { label: 'Events', id: 'events' },
+    { label: 'Notice', id: 'notice' },
+  ];
+
   return (
-    <div className="navbar sticky top-0">
-  <div className="navbar-start">
-    <Image src ={Logo} alt='Logo' height={70} width={70}/>    
-  </div>
-  <div className="navbar-center hidden lg:flex">
-    <ul className="menu menu-horizontal px-1 text-white text-sm ">
-    {navItems.map((item) => (
+    <div className="navbar sticky top-0 bg-gray-800 flex justify-between items-center p-4">
+      <div className="navbar-start">
+        <Image src={Logo} alt="Logo" height={70} width={70} />
+      </div>
+      <div className="navbar-center hidden md:flex">
+        <ul className="menu flex space-x-4 text-white text-sm">
+          {navItems.map((item) => (
+            <li key={item.id}>
               <button
-                key={item.label}
-                className="block text-lg  leading-6 text-gray-200 transition-colors duration-300 p-2 rounded font-extralight"
-                id='NavItems'
+                className="text-lg leading-6 text-gray-200 transition-colors duration-300 p-2 rounded font-extralight hover:bg-gray-700"
+                id={item.id}
               >
                 {item.label}
               </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="navbar-end gap-5 hidden md:flex">
+        <a className="btn bg-transparent px-7 text-orange-400 border-orange-400 rounded-3xl hover:bg-orange-400 hover:text-white hover:border-none">
+          Log In
+        </a>
+        <a className="btn border-transparent bg-orange-400 px-7 text-white rounded-full hover:bg-transparent hover:text-orange-400 hover:border-orange-400">
+          Sign Up
+        </a>
+      </div>
+      <div className="navbar-end md:hidden">
+        <button
+          className="text-white focus:outline-none"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {/* Hamburger Icon */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-8 w-8"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 6h16M4 12h16m-7 6h7"
+            />
+          </svg>
+        </button>
+      </div>
+      {/* Mobile Menu */}
+      {isOpen && (
+        <div className="absolute top-16 left-0 right-0 bg-gray-800 p-4 md:hidden">
+          <ul className="flex flex-col space-y-2 text-white text-sm">
+            {navItems.map((item) => (
+              <li key={item.id}>
+                <button
+                  className="text-lg leading-6 text-gray-200 transition-colors duration-300 p-2 rounded font-extralight hover:bg-gray-700 w-full text-left"
+                  id={item.id}
+                  onClick={() => setIsOpen(false)} // Close menu on item click
+                >
+                  {item.label}
+                </button>
+              </li>
             ))}
-    </ul>
-  </div>
-  <div className="navbar-end gap-5 ">
-    <a className="btn bg-transparent px-7 text-orange-400 border-orange-400 rounded-3xl hover:bg-orange-400 hover:text-white hover:border-none">Log In</a>
-    <a className="btn border-transparent bg-orange-400 px-7 text-white rounded-full hover:bg-transparent hover:text-orange-400 hover:border-orange-400">Sign Up</a>
-  </div>
-</div>
-  )
-}
+          </ul>
+          <div className="flex flex-col mt-4 space-y-2">
+            <a className="btn bg-transparent px-7 text-orange-400 border-orange-400 rounded-3xl hover:bg-orange-400 hover:text-white hover:border-none">
+              Log In
+            </a>
+            <a className="btn border-transparent bg-orange-400 px-7 text-white rounded-full hover:bg-transparent hover:text-orange-400 hover:border-orange-400">
+              Sign Up
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
 
-export default Navbar
\ No newline at end of file
+export default Navbar;