MinecraftUtilities/Frontend
2
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Activity

highlight the current page in the navbar
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m0s
Details

Browse Source
This commit is contained in:
Lee 2024-04-18 11:22:43 +01:00
parent 380c50760d
commit 2053f7baef
4 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/href-button.tsx
View File

@ -1,3 +1,4 @@
import { cn } from "@/common/utils";
import Link from "next/link";
import { ReactElement } from "react";
@ -17,11 +18,16 @@ type ButtonProps = {
* open the link in a new tab.
*/
openInNewTab?: boolean;
/**
* The class names for the button.
*/
className?: string;
};
export function HrefButton({ title, url, openInNewTab }: ButtonProps): ReactElement {
export function HrefButton({ title, url, openInNewTab, className }: ButtonProps): ReactElement {
return (
<div className="w-fit rounded-lg">
<div className={cn("w-fit", className)}>
<Link href={url} target={openInNewTab ? "_blank" : ""}>
<p className="hover:text-primary transition-all">{title}</p>
</Link>

17
src/app/components/navbar.tsx
View File

@ -1,4 +1,7 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ReactElement } from "react";
import { HrefButton } from "./href-button";
import Logo from "./logo";
@ -30,6 +33,8 @@ const pages: Page[] = [
];
export default function NavBar(): ReactElement {
const path = usePathname();
return (
<div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85 h-12">
<Link href="/" className="flex items-center gap-2 pl-3 pr-1">
@ -41,7 +46,17 @@ export default function NavBar(): ReactElement {
<div className="flex gap-4">
{pages.map((page, index) => {
return <HrefButton key={index} title={page.name} url={page.url} openInNewTab={page.openInNewTab} />;
const isActive = path.includes(page.url);
return (
<HrefButton
className={isActive ? "text-primary" : ""}
key={index}
title={page.name}
url={page.url}
openInNewTab={page.openInNewTab}
/>
);
})}
</div>

2
src/app/components/theme-toggle-button.tsx
View File

@ -13,7 +13,7 @@ export function ToggleThemeButton(): ReactElement {
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
aria-label="Toggle Theme"
>
{theme === "dark" ? <SunIcon width={24} height={24} /> : <MoonIcon width={24} height={24} color="#000" />}
{theme == "dark" ? <SunIcon width={24} height={24} /> : <MoonIcon width={24} height={24} color="#000" />}
</button>
);
}

2
src/app/layout.tsx
View File

@ -51,7 +51,7 @@ export default function RootLayout({
<html className={Fonts.inter.className} lang="en" suppressHydrationWarning>
<head />
<body>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
<TooltipProvider>
<Toaster />
<Container>{children}</Container>