modify navbar site list

Author: YasInvolved

app/components/Navbar.tsx

@@ -6,6 +6,28 @@ import DevshLogo from "@/public/devsh_transparent_1920.png"
 import { ReactNode, useState } from "react"
 import { motion } from "framer-motion"
 
+type Link = {
+    name: string,
+    url: string
+}
+
+const links: Link[] = [
+    { name: "Home", url: "/" },
+    { name: "Nabla", url: "/nabla" },
+    { name: "Blog", url: "/blog" },
+    { name: "About", url: "/about" },
+    { name: "Services", url: "/services" },
+    { name: "Contact", url: "/contact" }
+]
+
+function DropdownIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
+        </svg>
+    )
+}
+
 function NavbarLink({children, href, onClick}: {children: ReactNode, href: string, onClick?: () => void}) {
     return (
         <li className="transition-colors duration-300 text-md text-neutral-400 hover:text-neutral-300">
@@ -25,14 +47,10 @@ export default function Navbar() {
                     <span className="text-md sm:text-2xl">DevSH Graphics Programming</span>
                 </Link>
                 <ul className="hidden sm:flex grow-0 flex-row gap-2">
-                    <NavbarLink href="/">Home</NavbarLink>
-                    <NavbarLink href="/nabla">Nabla</NavbarLink>
-                    <NavbarLink href="/blog">Blog</NavbarLink>
+                    {links.map((link, index) => <NavbarLink href={link.url} key={index}>{link.name}</NavbarLink>)}
                 </ul>
                 <button className={`transition-transform duration-300 sm:hidden ${isDropdownEnabled ? "rotate-180" : "rotate-0"}`} onClick={() => setIsDropdownEnabled(!isDropdownEnabled)}>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
-                    </svg>
+                    <DropdownIcon/>
                 </button>
             </div>
             {isDropdownEnabled && (
@@ -43,9 +61,7 @@ export default function Navbar() {
                     transition={{ duration: 0.5 }}
                     className="flex flex-col w-full py-4 text-center sm:hidden bg-black border-b border-[#181818] gap-1"
                 >
-                    <NavbarLink href="/" onClick={() => setIsDropdownEnabled(false)}>Home</NavbarLink>
-                    <NavbarLink href="/nabla" onClick={() => setIsDropdownEnabled(false)}>Nabla</NavbarLink>
-                    <NavbarLink href="/blog" onClick={() => setIsDropdownEnabled(false)}>Blog</NavbarLink>
+                    {links.map((link, index) => <NavbarLink href={link.url} key={index}>{link.name}</NavbarLink>)}
                 </motion.ul>
             )}
         </nav>