feat: updated navbar, topbar and announcement bar

components/app-shell.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Icon } from "@iconify/react";
-import Link from "next/link";
 import { usePathname } from "@/i18n/routing";
 import { AnnouncementBar } from "poyraz-ui/organisms";
 import { SiteNavbar } from "@/components/site-navbar";
@@ -32,7 +31,6 @@ export function AppShell({ children }: AppShellProps) {
   }
 
   const localizedText = announcement ? getLocalizedValue(announcement.text, locale) : "";
-  const localizedActionLabel = announcement ? getLocalizedValue(announcement.actionLabel, locale) : "";
 
   return (
     <>
@@ -45,18 +43,6 @@ export function AppShell({ children }: AppShellProps) {
             variant="branded"
             dismissible={false}
             icon={<Icon icon="mdi:sparkles" width={16} height={16} />}
-            action={
-              localizedActionLabel && announcement.actionHref ? (
-                <Link
-                  href={announcement.actionHref}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-xs font-bold underline"
-                >
-                  {localizedActionLabel}
-                </Link>
-              ) : null
-            }
           >
             {localizedText}
           </AnnouncementBar>

components/language-switcher.tsx

@@ -2,6 +2,7 @@
 
 import { useLocale } from "next-intl";
 import { useRouter, usePathname } from "@/i18n/routing";
+import { Button } from "poyraz-ui/atoms";
 
 export function LanguageSwitcher() {
   const locale = useLocale();
@@ -14,13 +15,16 @@ export function LanguageSwitcher() {
   };
 
   return (
-    <button
+    <Button
+      type="button"
+      variant="glass"
+      size="icon-sm"
+      radius="sm"
       onClick={toggleLanguage}
-      className="inline-flex h-8 min-w-[36px] cursor-pointer items-center justify-center rounded-sm border border-border px-2 text-xs font-semibold text-muted-foreground transition-colors hover:text-foreground"
+      className="min-w-9 cursor-pointer !border-border/80 text-xs font-semibold hover:!border-border focus-visible:!border-border"
       aria-label={locale === "tr" ? "Switch to English" : "Türkçe'ye geç"}
-      title={locale === "tr" ? "Switch to English" : "Türkçe'ye geç"}
     >
       {locale === "tr" ? "EN" : "TR"}
-    </button>
+    </Button>
   );
 }

components/site-navbar.tsx

@@ -5,11 +5,12 @@ import dynamic from "next/dynamic";
 import { Link, usePathname } from "@/i18n/routing";
 import { useLocale, useTranslations } from "next-intl";
 import { LanguageSwitcher } from "@/components/language-switcher";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
-  Avatar,
+  Button,
-  AvatarFallback,
+  ButtonIcon,
-  AvatarImage,
+  ButtonLabel,
+  Logo,
   Separator,
 } from "poyraz-ui/atoms";
 import {
@@ -24,7 +25,15 @@ import {
   SheetContent,
   SheetTitle,
   SheetTrigger,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
 } from "poyraz-ui/molecules";
+import { NavbarTopBar, NavbarTopBarSection } from "poyraz-ui/organisms";
 import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label";
 import { getResumeHref, NAV_LINKS, SOCIAL_LINKS, TOP_ICON_LINKS } from "@/lib/links";
 
@@ -33,15 +42,66 @@ const SearchCommand = dynamic(
   { ssr: false },
 );
 
+const glassActionClassName =
+  "!border-border/80 hover:!border-border focus-visible:!border-border data-[state=open]:!border-border";
+
+const slowShineClassName = "[--poyraz-motion-duration-deliberate:1100ms]";
+
 function getNavLinkClass(isActive: boolean) {
   return [
-    "inline-flex border-b-2 pb-1 text-sm transition-colors",
+    "inline-flex border-b-2 pb-1 text-sm transition-colors md:border-0 md:pb-0",
     isActive
       ? "border-red-600 text-foreground"
       : "border-transparent text-foreground/55 hover:text-foreground",
   ].join(" ");
 }
 
+type ThemeMode = "light" | "dark";
+
+function applyTheme(theme: ThemeMode) {
+  document.documentElement.dataset.poyrazTheme = theme;
+  document.documentElement.style.colorScheme = theme;
+  localStorage.setItem("poyraz-theme", theme);
+}
+
+function getInitialTheme(): ThemeMode {
+  if (typeof window === "undefined") return "light";
+
+  const storedTheme = localStorage.getItem("poyraz-theme");
+  if (storedTheme === "dark" || storedTheme === "light") return storedTheme;
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function ThemeToggle() {
+  const [theme, setTheme] = useState<ThemeMode>(getInitialTheme);
+  const nextTheme = theme === "dark" ? "light" : "dark";
+  const label = theme === "dark" ? "Light mode" : "Dark mode";
+
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  return (
+    <Button
+      type="button"
+      variant="glass"
+      size="icon-sm"
+      radius="sm"
+      effect="shine"
+      aria-label={label}
+      className={`cursor-pointer ${glassActionClassName} ${slowShineClassName}`}
+      onClick={() => setTheme(nextTheme)}
+    >
+      <Icon
+        icon={theme === "dark" ? "mdi:white-balance-sunny" : "mdi:moon-waning-crescent"}
+        width={16}
+        height={16}
+      />
+    </Button>
+  );
+}
+
 export function SiteNavbar() {
   const pathname = usePathname();
   const [searchOpen, setSearchOpen] = useState(false);
@@ -54,27 +114,69 @@ export function SiteNavbar() {
     return pathname === href || pathname.startsWith(`${href}/`);
   };
 
+  const activeTab = NAV_LINKS.find((item) => isActiveLink(item.href))?.id;
+  const languageLabel = locale === "tr" ? "Switch to English" : "Türkçe'ye geç";
+
   return (
     <div className="space-y-3">
-      <div className="flex items-center justify-end gap-2 border-b border-border pb-3">
+      <TooltipProvider delayDuration={180}>
-        {TOP_ICON_LINKS.map((item) => {
+        <NavbarTopBar
-          const href = item.id === "cv" ? getResumeHref(locale) : item.href;
+          variant="secondary"
-          return (
+          className="border-0 bg-transparent p-0 shadow-none"
-            <a
+        >
-              key={item.id}
+          <NavbarTopBarSection align="end" className="gap-2">
-              href={href}
+            {TOP_ICON_LINKS.map((item) => {
-              target={item.id === "cv" || item.external ? "_blank" : undefined}
+              const href = item.id === "cv" ? getResumeHref(locale) : item.href;
-              rel={item.id === "cv" || item.external ? "noreferrer" : undefined}
+              const label = t.has(item.id) ? t(item.id) : item.label;
-              aria-label={t.has(item.id) ? t(item.id) : item.label}
+
-              title={t.has(item.id) ? t(item.id) : item.label}
+              return (
-              className="inline-flex h-8 w-8 items-center justify-center rounded-sm border border-border text-muted-foreground transition-colors hover:text-foreground"
+                <Tooltip key={item.id}>
-            >
+                  <TooltipTrigger asChild>
-              <Icon icon={item.icon} width={16} height={16} />
+                    <Button
-            </a>
+                      asChild
-          );
+                      variant="glass"
-        })}
+                      size="icon-sm"
-        <LanguageSwitcher />
+                      radius="sm"
-      </div>
+                      effect="shine"
+                      aria-label={label}
+                      className={`cursor-pointer ${glassActionClassName} ${slowShineClassName}`}
+                    >
+                      <a
+                        href={href}
+                        target={item.id === "cv" || item.external ? "_blank" : undefined}
+                        rel={item.id === "cv" || item.external ? "noreferrer" : undefined}
+                      >
+                        <Icon icon={item.icon} width={16} height={16} />
+                      </a>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" surface="glass" radius="sm" size="sm">
+                    {label}
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <LanguageSwitcher />
+              </TooltipTrigger>
+              <TooltipContent side="bottom" surface="glass" radius="sm" size="sm">
+                {languageLabel}
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <ThemeToggle />
+              </TooltipTrigger>
+              <TooltipContent side="bottom" surface="glass" radius="sm" size="sm">
+                {locale === "tr" ? "Tema değiştir" : "Toggle theme"}
+              </TooltipContent>
+            </Tooltip>
+          </NavbarTopBarSection>
+        </NavbarTopBar>
+      </TooltipProvider>
 
       <header className="flex items-center justify-between gap-3 border-b border-border pb-4">
         <Link
@@ -82,66 +184,98 @@ export function SiteNavbar() {
           aria-label="Ana sayfaya git"
           className="inline-flex items-center"
         >
-          <Avatar className="h-9 w-9 rounded-sm">
+          <Logo
-            <AvatarImage src="/logo/logo.jpeg" alt="Poyraz Avsever" />
+            src="/logo/logo.jpeg"
-            <AvatarFallback className="rounded-sm bg-muted text-xs font-semibold">
+            alt="Poyraz Avsever"
-              PA
+            width={40}
-            </AvatarFallback>
+            height={40}
-          </Avatar>
+            radius="sm"
+            effect="shine-loop"
+            interactive
+            className={slowShineClassName}
+          />
         </Link>
 
         <div className="hidden items-center gap-3 md:flex">
-          <nav aria-label="Ana navigasyon">
+          <Tabs value={activeTab ?? ""} className="w-auto">
-            <ul className="flex items-center gap-3">
+            <TabsList
+              variant="line"
+              radius="sm"
+              className="h-9 gap-1 bg-transparent p-0"
+              aria-label="Ana navigasyon"
+            >
               {NAV_LINKS.map((item, index) => (
-                <li key={item.id} className="flex items-center gap-3">
+                <div key={item.id} className="flex items-center gap-1.5">
                   {index > 0 && (
                     <Separator
                       orientation="vertical"
-                      className="h-4 bg-border"
+                      className="h-4 bg-border/70"
                       decorative
                     />
                   )}
-                  <Link
+                  <TabsTrigger
-                    href={item.href}
+                    value={item.id}
-                    className={getNavLinkClass(isActiveLink(item.href))}
+                    asChild
+                    size="sm"
+                    radius="sm"
+                    className="cursor-pointer px-2.5"
                   >
-                    {t(item.id)}
+                    <Link href={item.href}>{t(item.id)}</Link>
-                  </Link>
+                  </TabsTrigger>
-                </li>
+                </div>
               ))}
-            </ul>
+            </TabsList>
-          </nav>
+          </Tabs>
 
           <Separator
             orientation="vertical"
-            className="h-4 bg-border"
+            className="h-5 bg-border"
             decorative
           />
-          <button
+          <Button
             type="button"
+            variant="glass"
+            radius="sm"
+            effect="shine"
             onClick={() => setSearchOpen(true)}
-            className="inline-flex h-8 w-44 cursor-pointer items-center justify-between rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground sm:w-52"
+            className={`h-9 w-44 cursor-pointer justify-between px-3 text-sm sm:w-52 ${glassActionClassName} ${slowShineClassName}`}
             aria-label={t("search")}
           >
-            <span className="inline-flex items-center gap-2">
+            <ButtonIcon>
-               <Icon icon="mdi:magnify" width={16} height={16} />
+              <Icon icon="mdi:magnify" width={16} height={16} />
-              <span>{t("search")}</span>
+            </ButtonIcon>
-            </span>
+            <ButtonLabel className="mr-auto">{t("search")}</ButtonLabel>
             <span className="text-xs text-muted-foreground">{shortcut}</span>
-          </button>
+          </Button>
 
-          <DropdownMenu>
+          <DropdownMenu interaction="click">
-            <DropdownMenuTrigger className="inline-flex h-8 cursor-pointer items-center gap-2 rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
+            <DropdownMenuTrigger asChild>
-              <Icon icon="mdi:share-variant" width={16} height={16} />
+              <Button
-              <span>{t("social")}</span>
+                type="button"
+                variant="glass"
+                radius="sm"
+                effect="shine"
+                className={`h-9 cursor-pointer ${glassActionClassName} ${slowShineClassName}`}
+              >
+                <ButtonIcon>
+                  <Icon icon="mdi:share-variant" width={16} height={16} />
+                </ButtonIcon>
+                <ButtonLabel>{t("social")}</ButtonLabel>
+              </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-52 rounded-sm">
+            <DropdownMenuContent
+              align="end"
+              surface="glass"
+              radius="md"
+              itemSize="md"
+              itemRadius="sm"
+              className="w-56"
+            >
               <DropdownMenuLabel>{t("socialLinks")}</DropdownMenuLabel>
               <DropdownMenuSeparator />
               {SOCIAL_LINKS.map((item) => (
-                <DropdownMenuItem key={item.id} asChild>
+                <DropdownMenuItem key={item.id} asChild interactiveMotion="shift">
-                  <Link
+                  <a
                     href={item.href}
                     target="_blank"
                     rel="noreferrer"
@@ -149,7 +283,7 @@ export function SiteNavbar() {
                   >
                     <Icon icon={item.icon} width={16} height={16} />
                     <span>{item.label}</span>
-                  </Link>
+                  </a>
                 </DropdownMenuItem>
               ))}
             </DropdownMenuContent>
@@ -157,19 +291,45 @@ export function SiteNavbar() {
         </div>
 
         <div className="flex items-center gap-2 md:hidden">
+          <Button
+            type="button"
+            variant="glass"
+            size="icon-sm"
+            radius="sm"
+            effect="shine"
+            className={`cursor-pointer ${glassActionClassName} ${slowShineClassName}`}
+            aria-label={t("search")}
+            onClick={() => setSearchOpen(true)}
+          >
+            <Icon icon="mdi:magnify" width={16} height={16} />
+          </Button>
+
           <Sheet>
-            <SheetTrigger className="inline-flex h-8 cursor-pointer items-center gap-2 rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
+            <SheetTrigger asChild>
-              <Icon icon="mdi:menu" width={18} height={18} />
+              <Button
-              <span>{t("menu")}</span>
+                type="button"
+                variant="glass"
+                radius="sm"
+                effect="shine"
+                className={`h-9 cursor-pointer ${glassActionClassName} ${slowShineClassName}`}
+              >
+                <ButtonIcon>
+                  <Icon icon="mdi:menu" width={18} height={18} />
+                </ButtonIcon>
+                <ButtonLabel>{t("menu")}</ButtonLabel>
+              </Button>
             </SheetTrigger>
             <SheetContent side="right" className="w-72 p-4">
               <SheetTitle className="sr-only">{t("mobileMenu")}</SheetTitle>
               <div className="flex flex-col gap-4">
                 <SheetClose asChild>
-                  <button
+                  <Button
                     type="button"
+                    variant="glass"
+                    radius="sm"
+                    effect="shine"
                     onClick={() => setSearchOpen(true)}
-                    className="inline-flex h-9 w-full cursor-pointer items-center justify-between rounded-sm border border-border px-3 text-sm text-muted-foreground transition-colors hover:text-foreground"
+                    className={`w-full cursor-pointer justify-between ${glassActionClassName} ${slowShineClassName}`}
                     aria-label={t("search")}
                   >
                     <span className="inline-flex items-center gap-2">
@@ -179,7 +339,7 @@ export function SiteNavbar() {
                     <span className="text-xs text-muted-foreground/80">
                       {shortcut}
                     </span>
-                  </button>
+                  </Button>
                 </SheetClose>
 
                 <Separator className="bg-border" decorative />