NAvigation addtion

Yash-Ainapure · Oct 10, 2024 · 18550ba · 18550ba
1 parent 0d19f07
commit 18550ba
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 15 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Route, Routes, BrowserRouter as Router, Outlet } from "react-router-dom";
-import Navbar from "./appComponents/Navdar";
+import { Navbar } from "./appComponents/Navdar";
 import Hero from "./appComponents/Herosection";
 import Clubs from "./appComponents/Clubs";
 import Particles from "@/components/magicui/particles";
@@ -26,6 +26,7 @@ function App() {
 
   return (
     <Router>
+
       <Routes>
         <Route
           path="/"

diff --git a/frontend/src/appComponents/About.tsx b/frontend/src/appComponents/About.tsx
@@ -6,6 +6,8 @@ import { Accordion,AccordionContent,AccordionItem, AccordionTrigger } from "@/co
 import { Input } from "@/components/magicui/input"
 import { useState } from "react"
 import { useNavigate } from "react-router-dom"
+import { Navigation } from "./Navdar"
+//import { Navigation } from "./Navdar"
 
 
 const About =()=>{
@@ -19,19 +21,25 @@ const About =()=>{
         setEmail('')
       }
     return(
-        <div className="min-h-screen bg-gray-50 text-gray-800">
+        <div className="min-h-screen w-full bg-gray-50 text-gray-800">
 
-            <div className="relative bg-gray-900 text-white py-24 px-4 sm:px-6 lg:px-8 overflow-hidden">
-                <div className="absolute inset-0 bg-gradient-to-br from-gray-800 to-gray-900 animate-gradient"></div>
-                <div className="relative z-10 max-w-4xl mx-auto text-center">
-                    <h1 className="text-5xl font-extrabold mb-4">Welcome to DYPCET Clubs</h1>
+            <div className="relative z-10  bg-black  text-white py-24 px-4 sm:px-6 lg:px-8 overflow-hidden">
+                <div className="absolute inset-0 animate-gradient"></div>
+                <div className="relative z-10 max-w-4xl mx-auto text-center pt-20">
+                    <h1 className="text-5xl font-extrabold mb-4">Discover DYPCET Clubs</h1>
                     <p className="text-xl mb-8">Where Passion Meets Purpose</p>
                     <Button 
                     onClick={()=>route('/')}
                     className="bg-white text-gray-900 hover:bg-gray-200">Explore Out Clubs</Button>
                 </div>
             </div>
 
+            <Navigation/>
+
+
+
+
+
             <div className="max-w-6xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
 
                 <section className="mb-20"> 

diff --git a/frontend/src/appComponents/Navdar.tsx b/frontend/src/appComponents/Navdar.tsx
@@ -1,12 +1,18 @@
 import logo from "../assets/dypLogo.png";
+import { Dock, DockIcon } from "@/components/magicui/dock";
+import cross from "../assets/cross-icon.svg";
+import burger from "../assets/burger-menu.svg";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
 
 export type IconProps = React.HTMLAttributes<SVGElement>;
 
+// Navbar component
 const Navbar: React.FC<any> = ({ setShowLoginPage }) => {
   return (
-    <div className="relative flex items-center justify-between w-full px-4 py-4 text-slate-300 md:h-28 sm:px-6 lg:px-8">
-      {/* image-logo */}
-      <div className="z-10 flex items-center gap-2">
+    <div className="relative flex items-center justify-between w-full px-4 py-4 text-slate-300 bg-black md:h-28 sm:px-6 lg:px-8">
+      {/* Logo and Title at top-left corner */}
+      <div className="flex items-center gap-2">
         <img
           src={logo}
           alt="Logo"
@@ -16,16 +22,112 @@ const Navbar: React.FC<any> = ({ setShowLoginPage }) => {
           dypcetclubs.live
         </h2>
       </div>
+
+      {/* Club login button */}
       <div
-        onClick={() => {
-          setShowLoginPage(true);
-        }}
-        className="mr-[15vw] lg:mr-0 text-base rounded-md shadow-xl text-black bg-white border-white border p-2 font-semibold cursor-pointer hover:scale-105 transform transition-all duration-500 hover:bg-transparent hover:text-white"
+        onClick={() => setShowLoginPage(true)}
+        className="text-base rounded-md shadow-xl text-black bg-white border-white border p-2 font-semibold cursor-pointer hover:scale-105 transform transition-all duration-500 hover:bg-transparent hover:text-white"
       >
         Club login
       </div>
     </div>
   );
 };
 
-export default Navbar;
+// Navigation component
+const Navigation = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const navigate = useNavigate();
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <div>
+      {/* Logo and Title at top-left corner */}
+      <div className="absolute top-4 left-4 flex items-center gap-2 z-10">
+        <img
+          src={logo}
+          alt="Logo"
+          className="w-10 h-8 transition-all duration-500 transform cursor-pointer md:h-16 md:w-16 hover:scale-110"
+        />
+        <h2 className="text-xl font-bold transition-all duration-500 text-white transform cursor-pointer hover:text-white hover:scale-105">
+          dypcetclubs.live
+        </h2>
+      </div>
+
+      {/* Dock for larger screens */}
+      <div className="z-20 transform transition-all duration-500 fixed top-8 hover:left-[34%] left-[35%] w-[550px] hover:w-[600px]">
+        <Dock
+          direction="middle"
+          magnification={60}
+          distance={100}
+          className="hidden lg:flex items-center w-full text-base border rounded-lg shadow-xl bg-white/10 backdrop-blur-sm border-white/20"
+        >
+          <DockIcon>
+            <p className="flex items-center text-white font-semibold transition-all duration-300 transform size-full cursor-pointer" onClick={() => navigate("/")}>
+              Home
+            </p>
+          </DockIcon>
+          <DockIcon>
+            <p className="flex items-center text-white font-semibold transition-all duration-300 transform size-full cursor-pointer" onClick={() => navigate("/clubs")}>
+              Clubs
+            </p>
+          </DockIcon>
+          <DockIcon>
+            <p className="flex items-center text-white font-semibold transition-all duration-300 transform size-full cursor-pointer" onClick={() => navigate("/events")}>
+              Events
+            </p>
+          </DockIcon>
+          <DockIcon>
+            <p className="flex items-center text-white font-semibold transition-all duration-300 transform size-full cursor-pointer" onClick={() => navigate("/hiring")}>
+              Hiring
+            </p>
+          </DockIcon>
+          <DockIcon>
+            <p className="flex items-center text-white font-semibold transition-all duration-300 transform size-full cursor-pointer" onClick={() => navigate("/about")}>
+              About
+            </p>
+          </DockIcon>
+        </Dock>
+      </div>
+
+      {/* Mobile menu toggle button */}
+      <div className="z-20 fixed top-4 right-4 md:hidden">
+        <button onClick={toggleMenu}>
+          <img
+            src={isMenuOpen ? cross : burger}
+            width={50}
+            height={50}
+            alt={isMenuOpen ? "Close Menu" : "Open Menu"}
+          />
+        </button>
+      </div>
+
+      {/* Mobile menu */}
+      {isMenuOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center text-6xl font-bold font-pixeboy z-[1001] text-white">
+          <button className="absolute top-5 right-5" onClick={toggleMenu}>
+            <img
+              src={cross}
+              width={75}
+              height={75}
+              alt="Close Menu"
+            />
+          </button>
+
+          <ul className="flex flex-col gap-8 mt-12">
+            <li onClick={() => { navigate("/"); toggleMenu(); }} className="hover:underline cursor-pointer text-center">Home</li>
+            <li onClick={() => { navigate("/clubs"); toggleMenu(); }} className="hover:underline cursor-pointer text-center">Clubs</li>
+            <li onClick={() => { navigate("/events"); toggleMenu(); }} className="hover:underline cursor-pointer text-center">Events</li>
+            <li onClick={() => { navigate("/hiring"); toggleMenu(); }} className="hover:underline cursor-pointer text-center">Hiring</li>
+            <li onClick={() => { navigate("/about"); toggleMenu(); }} className="hover:underline cursor-pointer text-center">About</li>
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { Navbar, Navigation };