-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
51f5471
commit 4223944
Showing
9 changed files
with
129 additions
and
1 deletion.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |