Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge navlinks styling

This commit is contained in:
andrzej 2024-06-24 11:55:31 +02:00
parent f6784cca29
commit ad613517f4
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/ui/navLinks.tsx
View File

@ -3,6 +3,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { ComponentProps } from "react"; import { ComponentProps } from "react";
import clsx from "clsx"; import clsx from "clsx";
import { twMerge } from "tailwind-merge";
function NavLink(props: ComponentProps<"div"> & { href: string }) { function NavLink(props: ComponentProps<"div"> & { href: string }) {
@ -22,12 +23,12 @@ export default function Navlinks(props: ComponentProps<"div">) {
<div className="text-secondary-foreground" > <div className="text-secondary-foreground" >
{ {
links.map(e => (<NavLink key={e.link} href={e.link} links.map(e => (<NavLink key={e.link} href={e.link}
className={clsx("text-xl font-black my-2 w-full pl-2 antialiased", className={twMerge(clsx("text-xl drop-shadow font-black my-2 w-full pl-2 antialiased text-secondary-foreground bg-secondary",
{ {
"text-primary-foreground bg-primary": pathname === e.link "text-primary-foreground bg-primary": pathname.includes(e.link)
} }
)} ))}
>{e.label}</NavLink >)) ><p className="drop-shadow-sm">{e.label}</p></NavLink >))
} }
</ div> </ div>
</div> </div>