feat(navigation): add extensible others menus

app/[locale]/links/page.tsx

@@ -1,6 +1,13 @@
 import type { Metadata } from "next";
 import { LinksContent } from "@/components/links-content";
 
+type LinksPageProps = {
+  searchParams?: Promise<{
+    category?: string | string[];
+    query?: string | string[];
+  }>;
+};
+
 export const metadata: Metadata = {
   title: "Links",
   description:
@@ -31,6 +38,20 @@ export const metadata: Metadata = {
   },
 };
 
-export default function LinksPage() {
-  return <LinksContent />;
+function firstParam(value?: string | string[]) {
+  return Array.isArray(value) ? value[0] : value;
+}
+
+export default async function LinksPage({ searchParams }: LinksPageProps) {
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+  const initialCategory = firstParam(resolvedSearchParams?.category);
+  const initialQuery = firstParam(resolvedSearchParams?.query);
+
+  return (
+    <LinksContent
+      key={`${initialCategory ?? "all"}-${initialQuery ?? ""}`}
+      initialCategory={initialCategory}
+      initialQuery={initialQuery}
+    />
+  );
 }

components/links-content.tsx

@@ -24,6 +24,11 @@ import {
 
 type CategoryFilter = "all" | LinkDirectoryCategory;
 
+type LinksContentProps = {
+  initialCategory?: string;
+  initialQuery?: string;
+};
+
 const CATEGORY_ORDER = {
   resources: 0,
   navigation: 1,
@@ -58,13 +63,26 @@ function formatHref(href: string) {
   return href.replace(/^https?:\/\//, "").replace(/\/$/, "");
 }
 
-export function LinksContent() {
+function parseCategoryFilter(value?: string): CategoryFilter {
+  if (value === "navigation" || value === "social" || value === "resources") {
+    return value;
+  }
+
+  return "all";
+}
+
+export function LinksContent({
+  initialCategory,
+  initialQuery = "",
+}: LinksContentProps) {
   const t = useTranslations("Links");
   const tNav = useTranslations("Nav");
   const locale = useLocale();
 
-  const [activeCategory, setActiveCategory] = useState<CategoryFilter>("all");
-  const [query, setQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState<CategoryFilter>(() =>
+    parseCategoryFilter(initialCategory),
+  );
+  const [query, setQuery] = useState(initialQuery);
 
   const filterItems = useMemo(() => [
     { id: "all" as const, label: t("allCategories") },

components/site-navbar.tsx

@@ -5,7 +5,7 @@ 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 { Fragment, useState } from "react";
 import {
   Button,
   ButtonIcon,
@@ -35,7 +35,13 @@ import {
 } 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";
+import {
+  getResumeHref,
+  NAV_DROPDOWN_GROUPS,
+  NAV_LINKS,
+  SOCIAL_LINKS,
+  TOP_ICON_LINKS,
+} from "@/lib/links";
 import type { ThemeMode } from "@/components/app-shell";
 
 const SearchCommand = dynamic(
@@ -88,6 +94,8 @@ type SiteNavbarProps = ThemeToggleProps;
 export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
   const pathname = usePathname();
   const [searchOpen, setSearchOpen] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [mobileMenuGroupId, setMobileMenuGroupId] = useState<string | null>(null);
   const shortcut = useKeyboardShortcutLabel();
   const t = useTranslations("Nav");
   const locale = useLocale();
@@ -98,14 +106,22 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
   };
 
   const activeTab = NAV_LINKS.find((item) => isActiveLink(item.href))?.id;
+  const activeMobileMenuGroup = NAV_DROPDOWN_GROUPS.find(
+    (group) => group.id === mobileMenuGroupId,
+  );
+
+  const handleMobileMenuOpenChange = (open: boolean) => {
+    setMobileMenuOpen(open);
+    if (!open) setMobileMenuGroupId(null);
+  };
   const languageLabel = locale === "tr" ? "Switch to English" : "Türkçe'ye geç";
 
   return (
-    <div className="space-y-3">
+    <div className="min-w-0 space-y-3">
       <TooltipProvider delayDuration={180}>
         <NavbarTopBar
           variant="secondary"
-          className="border-0 bg-transparent p-0 shadow-none"
+          className="border-0 bg-transparent p-0 shadow-none [&>div]:max-w-none [&>div]:px-0"
         >
           <NavbarTopBarSection align="end" className="gap-2">
             {TOP_ICON_LINKS.map((item) => {
@@ -161,11 +177,11 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
         </NavbarTopBar>
       </TooltipProvider>
 
-      <header className="flex items-center justify-between gap-3 border-b border-border pb-4">
+      <header className="flex min-w-0 items-center justify-between gap-3 border-b border-border pb-4">
         <Link
           href="/"
           aria-label="Ana sayfaya git"
-          className="inline-flex items-center"
+          className="inline-flex shrink-0 items-center"
         >
           <Logo
             src="/logo/logo.png"
@@ -179,8 +195,8 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
           />
         </Link>
 
-        <div className="hidden items-center gap-3 md:flex">
-          <Tabs value={activeTab ?? ""} className="w-auto">
+        <div className="hidden min-w-0 flex-1 items-center justify-end gap-2 min-[840px]:flex">
+          <Tabs value={activeTab ?? ""} className="w-auto shrink-0">
             <TabsList
               variant="line"
               radius="sm"
@@ -188,31 +204,94 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
               aria-label="Ana navigasyon"
             >
               {NAV_LINKS.map((item, index) => (
-                <div key={item.id} className="flex items-center gap-1.5">
-                  {index > 0 && (
-                    <Separator
-                      orientation="vertical"
-                      className="h-4 bg-border/70"
-                      decorative
-                    />
-                  )}
-                  <TabsTrigger
-                    value={item.id}
-                    asChild
-                    size="sm"
-                    radius="sm"
-                    className="cursor-pointer px-2.5"
-                  >
-                    <Link href={item.href}>{t(item.id)}</Link>
-                  </TabsTrigger>
-                </div>
+                <Fragment key={item.id}>
+                  <div className="flex items-center gap-1.5">
+                    {index > 0 && (
+                      <Separator
+                        orientation="vertical"
+                        className="h-4 bg-border/70"
+                        decorative
+                      />
+                    )}
+                    <TabsTrigger
+                      value={item.id}
+                      asChild
+                      size="sm"
+                      radius="sm"
+                      className="cursor-pointer px-2.5"
+                    >
+                      <Link href={item.href}>{t(item.id)}</Link>
+                    </TabsTrigger>
+                  </div>
+
+                  {NAV_DROPDOWN_GROUPS.filter(
+                    (group) => group.insertAfter === item.id,
+                  ).map((group) => (
+                    <div key={group.id} className="flex items-center gap-1.5">
+                      <Separator
+                        orientation="vertical"
+                        className="h-4 bg-border/70"
+                        decorative
+                      />
+                      <DropdownMenu interaction="click">
+                        <DropdownMenuTrigger asChild>
+                          <button
+                            type="button"
+                            className={`${getNavLinkClass(
+                              group.items.some(
+                                (groupItem) =>
+                                  !groupItem.external &&
+                                  isActiveLink(groupItem.href.split("?")[0]),
+                              ),
+                            )} h-9 cursor-pointer items-center gap-1 px-2.5`}
+                          >
+                            <span>{t(group.id)}</span>
+                            <Icon icon="mdi:chevron-down" width={14} height={14} />
+                          </button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                          align="end"
+                          surface="solid"
+                          radius="md"
+                          itemSize="md"
+                          itemRadius="sm"
+                          className="w-56 bg-popover"
+                        >
+                          {group.items.map((groupItem) => (
+                            <DropdownMenuItem key={groupItem.id} asChild>
+                              {groupItem.external ? (
+                                <a
+                                  href={groupItem.href}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                  className="flex items-center gap-2"
+                                >
+                                  <Icon icon={groupItem.icon} width={16} height={16} />
+                                  <span>{t(groupItem.id)}</span>
+                                </a>
+                              ) : (
+                                <Link
+                                  href={groupItem.href}
+                                  className="flex items-center gap-2"
+                                >
+                                  <Icon icon={groupItem.icon} width={16} height={16} />
+                                  <span>{t(groupItem.id)}</span>
+                                </Link>
+                              )}
+                            </DropdownMenuItem>
+                          ))}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  ))}
+                </Fragment>
               ))}
             </TabsList>
           </Tabs>
 
           <Separator
             orientation="vertical"
-            className="h-5 bg-border"
+            className="h-5 shrink-0 bg-border"
             decorative
           />
           <Button
@@ -221,7 +300,7 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
             radius="sm"
             effect="shine"
             onClick={() => setSearchOpen(true)}
-            className={`h-9 w-44 cursor-pointer justify-between px-3 text-sm sm:w-52 ${slowShineClassName}`}
+            className={`h-9 w-auto cursor-pointer px-3 text-sm ${slowShineClassName}`}
             aria-label={t("search")}
           >
             <ButtonIcon>
@@ -273,7 +352,7 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
           </DropdownMenu>
         </div>
 
-        <div className="flex items-center gap-2 md:hidden">
+        <div className="flex items-center gap-2 min-[840px]:hidden">
           <Button
             type="button"
             variant="secondary"
@@ -287,7 +366,7 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
             <Icon icon="mdi:magnify" width={16} height={16} />
           </Button>
 
-          <Sheet>
+          <Sheet open={mobileMenuOpen} onOpenChange={handleMobileMenuOpenChange}>
             <SheetTrigger asChild>
               <Button
                 type="button"
@@ -303,64 +382,156 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
               </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
-                    type="button"
-                    variant="secondary"
-                    radius="sm"
-                    effect="shine"
-                    onClick={() => setSearchOpen(true)}
-                    className={`w-full cursor-pointer justify-between ${slowShineClassName}`}
-                    aria-label={t("search")}
-                  >
-                    <span className="inline-flex items-center gap-2">
-                      <Icon icon="mdi:magnify" width={16} height={16} />
-                      <span>{t("search")}</span>
-                    </span>
-                    <span className="text-xs text-muted-foreground/80">
-                      {shortcut}
-                    </span>
-                  </Button>
-                </SheetClose>
-
-                <Separator className="bg-border" decorative />
-
-                <nav aria-label="Mobil navigasyon">
-                  <ul className="space-y-2">
-                    {NAV_LINKS.map((item) => (
-                      <li key={item.id}>
-                        <SheetClose asChild>
-                          <Link
-                            href={item.href}
-                            className={getNavLinkClass(isActiveLink(item.href))}
-                          >
-                            {t(item.id)}
-                          </Link>
-                        </SheetClose>
-                      </li>
-                    ))}
-                  </ul>
-                </nav>
-
-                <Separator className="bg-border" decorative />
-
-                <div className="grid grid-cols-2 gap-2">
-                  {SOCIAL_LINKS.map((item) => (
-                    <Link
-                      key={item.id}
-                      href={item.href}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-2 rounded-sm border border-border px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+              {activeMobileMenuGroup ? (
+                <div className="flex flex-col gap-4">
+                  <div className="flex min-h-9 items-center gap-2 pr-9">
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="icon-sm"
+                      radius="sm"
+                      effect="shine"
+                      className={`shrink-0 cursor-pointer ${slowShineClassName}`}
+                      aria-label={t("backToMenu")}
+                      onClick={() => setMobileMenuGroupId(null)}
                     >
-                      <Icon icon={item.icon} width={14} height={14} />
-                      <span className="truncate">{item.label}</span>
-                    </Link>
-                  ))}
+                      <Icon icon="mdi:chevron-left" width={18} height={18} />
+                    </Button>
+                    <SheetTitle className="truncate text-base font-medium">
+                      {t(activeMobileMenuGroup.id)}
+                    </SheetTitle>
+                  </div>
+
+                  <Separator className="bg-border" decorative />
+
+                  <nav aria-label={t(activeMobileMenuGroup.id)}>
+                    <ul className="space-y-1">
+                      {activeMobileMenuGroup.items.map((groupItem) => (
+                        <li key={groupItem.id}>
+                          {groupItem.external ? (
+                            <SheetClose asChild>
+                              <a
+                                href={groupItem.href}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="flex min-h-10 w-full items-center gap-3 rounded-sm px-2 py-2 text-sm text-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
+                              >
+                                <Icon icon={groupItem.icon} width={18} height={18} />
+                                <span>{t(groupItem.id)}</span>
+                                <Icon
+                                  icon="mdi:open-in-new"
+                                  width={14}
+                                  height={14}
+                                  className="ml-auto text-muted-foreground"
+                                />
+                              </a>
+                            </SheetClose>
+                          ) : (
+                            <SheetClose asChild>
+                              <Link
+                                href={groupItem.href}
+                                className="flex min-h-10 w-full items-center gap-3 rounded-sm px-2 py-2 text-sm text-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
+                              >
+                                <Icon icon={groupItem.icon} width={18} height={18} />
+                                <span>{t(groupItem.id)}</span>
+                                <Icon
+                                  icon="mdi:chevron-right"
+                                  width={16}
+                                  height={16}
+                                  className="ml-auto text-muted-foreground"
+                                />
+                              </Link>
+                            </SheetClose>
+                          )}
+                        </li>
+                      ))}
+                    </ul>
+                  </nav>
                 </div>
-              </div>
+              ) : (
+                <div className="flex flex-col gap-4">
+                  <SheetTitle className="sr-only">{t("mobileMenu")}</SheetTitle>
+
+                  <SheetClose asChild>
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      radius="sm"
+                      effect="shine"
+                      onClick={() => setSearchOpen(true)}
+                      className={`w-full cursor-pointer justify-between ${slowShineClassName}`}
+                      aria-label={t("search")}
+                    >
+                      <span className="inline-flex items-center gap-2">
+                        <Icon icon="mdi:magnify" width={16} height={16} />
+                        <span>{t("search")}</span>
+                      </span>
+                      <span className="text-xs text-muted-foreground/80">
+                        {shortcut}
+                      </span>
+                    </Button>
+                  </SheetClose>
+
+                  <Separator className="bg-border" decorative />
+
+                  <nav aria-label="Mobil navigasyon">
+                    <ul className="space-y-2">
+                      {NAV_LINKS.map((item) => (
+                        <Fragment key={item.id}>
+                          <li>
+                            <SheetClose asChild>
+                              <Link
+                                href={item.href}
+                                className={getNavLinkClass(isActiveLink(item.href))}
+                              >
+                                {t(item.id)}
+                              </Link>
+                            </SheetClose>
+                          </li>
+
+                          {NAV_DROPDOWN_GROUPS.filter(
+                            (group) => group.insertAfter === item.id,
+                          ).map((group) => (
+                            <li key={group.id}>
+                              <button
+                                type="button"
+                                className={`${getNavLinkClass(
+                                  group.items.some(
+                                    (groupItem) =>
+                                      !groupItem.external &&
+                                      isActiveLink(groupItem.href.split("?")[0]),
+                                  ),
+                                )} w-full cursor-pointer items-center justify-between gap-3 text-left`}
+                                onClick={() => setMobileMenuGroupId(group.id)}
+                              >
+                                <span>{t(group.id)}</span>
+                                <Icon icon="mdi:chevron-right" width={16} height={16} />
+                              </button>
+                            </li>
+                          ))}
+                        </Fragment>
+                      ))}
+                    </ul>
+                  </nav>
+
+                  <Separator className="bg-border" decorative />
+
+                  <div className="grid grid-cols-2 gap-2">
+                    {SOCIAL_LINKS.map((item) => (
+                      <Link
+                        key={item.id}
+                        href={item.href}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-2 rounded-sm border border-border px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+                      >
+                        <Icon icon={item.icon} width={14} height={14} />
+                        <span className="truncate">{item.label}</span>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              )}
             </SheetContent>
           </Sheet>
         </div>

lib/command-palette-links.ts

@@ -10,7 +10,7 @@ import {
 import { REFERENCES } from "@/data/references";
 import { VOLUNTEER_COMMUNITY_ITEMS } from "@/data/volunteer-community";
 import { YOUTUBE_VIDEO_LINKS } from "@/data/youtube-videos";
-import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
+import { NAV_DROPDOWN_GROUPS, NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
 import { getLocalizedValue } from "@/lib/locale";
 
 export type CommandPaletteItem = {
@@ -62,6 +62,21 @@ export function getCommandPaletteGroups(
     ],
   }));
 
+  const dropdownGroups: CommandPaletteGroup[] = NAV_DROPDOWN_GROUPS.map(
+    (group) => ({
+      id: `navigation-${group.id}`,
+      heading: tNav.has(group.id) ? tNav(group.id) : group.label,
+      items: group.items.map((item) => ({
+        id: item.id,
+        label: tNav.has(item.id) ? tNav(item.id) : item.label,
+        href: item.href,
+        icon: item.icon,
+        external: item.external,
+        keywords: [group.label, item.label, ...item.keywords],
+      })),
+    }),
+  );
+
   const blogItems: CommandPaletteItem[] = [
     {
       id: "blog-index",
@@ -281,6 +296,7 @@ export function getCommandPaletteGroups(
       heading: locale === "tr" ? "İçerikler" : "Contents",
       items: contentItems,
     },
+    ...dropdownGroups,
     {
       id: "social",
       heading: "Social",

lib/links.ts

@@ -70,6 +70,52 @@ export const SOCIAL_LINKS = [
   },
 ] as const;
 
+export const ANIMATION_RESOURCE_LINKS = [
+  {
+    id: "motion",
+    label: "Motion",
+    href: "https://motion.dev/",
+    icon: "mdi:motion-play-outline",
+  },
+  {
+    id: "gsap",
+    label: "GSAP",
+    href: "https://gsap.com/resources/",
+    icon: "mdi:lightning-bolt-outline",
+  },
+  {
+    id: "lottiefiles",
+    label: "LottieFiles",
+    href: "https://lottiefiles.com/",
+    icon: "mdi:movie-open-play-outline",
+  },
+  {
+    id: "rive",
+    label: "Rive",
+    href: "https://rive.app/",
+    icon: "mdi:vector-curve",
+  },
+] as const;
+
+export const NAV_DROPDOWN_GROUPS = [
+  {
+    id: "others",
+    label: "Diğerleri",
+    icon: "mdi:dots-horizontal",
+    insertAfter: "gallery",
+    items: [
+      {
+        id: "animationResources",
+        label: "Animasyon Kaynakları",
+        href: "/links?category=resources&query=animation",
+        icon: "mdi:motion-play-outline",
+        external: false,
+        keywords: ["animasyon", "animation", "kaynak", "resource", "motion"],
+      },
+    ],
+  },
+] as const;
+
 export const TOP_ICON_LINKS = [
   {
     id: "ui-kit",
@@ -145,6 +191,23 @@ export const LINK_DIRECTORY: LinkDirectoryItem[] = [
     category: "social" as const,
     keywords: [item.label, item.href, "sosyal", "profile", "platform"],
   })),
+  ...ANIMATION_RESOURCE_LINKS.map((item) => ({
+    id: item.id,
+    label: item.label,
+    href: item.href,
+    icon: item.icon,
+    external: true,
+    category: "resources" as const,
+    keywords: [
+      item.label,
+      item.href,
+      "animasyon",
+      "animation",
+      "kaynak",
+      "resource",
+      "motion",
+    ],
+  })),
   ...TOP_ICON_LINKS.map((item) => ({
     id: item.id,
     label: item.label,

messages/en.json

@@ -9,6 +9,9 @@
     "search": "Search",
     "social": "Social",
     "socialLinks": "Social Links",
+    "others": "Others",
+    "animationResources": "Animation Resources",
+    "backToMenu": "Back to menu",
     "menu": "Menu",
     "mobileMenu": "Mobile Menu",
     "resume": "Resume"

messages/tr.json

@@ -9,6 +9,9 @@
     "search": "Ara",
     "social": "Sosyal",
     "socialLinks": "Sosyal Bağlantılar",
+    "others": "Diğerleri",
+    "animationResources": "Animasyon Kaynakları",
+    "backToMenu": "Menüye dön",
     "menu": "Menü",
     "mobileMenu": "Mobil Menü",
     "resume": "Özgeçmiş"