feat: updated navbar, topbar and announcement bar

2026-07-14 13:47:53 +03:00
parent a9a80dba27
commit 2c28b8a33e
3 changed files with 232 additions and 82 deletions
@@ -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>
@@ -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>
  );
 }
@@ -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,
-  AvatarFallback,
-  AvatarImage,
+  Button,
+  ButtonIcon,
+  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}>
+        <NavbarTopBar
+          variant="secondary"
+          className="border-0 bg-transparent p-0 shadow-none"
+        >
+          <NavbarTopBarSection align="end" className="gap-2">
            {TOP_ICON_LINKS.map((item) => {
              const href = item.id === "cv" ? getResumeHref(locale) : item.href;
+              const label = t.has(item.id) ? t(item.id) : item.label;
+
              return (
+                <Tooltip key={item.id}>
+                  <TooltipTrigger asChild>
+                    <Button
+                      asChild
+                      variant="glass"
+                      size="icon-sm"
+                      radius="sm"
+                      effect="shine"
+                      aria-label={label}
+                      className={`cursor-pointer ${glassActionClassName} ${slowShineClassName}`}
+                    >
                      <a
-              key={item.id}
                        href={href}
                        target={item.id === "cv" || item.external ? "_blank" : undefined}
                        rel={item.id === "cv" || item.external ? "noreferrer" : undefined}
-              aria-label={t.has(item.id) ? t(item.id) : item.label}
-              title={t.has(item.id) ? t(item.id) : 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} />
                      </a>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" surface="glass" radius="sm" size="sm">
+                    {label}
+                  </TooltipContent>
+                </Tooltip>
              );
            })}
+
+            <Tooltip>
+              <TooltipTrigger asChild>
                <LanguageSwitcher />
-      </div>
+              </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">
-            <AvatarImage src="/logo/logo.jpeg" alt="Poyraz Avsever" />
-            <AvatarFallback className="rounded-sm bg-muted text-xs font-semibold">
-              PA
-            </AvatarFallback>
-          </Avatar>
+          <Logo
+            src="/logo/logo.jpeg"
+            alt="Poyraz Avsever"
+            width={40}
+            height={40}
+            radius="sm"
+            effect="shine-loop"
+            interactive
+            className={slowShineClassName}
+          />
        </Link>

        <div className="hidden items-center gap-3 md:flex">
-          <nav aria-label="Ana navigasyon">
-            <ul className="flex items-center gap-3">
+          <Tabs value={activeTab ?? ""} className="w-auto">
+            <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
-                    href={item.href}
-                    className={getNavLinkClass(isActiveLink(item.href))}
+                  <TabsTrigger
+                    value={item.id}
+                    asChild
+                    size="sm"
+                    radius="sm"
+                    className="cursor-pointer px-2.5"
                  >
-                    {t(item.id)}
-                  </Link>
-                </li>
+                    <Link href={item.href}>{t(item.id)}</Link>
+                  </TabsTrigger>
+                </div>
              ))}
-            </ul>
-          </nav>
+            </TabsList>
+          </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} />
-              <span>{t("search")}</span>
-            </span>
+            </ButtonIcon>
+            <ButtonLabel className="mr-auto">{t("search")}</ButtonLabel>
            <span className="text-xs text-muted-foreground">{shortcut}</span>
-          </button>
+          </Button>

-          <DropdownMenu>
-            <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">
+          <DropdownMenu interaction="click">
+            <DropdownMenuTrigger asChild>
+              <Button
+                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} />
-              <span>{t("social")}</span>
+                </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>
-                  <Link
+                <DropdownMenuItem key={item.id} asChild interactiveMotion="shift">
+                  <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>
+              <Button
+                type="button"
+                variant="glass"
+                radius="sm"
+                effect="shine"
+                className={`h-9 cursor-pointer ${glassActionClassName} ${slowShineClassName}`}
+              >
+                <ButtonIcon>
                  <Icon icon="mdi:menu" width={18} height={18} />
-              <span>{t("menu")}</span>
+                </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 />