gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hover/focus accent styles to navbar links

Browse Source
This commit is contained in:
gbanyan
2025-11-17 23:21:29 +08:00
parent 586e0bfdbc
commit 1804138124
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/site-header.tsx
View File

@@ -11,13 +11,25 @@ export function SiteHeader() {
return ( return (
<header className="bg-white/80 backdrop-blur dark:bg-gray-950/80"> <header className="bg-white/80 backdrop-blur dark:bg-gray-950/80">
<div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100"> <div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100">
<Link href="/" className="font-semibold"> <Link
href="/"
className="font-semibold transition hover:text-accent focus-visible:outline-none focus-visible:text-accent"
>
{siteConfig.title} {siteConfig.title}
</Link> </Link>
<nav className="flex items-center gap-4 text-sm"> <nav className="flex items-center gap-4 text-sm">
<Link href="/blog">Blog</Link> <Link
href="/blog"
className="transition hover:text-accent focus-visible:outline-none focus-visible:text-accent"
>
Blog
</Link>
{pages.map((page) => ( {pages.map((page) => (
<Link key={page._id} href={page.url}> <Link
key={page._id}
href={page.url}
className="transition hover:text-accent focus-visible:outline-none focus-visible:text-accent"
>
{page.title} {page.title}
</Link> </Link>
))} ))}