Merge pull request #51 from ComputerSocietyVITC/navbar

feat: Navbar done
ComputerSocietyVITC · Aug 10, 2024 · 261683b · 261683b
2 parents 984adab + db40db5
commit 261683b
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 151 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import Footer from "../components/footer/Footer";
 import type { Metadata } from "next";
 import "./globals.css";
-import Navbar from "@/components/navbar/Navbar";
+import { FloatingNav } from "@/components/navbar/FloatingNav";
 
 export const metadata: Metadata = {
   title: "Bitwars-24",
@@ -13,12 +13,35 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const navItems = [
+    {
+      name: "Home",
+      link: "#home",
+    },
+    {
+      name: "About Us",
+      link: "#about",
+    },
+    {
+      name: "Event",
+      link: "#events",
+    },
+    {
+      name: "Sponsors",
+      link: "#sponsors",
+    },
+    {
+      name: "FAQ",
+      link: "#faq",
+    },
+  ];
+
   return (
     <html lang="en" className="scroll-smooth overflow-x-hidden bg-black">
       <body className="bg-[url('/bg.svg')] bg-cover">
-        {/*<Navbar />*/}
+        <FloatingNav navItems={navItems} />
         {children}
-        {/*<Footer />*/}
+        <Footer />
       </body>
     </html>
   );

diff --git a/src/components/data/navLinks.ts b/src/components/data/navLinks.ts
diff --git a/src/components/navbar/FloatingNav.tsx b/src/components/navbar/FloatingNav.tsx
@@ -0,0 +1,77 @@
+"use client";
+import React, { useState } from "react";
+import {
+  motion,
+  AnimatePresence,
+  useScroll,
+  useMotionValueEvent,
+} from "framer-motion";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { Montserrat } from "next/font/google";
+
+const montserrat = Montserrat({ subsets: ["latin"] });
+
+export const FloatingNav = ({
+  navItems,
+  className,
+}: {
+  navItems: {
+    name: string;
+    link: string;
+  }[];
+  className?: string;
+}) => {
+  const { scrollYProgress } = useScroll();
+
+  const [visible, setVisible] = useState(false);
+
+  useMotionValueEvent(scrollYProgress, "change", (current) => {
+    if (typeof current === "number") {
+      let direction = current - scrollYProgress.getPrevious()!;
+
+      if (scrollYProgress.get() < 0.05) {
+        setVisible(false);
+      } else {
+        direction < 0 ? setVisible(true) : setVisible(false);
+      }
+    }
+  });
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        initial={{
+          opacity: 1,
+          y: -100,
+        }}
+        animate={{
+          y: visible ? 0 : -100,
+          opacity: visible ? 1 : 0,
+        }}
+        transition={{
+          duration: 0.2,
+        }}
+        className={cn(
+          "grid grid-flow-col max-w-fit fixed top-10 inset-x-0 mx-auto border-b border-x border-slate-700 dark:border-white/[0.2] rounded-full bg-gradient-to-b from-[#100e17] to-[#031c37] shadow-md z-[5000] px-6 py-4 items-center justify-center space-x-4",
+          className,
+          montserrat.className
+        )}
+      >
+        {navItems.map((navItem: any, idx: number) => (
+          <Link
+            key={`link=${navItem.name}`}
+            href={navItem.link}
+            className={cn(
+              "relative items-center flex text-slate-200 hover:text-white"
+            )}
+          >
+            <span className="block text-lg px-8 border bg-slate-900 py-2 border-white/[0.1] hover:border-cyan-700 rounded-full font-medium">
+              {navItem.name}
+            </span>
+          </Link>
+        ))}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
diff --git a/src/pages/main.tsx b/src/pages/main.tsx
@@ -4,19 +4,19 @@ import Timer from "@/components/timer/Timer";
 
 const Main: React.FC = () => {
   return (
-    <>
-
-      <div className="min-h-screen flex flex-col scale-[100%] justify-center">
-        <Image
-          src="/bitwarsLogo.png"
-          alt="logo"
-          height={500}
-          width={500}
-          className="z-30 justify-center align-center mx-auto relative top-10 md:scale-[80%] md:top-24"
-        />
-        <Timer />
-      </div>
-    </>
+    <div
+      className="min-h-screen flex flex-col scale-[100%] justify-center"
+      id="home"
+    >
+      <Image
+        src="/bitwarsLogo.png"
+        alt="logo"
+        height={500}
+        width={500}
+        className="z-30 justify-center align-center mx-auto relative top-10 md:scale-[80%] md:top-24"
+      />
+      <Timer />
+    </div>
   );
 };