feat: update layout and enhance SiteNavbar with top icon links

2026-03-10 22:37:03 +03:00
parent 4036aeacc1
commit ad432cfa5e
2 changed files with 169 additions and 120 deletions
@@ -49,7 +49,7 @@ export default function RootLayout({
  return (
    <html lang="en">
      <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 />
          <AnnouncementBar
            variant="branded"
@@ -22,6 +22,37 @@ import { SearchCommand } from "@/components/search-command";
 import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label";
 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) {
  return [
    "inline-flex border-b-2 pb-1 text-sm transition-colors",
@@ -42,6 +73,23 @@ export function SiteNavbar() {
  };

  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">
        <Link href="/" aria-label="Go to home" className="inline-flex items-center">
          <Avatar className="h-9 w-9 rounded-sm">
@@ -173,5 +221,6 @@ export function SiteNavbar() {

        <SearchCommand open={searchOpen} onOpenChange={setSearchOpen} />
      </header>
+    </div>
  );
 }