Feature: Header navigation component (#13)

* Create initial navbar for app layout * Add basic navbar styles and social link * Add logos and links for GitHub and LinkedIn * Add all social links and use lists to render all logos * Change font-weight of Navbar links to be 700 explicitly * Delete unnecessary comments from Navbar.module.css * Rename logo images to end in _logo and update references * Move links data in navbar.tsx outside of component
ufssd · Oct 25, 2023 · 4223944 · 4223944
1 parent 51f5471
commit 4223944
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 1 deletion.
diff --git a/public/discord_logo.svg b/public/discord_logo.svg
diff --git a/public/github_logo.svg b/public/github_logo.svg
diff --git a/public/instagram_logo.svg b/public/instagram_logo.svg
diff --git a/public/linkedin_logo.png b/public/linkedin_logo.png
diff --git a/public/ssd_logo.svg b/public/ssd_logo.svg
diff --git a/public/youtube_logo.png b/public/youtube_logo.png
diff --git a/src/app/Navbar.module.css b/src/app/Navbar.module.css
@@ -0,0 +1,36 @@
+.navbar {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.navbar nav {
+  display: flex;
+  gap: 10px;
+}
+
+.navbar a {
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+
+.navbar a:hover,
+.pageLinkOpen {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 5px;
+}
+
+.socialLinks {
+  margin-left: auto;
+  margin-right: 10px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.socialLinks img:hover {
+  transform: scale(1.05);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import "./globals.css";
 import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 
+import Navbar from "./navbar";
+
 const font = Poppins({
   weight: ["400", "700"],
   subsets: ["latin"],
@@ -19,7 +21,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={font.className}>{children}</body>
+      <body className={font.className}>
+        <Navbar />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/src/app/navbar.tsx b/src/app/navbar.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import styles from "./Navbar.module.css";
+
+const pageLinksData = [
+  {
+    name: "Home",
+    url: "/",
+  },
+  {
+    name: "About",
+    url: "/about",
+  },
+];
+
+const socialLinksData = [
+  {
+    name: "Discord",
+    url: "https://discord.gg/5SyB3yx",
+    icon: "/discord_logo.svg",
+  },
+  {
+    name: "GitHub",
+    url: "https://github.com/ufssd",
+    icon: "/github_logo.svg",
+  },
+  {
+    name: "LinkedIn",
+    url: "https://www.linkedin.com/company/ssduf",
+    icon: "/linkedin_logo.png",
+  },
+  {
+    name: "YouTube",
+    url: "https://www.youtube.com/@ufssd",
+    icon: "/youtube_logo.png",
+  },
+  {
+    name: "Instagram",
+    url: "https://www.instagram.com/uf.ssd/",
+    icon: "/instagram_logo.svg",
+  },
+];
+
+export default function Navbar() {
+  const pathname = usePathname();
+
+  const pageLinks = pageLinksData.map((link) => (
+    <Link
+      key={link.name}
+      href={link.url}
+      className={pathname === link.url ? styles.pageLinkOpen : ""}
+    >
+      {link.name}
+    </Link>
+  ));
+
+  const socialLinks = socialLinksData.map((link) => (
+    <a
+      key={link.name}
+      target="_blank"
+      rel="noopener noreferrer"
+      href={link.url}
+    >
+      <Image src={link.icon} alt={`${link.name} Logo`} width="32" height="32" />
+    </a>
+  ));
+
+  return (
+    <header className={styles.navbar}>
+      <Link href="/">
+        <Image src="/ssd_logo.svg" alt="SSD Logo" width="50" height="50" />
+      </Link>
+      <nav>{pageLinks}</nav>
+      <div className={styles.socialLinks}>{socialLinks}</div>
+    </header>
+  );
+}