@itsmrtr/bunkoshelf 1.4.0 → 1.4.1

package/dist/.next/static/chunks/{0.l1v8i~9k4~_.js → 17ilv6c2gonmw.js}

@@ -1 +1 @@
-(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,80656,e=>{"use strict";var t=e.i(52009);let s=(0,t.createServerReference)("40d83b84ab9727f1a3ac79452d882a384445a162d3",t.callServer,void 0,t.findSourceMapURL,"getReaderStats");e.s(["getReaderStats",0,s])},89107,e=>{"use strict";let t=(0,e.i(6875).default)("plus",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]]);e.s(["PlusIcon",0,t],89107)},45181,e=>{"use strict";let t=(0,e.i(6875).default)("minus",[["path",{d:"M5 12h14",key:"1ays0h"}]]);e.s(["MinusIcon",0,t],45181)},28321,e=>{"use strict";var t=e.i(52009);let s=(0,t.createServerReference)("40699379406ff6843ce0944100089cd5166e07c03c",t.callServer,void 0,t.findSourceMapURL,"sendPush");e.s(["sendPush",0,s])},22825,e=>{"use strict";var t=e.i(76172);e.s(["default",0,function({title:e,dailyReadingDates:s,daysLabel:a,bgColor:r,textColor:l}){let c=function(e){let t,s,a,r=new Set(e),l=new Date;l.setHours(0,0,0,0);let c=0;for(;r.has((t=l.getFullYear(),s=String(l.getMonth()+1).padStart(2,"0"),a=String(l.getDate()).padStart(2,"0"),`${t}-${s}-${a}`));)c++,l.setDate(l.getDate()-1);return c}(s);return(0,t.jsxs)("div",{className:`h-[110px] rounded-lg ${r} p-4 2xl:px-4 2xl:pt-4 2xl:pb-5 flex flex-col justify-between`,children:[(0,t.jsx)("span",{className:`${l} text-sm uppercase`,children:e}),(0,t.jsxs)("div",{className:`font-boldonse ${l} 2xl:text-2xl leading-7.5 mt-2 flex items-center`,children:[c," ",a]})]})}])}]);
+(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,75251,e=>{"use strict";var t=e.i(52009);let s=(0,t.createServerReference)("40be6fb3fd710e771977fde05ed194d462f89adcef",t.callServer,void 0,t.findSourceMapURL,"getReaderStats");e.s(["getReaderStats",0,s])},89107,e=>{"use strict";let t=(0,e.i(6875).default)("plus",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]]);e.s(["PlusIcon",0,t],89107)},45181,e=>{"use strict";let t=(0,e.i(6875).default)("minus",[["path",{d:"M5 12h14",key:"1ays0h"}]]);e.s(["MinusIcon",0,t],45181)},50876,e=>{"use strict";var t=e.i(52009);let s=(0,t.createServerReference)("405dab99d7a09594fa0881666767fdb6e6e27ca518",t.callServer,void 0,t.findSourceMapURL,"sendPush");e.s(["sendPush",0,s])},22825,e=>{"use strict";var t=e.i(76172);e.s(["default",0,function({title:e,dailyReadingDates:s,daysLabel:a,bgColor:r,textColor:l}){let d=function(e){let t,s,a,r=new Set(e),l=new Date;l.setHours(0,0,0,0);let d=0;for(;r.has((t=l.getFullYear(),s=String(l.getMonth()+1).padStart(2,"0"),a=String(l.getDate()).padStart(2,"0"),`${t}-${s}-${a}`));)d++,l.setDate(l.getDate()-1);return d}(s);return(0,t.jsxs)("div",{className:`h-[110px] rounded-lg ${r} p-4 2xl:px-4 2xl:pt-4 2xl:pb-5 flex flex-col justify-between`,children:[(0,t.jsx)("span",{className:`${l} text-sm uppercase`,children:e}),(0,t.jsxs)("div",{className:`font-boldonse ${l} 2xl:text-2xl leading-7.5 mt-2 flex items-center`,children:[d," ",a]})]})}])}]);

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itsmrtr/bunkoshelf",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Self-hosted personal manga library.",
   "keywords": [
     "bunko",

package/dist/src/components/catalog/CatalogAuthorsTable.tsx

@@ -1,4 +1,5 @@
 import Pagination from "@/components/ui/Pagination";
+import { normalizeCommaSeparatedText } from "@/lib/utils";
 import type { CatalogAuthorStats, PaginatedResult } from "@/lib/db/library";
 import type { Dictionary } from "@/lib/types";
 
@@ -23,6 +24,13 @@ function renderAvgRating(value: number | null) {
   return Number(value).toFixed(1);
 }
 
+function renderAuthorName(
+  value: string | null | undefined,
+  unknownAuthorLabel: string
+) {
+  return normalizeCommaSeparatedText(value) ?? unknownAuthorLabel;
+}
+
 function renderLibraries(
   hasManga: boolean,
   hasOthers: boolean,
@@ -53,6 +61,9 @@ export default function CatalogAuthorsTable({
   data,
   intl,
 }: CatalogAuthorsTableProps) {
+  const unknownAuthorLabel =
+    (intl.catalog.unknownAuthor as string | undefined) || "Unknown";
+
   return (
     <>
       <div className="bg-blackamber p-4 rounded-lg">
@@ -81,8 +92,8 @@ export default function CatalogAuthorsTable({
               {data.items.map((author, index) => (
                 <tr key={`${author.author ?? "unknown"}-${index}`}>
                   <td className="p-4">
-                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug line-clamp-2">
-                      {renderValue(author.author)}
+                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug">
+                      {renderAuthorName(author.author, unknownAuthorLabel)}
                     </div>
                   </td>
                   <td className="p-4 text-center whitespace-nowrap">

package/dist/src/components/catalog/CatalogLibraryActions.tsx

@@ -106,7 +106,7 @@ export default function CatalogLibraryActions({
         disabled={isScanning || isDeleting}
         title={intl.manga.scanVolume as string}
         className={clsx(
-          "border border-stone-300 md:border-neutral-800 hover:text-pearl rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-lilah",
+          "border border-neutral-800 hover:text-pearl rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-lilah",
           "disabled:opacity-50 disabled:cursor-not-allowed"
         )}
       >
@@ -123,7 +123,7 @@ export default function CatalogLibraryActions({
         disabled={isScanning || isDeleting}
         title={(intl.libraries.deleteItem as Record<string, string>).volume}
         className={clsx(
-          "border border-stone-300 md:border-neutral-800 hover:text-danger-alt rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-danger-alt",
+          "border border-neutral-800 hover:text-danger-alt rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-danger-alt",
           "disabled:opacity-50 disabled:cursor-not-allowed"
         )}
       >

package/dist/src/components/catalog/CatalogLibraryTable.tsx

@@ -3,7 +3,7 @@ import { CheckIcon, HeartIcon } from "lucide-react";
 import Pagination from "@/components/ui/Pagination";
 import CatalogLibraryActions from "@/components/catalog/CatalogLibraryActions";
 import { getLibraryVolumeHref } from "@/lib/librarySection";
-import { ageRatingMap } from "@/lib/utils";
+import { ageRatingMap, normalizeCommaSeparatedText } from "@/lib/utils";
 import type { CatalogLibraryVolume, PaginatedResult } from "@/lib/db/library";
 import type { Dictionary, Locale } from "@/lib/types";
 
@@ -43,6 +43,10 @@ function renderAgeRating(value: string | null | undefined) {
   return mapped !== null ? `${mapped}+` : value;
 }
 
+function renderWriter(value: string | null | undefined) {
+  return normalizeCommaSeparatedText(value) ?? "—";
+}
+
 export default function CatalogLibraryTable({
   data,
   intl,
@@ -87,25 +91,25 @@ export default function CatalogLibraryTable({
                   <td className="p-4">
                     <Link
                       href={getLibraryVolumeHref(lang, volume.section, volume.slug)}
-                      className="block max-w-[20rem] whitespace-normal break-words leading-snug line-clamp-2 hover:underline"
+                      className="block max-w-[20rem] whitespace-normal break-words leading-snug hover:underline"
                     >
                       {renderValue(volume.title)}
                     </Link>
                   </td>
                   <td className="p-4">
-                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug line-clamp-2">
+                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug">
                       {renderValue(volume.series)}
                     </div>
                   </td>
                   <td className="p-4 text-center whitespace-nowrap">{renderValue(volume.number)}</td>
                   <td className="p-4 text-center whitespace-nowrap">{renderValue(volume.year)}</td>
                   <td className="p-4 text-center">
-                    <div className="max-w-[14rem] whitespace-normal break-words leading-snug line-clamp-2">
-                      {renderValue(volume.writer)}
+                    <div className="max-w-[14rem] whitespace-normal break-words leading-snug">
+                      {renderWriter(volume.writer)}
                     </div>
                   </td>
                   <td className="p-4 text-center">
-                    <div className="max-w-[14rem] whitespace-normal break-words leading-snug line-clamp-2">
+                    <div className="max-w-[14rem] whitespace-normal break-words leading-snug">
                       {renderValue(volume.publisher)}
                     </div>
                   </td>
@@ -115,12 +119,12 @@ export default function CatalogLibraryTable({
                     </div>
                   </td>
                   <td className="p-4 text-center">
-                    <div className="max-w-[10rem] whitespace-normal break-words leading-snug line-clamp-2">
+                    <div className="max-w-[10rem] whitespace-normal break-words leading-snug">
                       {renderAgeRating(volume.ageRating)}
                     </div>
                   </td>
                   <td className="p-4 text-center">
-                    <div className="max-w-[11rem] whitespace-normal break-words leading-snug line-clamp-2">
+                    <div className="max-w-[11rem] whitespace-normal break-words leading-snug">
                       {renderValue(volume.gtin)}
                     </div>
                   </td>

package/dist/src/components/catalog/CatalogNav.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { usePathname, useParams } from "next/navigation";
 import clsx from "clsx";
+import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
 import { getCatalogNavLinks } from "@/lib/nav/catalogNav";
 import type { Dictionary, Locale } from "@/lib/types";
 
@@ -18,22 +19,24 @@ export default function CatalogNav({ intl }: CatalogNavProps) {
 
   return (
     <div className="mt-4 md:mt-16">
-      <nav className="md:space-y-2 md:block flex gap-1">
+      <MobileSecondaryNav items={links} />
+
+      <nav className="hidden md:space-y-2 md:block">
         {links.map(({ href, icon: Icon, label, isActive }) => (
           <Link
             key={href}
             href={href}
             prefetch={false}
             className={clsx(
-              "flex items-center p-4 rounded-lg leading-none text-onix md:w-full justify-center md:justify-start flex-1 transition-all duration-300",
+              "flex items-center p-4 rounded-lg leading-none text-onix w-full justify-start transition-all duration-300",
               {
                 "bg-sand": isActive,
                 "hover:bg-sand": !isActive,
               }
             )}
           >
-            <Icon size={20} className="mr-0 md:mr-2" />
-            <span className="hidden md:inline">{label}</span>
+            <Icon size={20} className="mr-2" />
+            <span>{label}</span>
           </Link>
         ))}
       </nav>

package/dist/src/components/catalog/CatalogRelationsTable.tsx

@@ -32,7 +32,7 @@ export default function CatalogRelationsTable({
               {data.items.map((item) => (
                 <tr key={item.name}>
                   <td className="p-4">
-                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug line-clamp-2">
+                    <div className="max-w-[18rem] whitespace-normal break-words leading-snug">
                       {item.name}
                     </div>
                   </td>

package/dist/src/components/favorites/FavoritesNav.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { usePathname, useParams } from "next/navigation";
 import clsx from "clsx";
+import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
 import { getFavoritesNavLinks } from "@/lib/nav/favoritesNav";
 import type { Dictionary, Locale } from "@/lib/types";
 
@@ -10,9 +11,7 @@ interface FavoritesNavProps {
   intl: Dictionary;
 }
 
-export default function FavoritesNav({
-  intl,
-}: FavoritesNavProps) {
+export default function FavoritesNav({ intl }: FavoritesNavProps) {
   const params = useParams<{ lang: Locale }>();
   const pathname = usePathname();
   const currentLang = params.lang || "es";
@@ -20,34 +19,40 @@ export default function FavoritesNav({
 
   return (
     <div className="mt-4 md:mt-16">
-      <nav className="md:space-y-2 md:block flex gap-1">
+      <MobileSecondaryNav
+        items={links.map((link) => ({
+          ...link,
+          label: String(link.label),
+        }))}
+      />
+
+      <nav className="hidden md:space-y-2 md:block">
         {links.map(({ href, icon: Icon, label, isActive, badge }, index) => (
           <Link
             key={index}
             href={href}
             prefetch={false}
             className={clsx(
-              "flex items-center p-4 rounded-lg leading-none text-onix md:w-full justify-center md:justify-start flex-1 transition-all duration-300",
+              "flex items-center p-4 rounded-lg leading-none text-onix w-full justify-start transition-all duration-300",
               {
                 "bg-sand": isActive,
                 "hover:bg-sand": !isActive,
               },
-              "group"
+              "group",
             )}
             aria-label={label as string}
           >
-            <Icon size={20} className="mr-0 md:mr-2" />
-            <span className="hidden md:inline">{label as string}</span>
+            <Icon size={20} className="mr-2" />
+            <span>{label as string}</span>
             {badge && (
               <span
                 className={clsx(
-                  "text-xs px-2 py-0.5 rounded-sm md:hidden",
+                  "text-xs px-2 py-0.5 rounded-sm ml-2 uppercase",
                   "group-hover:bg-pearl transition-all duration-300",
                   {
                     "bg-pearl": isActive,
                     "bg-sand": !isActive,
                   },
-                  "ml-1"
                 )}
               >
                 {badge}

package/dist/src/components/library/manga/MangaNav.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
+import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
 import { getReaderStats } from "@/actions/stats";
 import {
   type LibraryScope,
@@ -59,40 +60,48 @@ export default function MangaNav({
   const links = getMangaNavLinks({ lang, intl, section, pathname, stats });
 
   return (
-    <nav className="flex justify-center gap-2 md:gap-4">
-      {links.map(({ label, href, icon: Icon, isActive, count }) => (
-        <Link
-          key={href}
-          href={href}
-          className={clsx(
-            "flex flex-1 2xl:flex-none 2xl:basis-50 items-center justify-center",
-            "text-onix leading-none uppercase px-2 py-4 rounded-lg",
-            {
-              "bg-sand": isActive,
-              "hover:bg-sand": !isActive,
-            },
-            "transition-all duration-300 group",
-          )}
-        >
-          <Icon size={20} className="mr-0 md:mr-2" />
-          <span className="hidden md:inline">{label as string}</span>
-          {typeof count === "number" && (
-            <span
-              className={clsx(
-                "text-xs px-2 py-0.5 rounded-sm",
-                "group-hover:bg-pearl transition-all duration-300",
-                {
-                  "bg-pearl": isActive,
-                  "bg-sand": !isActive,
-                },
-                "ml-1 md:ml-2",
-              )}
-            >
-              {count}
-            </span>
-          )}
-        </Link>
-      ))}
-    </nav>
+    <>
+      <MobileSecondaryNav items={links.map((link) => ({
+        ...link,
+        label: String(link.label),
+        badge: link.count,
+      }))} />
+
+      <nav className="hidden md:flex justify-center gap-4">
+        {links.map(({ label, href, icon: Icon, isActive, count }) => (
+          <Link
+            key={href}
+            href={href}
+            className={clsx(
+              "flex flex-1 2xl:flex-none 2xl:basis-50 items-center justify-center",
+              "text-onix leading-none uppercase px-2 py-4 rounded-lg",
+              {
+                "bg-sand": isActive,
+                "hover:bg-sand": !isActive,
+              },
+              "transition-all duration-300 group",
+            )}
+          >
+            <Icon size={20} className="mr-2" />
+            <span>{label as string}</span>
+            {typeof count === "number" && (
+              <span
+                className={clsx(
+                  "text-xs px-2 py-0.5 rounded-sm",
+                  "group-hover:bg-pearl transition-all duration-300",
+                  {
+                    "bg-pearl": isActive,
+                    "bg-sand": !isActive,
+                  },
+                  "ml-2",
+                )}
+              >
+                {count}
+              </span>
+            )}
+          </Link>
+        ))}
+      </nav>
+    </>
   );
 }

package/dist/src/components/library/manga/MetadataPanel.tsx

@@ -1,20 +1,15 @@
 import Link from "next/link";
 import type { LibrarySection } from "@/lib/librarySection";
+import { normalizeCommaSeparatedText } from "@/lib/utils";
 import type { Locale, Dictionary } from "@/lib/types";
 
 function normalize(field: unknown): string | null {
   if (!field) return null;
   if (Array.isArray(field)) {
-    if (field.length === 0) return null;
-    return field.join(", ");
+    return normalizeCommaSeparatedText(field);
   }
   if (typeof field === "string") {
-    const parts = field
-      .split(",")
-      .map((s) => s.trim())
-      .filter(Boolean);
-    if (parts.length === 0) return null;
-    return parts.join(", ");
+    return normalizeCommaSeparatedText(field);
   }
   return String(field);
 }

package/dist/src/components/profile/ProfileNav.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { usePathname, useParams } from "next/navigation";
 import clsx from "clsx";
+import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
 import { getProfileNavLinks } from "@/lib/nav/profileNav";
 import type { DictionarySection } from "@/lib/types";
 
@@ -18,18 +19,23 @@ export default function ProfileNav({ intl }: ProfileNavProps) {
 
   return (
     <div className="mt-4 md:mt-16">
-      <div className={clsx("md:space-y-2", "flex md:block gap-2")}>
+      <MobileSecondaryNav items={links.map((link) => ({
+        ...link,
+        label: String(link.label),
+      }))} />
+
+      <div className={clsx("hidden md:space-y-2 md:block")}>
         {links.map(({ href, icon: Icon, label, isActive }, index) => (
           <Link
             key={index}
             href={href}
             className={clsx(
-              "flex flex-col md:flex-row justify-center md:justify-start w-full items-center p-4 rounded-lg leading-none text-onix transition-all duration-300",
+              "flex flex-row justify-start w-full items-center p-4 rounded-lg leading-none text-onix transition-all duration-300",
               isActive ? "bg-sand" : "hover:bg-sand"
             )}
           >
-            <Icon size={20} className="mr-1 md:mr-2" />
-            <span className="hidden md:inline">{label as string}</span>
+            <Icon size={20} className="mr-2" />
+            <span>{label as string}</span>
           </Link>
         ))}
       </div>

package/dist/src/components/profile/SubscriptionsTable.tsx

@@ -131,7 +131,7 @@ export default function SubscriptionsTable({ subscriptions: initial, intl }: Sub
                       onClick={() => !isLoading && handleDelete(sub.id, sub.endpoint)}
                       disabled={isLoading}
                       title={profile.unsubscribe as string}
-                      className="border border-stone-300 md:border-neutral-800 hover:text-danger-alt rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-danger-alt disabled:opacity-50 disabled:cursor-not-allowed"
+                      className="border border-neutral-800 hover:text-danger-alt rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-danger-alt disabled:opacity-50 disabled:cursor-not-allowed"
                     >
                       <Trash2Icon size={16} />
                     </button>

package/dist/src/components/settings/SettingsNav.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname, useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import clsx from "clsx";
+import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
 import { getSettingsNavLinks } from "@/lib/nav/settingsNav";
 import type { Dictionary } from "@/lib/types";
 
@@ -32,21 +33,23 @@ export default function SettingsNav({ intl }: SettingsNavProps) {
 
   return (
     <div className="mt-4 md:mt-16">
-      <div className="md:space-y-2 md:block flex gap-1">
+      <MobileSecondaryNav items={links} />
+
+      <div className="hidden md:space-y-2 md:block">
         {links.map(({ label, href, icon: Icon, isActive }) => (
           <Link
             key={href}
             href={href}
             className={clsx(
-              "flex items-center p-4 rounded-lg leading-none text-onix md:w-full justify-center md:justify-start flex-1 transition-all duration-300",
+              "flex items-center p-4 rounded-lg leading-none text-onix w-full justify-start transition-all duration-300",
               {
                 "bg-sand": isActive,
                 "hover:bg-sand": !isActive,
               }
             )}
           >
-            <Icon size={20} className="mr-0 md:mr-2" />
-            <span className="hidden md:inline">{label}</span>
+            <Icon size={20} className="mr-2" />
+            <span>{label}</span>
           </Link>
         ))}
       </div>

package/dist/src/components/settings/UsersTable.tsx

@@ -92,7 +92,7 @@ export default function UsersTable({
                       type="button"
                       onClick={() => handleEdit(user)}
                       title={intl.settings.edit as string}
-                      className="border border-stone-300 md:border-neutral-800 hover:text-pearl rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-lilah"
+                      className="border border-neutral-800 hover:text-pearl rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-lilah"
                     >
                       <UserRoundPenIcon size={16} />
                     </button>

package/dist/src/components/sidebar/MainNav.tsx

@@ -68,7 +68,7 @@ export default function MainNav({ intl, user }: MainNavProps) {
               </button>
 
               {openLibraryMenu && (
-                <div>
+                <div className="mt-1 md:mt-2 md:space-y-2">
                   {link.subItems?.map((subItem) => (
                     <Link
                       key={subItem.href}

package/dist/src/components/ui/MobileSecondaryNav.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronDownIcon, ChevronUpIcon, type LucideIcon } from "lucide-react";
+import clsx from "clsx";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export interface MobileSecondaryNavItem {
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  isActive: boolean;
+  badge?: string | number | null;
+}
+
+interface MobileSecondaryNavProps {
+  items: MobileSecondaryNavItem[];
+}
+
+export default function MobileSecondaryNav({ items }: MobileSecondaryNavProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const activeItem = useMemo(
+    () => items.find((item) => item.isActive) ?? items[0],
+    [items],
+  );
+
+  useEffect(() => {
+    setOpen(false);
+  }, [activeItem?.href]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open]);
+
+  if (!activeItem) {
+    return null;
+  }
+
+  const ActiveIcon = activeItem.icon;
+
+  return (
+    <div ref={containerRef} className="md:hidden mt-4 relative">
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+        className="w-full flex items-center justify-between gap-3 p-4 rounded-lg bg-sand text-onix leading-tight transition-all duration-300"
+      >
+        <span className="flex items-center min-w-0">
+          <ActiveIcon size={20} className="mr-2 shrink-0" />
+          <span className="truncate">{activeItem.label}</span>
+          {activeItem.badge !== undefined && activeItem.badge !== null && (
+            <span className="ml-2 text-xs px-2 py-0.5 rounded-sm bg-pearl shrink-0 uppercase">
+              {activeItem.badge}
+            </span>
+          )}
+        </span>
+        {open ? (
+          <ChevronUpIcon size={20} className="shrink-0" />
+        ) : (
+          <ChevronDownIcon size={20} className="shrink-0" />
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute left-0 right-0 top-full mt-2 z-20 rounded-lg bg-blackamber p-2">
+          <nav className="space-y-1">
+            {items.map(({ href, icon: Icon, label, isActive, badge }) => (
+              <Link
+                key={href}
+                href={href}
+                prefetch={false}
+                onClick={() => setOpen(false)}
+                className={clsx(
+                  "flex items-center justify-between gap-3 rounded p-3 leading-tight transition-all duration-300",
+                  isActive
+                    ? "bg-sand text-onix"
+                    : "text-sand hover:bg-onix hover:text-pearl",
+                )}
+              >
+                <span className="flex items-center min-w-0">
+                  <Icon size={20} className="mr-2 shrink-0" />
+                  <span className="truncate">{label}</span>
+                </span>
+                {badge !== undefined && badge !== null && (
+                  <span
+                    className={clsx(
+                      "text-xs px-2 py-0.5 rounded-sm shrink-0 uppercase",
+                      isActive ? "bg-pearl text-onix" : "bg-sand text-onix",
+                    )}
+                  >
+                    {badge}
+                  </span>
+                )}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      )}
+    </div>
+  );
+}