highlight the current page in the navbar
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m0s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m0s
This commit is contained in:
parent
380c50760d
commit
2053f7baef
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user