highlight the current page on the navbar

This commit is contained in:
Jiajun Xu
2025-05-01 20:15:55 -07:00
parent 470a4cad86
commit 8b535c9bae
5 changed files with 37 additions and 13 deletions

View File

@ -1,22 +1,46 @@
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
export default function Navbar() { interface NavbarProps {
activePage?: string;
}
export default function Navbar({ activePage = "" }: NavbarProps) {
return ( return (
<> <>
<div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}> <div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
<div> <div>
<strong className={cn("sm:text-2xl md:text-4xl")}> <strong className={cn("sm:text-2xl md:text-4xl")}>
<a href="/">Resist Tech Monopolies</a> <a href="/">
Resist Tech Monopolies
</a>
</strong> </strong>
</div> </div>
<strong className={cn("sm:text-1xl flex gap-4 md:text-4xl")}> <strong className={cn("sm:text-1xl flex gap-4 md:text-4xl")}>
<a href="/GetInvolved/" className={cn("text-blue-500")}> <a
href="/GetInvolved/"
className={cn(
"text-blue-500",
activePage === "GetInvolved" && "border-b-2 border-blue-500"
)}
>
Get Involved Get Involved
</a> </a>
<a href="/PointsOfUnity/" className={cn("text-green-500")}> <a
href="/PointsOfUnity/"
className={cn(
"text-green-500",
activePage === "PointsOfUnity" && "border-b-2 border-green-500"
)}
>
Points of Unity Points of Unity
</a> </a>
<a href="/WhatWereWorkingOn/" className={cn("text-red-500")}> <a
href="/WhatWereWorkingOn/"
className={cn(
"text-red-500",
activePage === "WhatWereWorkingOn" && "border-b-2 border-red-500"
)}
>
What We're Working On What We're Working On
</a> </a>
</strong> </strong>
@ -25,8 +49,8 @@ export default function Navbar() {
<div className={cn("flex flex-row justify-between pb-8")}> <div className={cn("flex flex-row justify-between pb-8")}>
{[ {[
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
].map(() => ( ].map((key) => (
<> <div key={key}>
<a <a
href="https://www.flaticon.com/free-icons/computer" href="https://www.flaticon.com/free-icons/computer"
title="computer icons" title="computer icons"
@ -40,12 +64,12 @@ export default function Navbar() {
</a> </a>
<a <a
href="https://www.flaticon.com/free-icons/people" href="https://www.flaticon.com/free-icons/peopler"
title="people icons" title="people icons"
> >
<img src="/people.png" alt="people icon" width="30" height="30" /> <img src="/people.png" alt="people icon" width="30" height="30" />
</a> </a>
</> </div>
))} ))}
</div> </div>
</> </>

View File

@ -8,7 +8,7 @@ import "../styles/globals.css";
<Layout> <Layout>
<main class="flex min-h-screen flex-col justify-between"> <main class="flex min-h-screen flex-col justify-between">
<div> <div>
<Navbar /> <Navbar client:load activePage="GetInvolved" />
<div class="pl-4 pr-4"> <div class="pl-4 pr-4">
<h1 class="text-3xl font-semibold">Get Involved</h1> <h1 class="text-3xl font-semibold">Get Involved</h1>

View File

@ -8,7 +8,7 @@ import "../styles/globals.css";
<Layout> <Layout>
<main class="flex min-h-screen flex-col justify-between"> <main class="flex min-h-screen flex-col justify-between">
<div> <div>
<Navbar /> <Navbar client:load activePage="PointsOfUnity" />
<div class="pl-4 pr-4"> <div class="pl-4 pr-4">
<h1 class="text-3xl font-semibold">Points of Unity</h1> <h1 class="text-3xl font-semibold">Points of Unity</h1>
<p> <p>

View File

@ -8,7 +8,7 @@ import "../styles/globals.css";
<Layout> <Layout>
<main class="flex min-h-screen flex-col justify-between"> <main class="flex min-h-screen flex-col justify-between">
<div> <div>
<Navbar /> <Navbar client:load activePage="WhatWereWorkingOn" />
<div class="pl-4 pr-4"> <div class="pl-4 pr-4">
<h1 class="text-3xl font-semibold">What We're Working On</h1> <h1 class="text-3xl font-semibold">What We're Working On</h1>
<p>Pihole Workshop</p> <p>Pihole Workshop</p>

View File

@ -8,7 +8,7 @@ import "@/styles/globals.css";
<Layout> <Layout>
<main class="flex min-h-screen flex-col justify-between"> <main class="flex min-h-screen flex-col justify-between">
<div> <div>
<Navbar /> <Navbar client:load activePage="home" />
<div class="pl-4 pr-4"> <div class="pl-4 pr-4">
<p> <p>