refactor: Update navbar navigation links in nav-bar.tsx

isipisii · May 13, 2024 · 89ba9f2 · 89ba9f2
1 parent 56d2533
commit 89ba9f2
Showing 1 changed file with 22 additions and 30 deletions.
diff --git a/src/components/nav-bar.tsx b/src/components/nav-bar.tsx
@@ -4,7 +4,14 @@ import NavLogo from "../assets/nav-logo.svg";
 import Image from "next/image";
 import { motion } from "framer-motion";
 
+const navItems = ["About", "Projects", "Contact"];
+
 export default function Navbar() {
+
+  function handleScrollToTop() {
+    window.scrollTo({ top: 0 });
+  }
+
   return (
     <header className="fixed w-full backdrop-blur bg-[#151418]/20 z-20 flex justify-center">
       <nav className="px-8 flex justify-between items-center py-4 max-w-[1400px] w-full">
@@ -13,41 +20,26 @@ export default function Navbar() {
           whileInView={{ opacity: 1 }}
           viewport={{ once: true }}
           transition={{ duration: 0.2, delay: 0.2 }}
+          onClick={handleScrollToTop}
+          className="cursor-pointer active:scale-90 transition ease-in-out duration-100"
         >
           <Image src={NavLogo} width={60} height={60} alt="ale-logo" />
         </motion.div>
 
         <div className="flex gap-12">
-          <motion.a
-            initial={{ y: -20, opacity: 0 }}
-            whileInView={{ y: 0, opacity: 1 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.2, delay: 0.4 }}
-            href="#about"
-            className="text-textMuted hover:text-primary/80"
-          >
-            About
-          </motion.a>
-          <motion.a
-            initial={{ y: -20, opacity: 0 }}
-            whileInView={{ y: 0, opacity: 1 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.2, delay: 0.6 }}
-            href="#projects"
-            className="text-textMuted hover:text-primary/80"
-          >
-            Projects
-          </motion.a>
-          <motion.a
-            className="text-textMuted hover:text-primary/80"
-            initial={{ y: -20, opacity: 0 }}
-            whileInView={{ y: 0, opacity: 1 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.2, delay: 0.8 }}
-            href="#contact"
-          >
-            Contact
-          </motion.a>
+          {navItems.map((item, idx) => (
+            <motion.a
+              key={idx}
+              initial={{ y: -20, opacity: 0 }}
+              whileInView={{ y: 0, opacity: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.2, delay: 0.4 + idx * 0.2 }}
+              href={"#" + item.toLowerCase()}
+              className="text-textMuted hover:text-primary/80"
+            >
+              {item}
+            </motion.a>
+          ))}
         </div>
       </nav>
     </header>