RESTfulMC/Frontend/src/app/components/navbar.tsx

77 lines
3.0 KiB
TypeScript
Raw Normal View History

2024-04-16 13:40:25 -07:00
"use client";
import GitHubStarButton from "@/components/github-star-button";
2024-04-15 15:00:47 -07:00
import config from "@/config";
2024-04-15 19:31:55 -07:00
import { minecrafter } from "@/font/fonts";
2024-04-19 22:33:33 -07:00
import { cn } from "@/app/common/utils";
2024-04-15 19:53:23 -07:00
import Image from "next/image";
2024-04-15 15:00:47 -07:00
import Link from "next/link";
2024-04-16 13:40:25 -07:00
import { usePathname } from "next/navigation";
2024-04-17 16:04:15 -07:00
import { ReactElement } from "react";
2024-04-15 15:00:47 -07:00
/**
* The navbar for the site.
*
* @returns the navbar jsx
*/
2024-04-17 16:04:15 -07:00
const Navbar = (): ReactElement => {
const path: string = usePathname(); // Get the current path
return (
<nav className="fixed inset-x-0 flex h-16 px-3 xs:px-5 sm:px-12 bg-navbar-background transition-all transform-gpu z-50">
<div className="w-full flex justify-between items-center">
{/* App Branding - Left */}
2024-04-17 16:04:15 -07:00
<Link
className={cn(
"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu z-50",
2024-04-17 16:04:15 -07:00
minecrafter.className
)}
href="/"
>
{/* Small Screens */}
<Image
className="lg:hidden"
2024-04-20 10:43:14 -07:00
src="/media/logo.png"
2024-04-17 16:04:15 -07:00
alt="Site Logo"
2024-04-21 09:40:30 -07:00
width={38}
height={38}
2024-04-17 16:04:15 -07:00
/>
2024-04-15 19:53:23 -07:00
2024-04-17 16:04:15 -07:00
{/* Large Screens */}
<span className="hidden lg:flex">{config.siteName}</span>
</Link>
2024-04-16 13:40:25 -07:00
{/* Center - Links */}
<div className="ml-auto absolute right-3 xs:inset-x-0 md:left-28 lg:left-0 flex justify-center md:justify-start lg:justify-center">
<div className="flex gap-7">
{Object.entries(config.navbarLinks).map(
(link: [string, string], index: number) => {
const url: string = link[1]; // The href of the link
let active: boolean = path.startsWith(url); // Is this the active link?
return (
<Link
key={index}
className={cn(
"font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu",
active && "text-minecraft-green-4"
)}
href={url}
>
{link[0]}
</Link>
);
}
)}
</div>
2024-04-17 16:04:15 -07:00
</div>
2024-04-15 19:31:55 -07:00
{/* Social Buttons - Right */}
<div className="hidden md:flex">
{/* Star on Github <3 */}
<GitHubStarButton />
</div>
2024-04-17 16:04:15 -07:00
</div>
</nav>
);
2024-04-16 13:40:25 -07:00
};
2024-04-15 15:00:47 -07:00
export default Navbar;