poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update layout and enhance SiteNavbar with top icon links

Browse Source
This commit is contained in:
poyrazavsever
2026-03-10 22:37:03 +03:00
parent 4036aeacc1
commit ad432cfa5e
2 changed files with 169 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layout.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className="min-h-dvh bg-background text-foreground antialiased"> <body className="min-h-dvh bg-background text-foreground antialiased">
<div className="mx-auto flex w-full max-w-4xl flex-col overflow-hidden px-4 py-8 sm:px-6 sm:py-10"> <div className="mx-auto flex w-full max-w-4xl flex-col overflow-hidden px-4 py-4 sm:px-6">
<SiteNavbar /> <SiteNavbar />
<AnnouncementBar <AnnouncementBar
variant="branded" variant="branded"
components/site-navbar.tsx
+49
View File
@@ -22,6 +22,37 @@ import { SearchCommand } from "@/components/search-command";
import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label"; import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label";
import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links"; import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
const TOP_ICON_LINKS = [
{
id: "ui-kit",
label: "UI Kit",
href: "https://ui.poyrazavsever.com",
icon: "mdi:palette-swatch-outline",
external: true,
},
{
id: "52-weeks-js",
label: "52 Weeks of JS",
href: "https://js.poyrazavsever.com",
icon: "mdi:code-json",
external: true,
},
{
id: "rss",
label: "RSS",
href: "/rss.xml",
icon: "mdi:rss",
external: false,
},
{
id: "cv",
label: "CV",
href: "/resume.pdf",
icon: "mdi:file-account-outline",
external: false,
},
] as const;
function getNavLinkClass(isActive: boolean) { function getNavLinkClass(isActive: boolean) {
return [ return [
"inline-flex border-b-2 pb-1 text-sm transition-colors", "inline-flex border-b-2 pb-1 text-sm transition-colors",
@@ -42,6 +73,23 @@ export function SiteNavbar() {
}; };
return ( return (
<div className="space-y-3">
<div className="flex items-center justify-end gap-2 border-b border-border pb-3">
{TOP_ICON_LINKS.map((item) => (
<Link
key={item.id}
href={item.href}
target={item.external ? "_blank" : undefined}
rel={item.external ? "noreferrer" : undefined}
aria-label={item.label}
title={item.label}
className="inline-flex h-8 w-8 items-center justify-center rounded-sm border border-border text-muted-foreground transition-colors hover:text-foreground"
>
<Icon icon={item.icon} width={16} height={16} />
</Link>
))}
</div>
<header className="flex items-center justify-between gap-3 border-b border-border pb-4"> <header className="flex items-center justify-between gap-3 border-b border-border pb-4">
<Link href="/" aria-label="Go to home" className="inline-flex items-center"> <Link href="/" aria-label="Go to home" className="inline-flex items-center">
<Avatar className="h-9 w-9 rounded-sm"> <Avatar className="h-9 w-9 rounded-sm">
@@ -173,5 +221,6 @@ export function SiteNavbar() {
<SearchCommand open={searchOpen} onOpenChange={setSearchOpen} /> <SearchCommand open={searchOpen} onOpenChange={setSearchOpen} />
</header> </header>
</div>
); );
} }