@itsmrtr/bunkoshelf 1.4.0 → 1.5.0

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

@@ -1,10 +1,13 @@
+import Link from "next/link";
 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";
+import type { Dictionary, Locale } from "@/lib/types";
 
 interface CatalogAuthorsTableProps {
   data: PaginatedResult<CatalogAuthorStats>;
   intl: Dictionary;
+  lang: Locale;
 }
 
 function renderValue(value: number | string | null | undefined) {
@@ -23,22 +26,44 @@ function renderAvgRating(value: number | null) {
   return Number(value).toFixed(1);
 }
 
+function renderAuthorName(
+  value: string | null | undefined,
+  unknownAuthorLabel: string
+) {
+  return normalizeCommaSeparatedText(value) ?? unknownAuthorLabel;
+}
+
 function renderLibraries(
+  lang: Locale,
+  author: string | null,
   hasManga: boolean,
   hasOthers: boolean,
   hasBooks: boolean
 ) {
+  const authorParam = author?.trim() ? author.trim() : "__unknown__";
+
+  function buildHref(section: "manga" | "others") {
+    const params = new URLSearchParams({ author: authorParam });
+    return `/${lang}/${section}/volumes?${params.toString()}`;
+  }
+
   return (
     <div className="flex items-center justify-center gap-1 flex-wrap">
       {hasManga && (
-        <span className="bg-pearl text-onix px-2 rounded-full text-xs uppercase">
+        <Link
+          href={buildHref("manga")}
+          className="bg-pearl text-onix px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
+        >
           Manga
-        </span>
+        </Link>
       )}
       {hasOthers && (
-        <span className="bg-neutral-700 px-2 rounded-full text-xs uppercase">
+        <Link
+          href={buildHref("others")}
+          className="bg-neutral-700 px-2 rounded-full text-xs uppercase transition-opacity hover:opacity-80"
+        >
           Cómic
-        </span>
+        </Link>
       )}
       {hasBooks && (
         <span className="border border-pearl px-2 rounded-full text-xs uppercase">
@@ -52,7 +77,11 @@ function renderLibraries(
 export default function CatalogAuthorsTable({
   data,
   intl,
+  lang,
 }: CatalogAuthorsTableProps) {
+  const unknownAuthorLabel =
+    (intl.catalog.unknownAuthor as string | undefined) || "Unknown";
+
   return (
     <>
       <div className="bg-blackamber p-4 rounded-lg">
@@ -81,8 +110,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">
@@ -93,6 +122,8 @@ export default function CatalogAuthorsTable({
                   </td>
                   <td className="p-4 text-center">
                     {renderLibraries(
+                      lang,
+                      author.author,
                       author.hasManga,
                       author.hasOthers,
                       author.hasBooks

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/FiltersDrawer.tsx

@@ -14,6 +14,17 @@ interface FilterItem {
   name: string;
 }
 
+const UNKNOWN_AUTHOR_ID = "__unknown__";
+
+function splitFilterParam(value: string | null) {
+  if (!value) return [];
+
+  return value
+    .split(",")
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+}
+
 interface FiltersDrawerProps {
   intl: DictionarySection;
   scope?: LibraryScope;
@@ -27,19 +38,26 @@ export default function FiltersDrawer({
   const searchParams = useSearchParams();
 
   const [isOpen, setIsOpen] = useState(false);
+  const [authors, setAuthors] = useState<FilterItem[]>([]);
   const [genres, setGenres] = useState<FilterItem[]>([]);
   const [tags, setTags] = useState<FilterItem[]>([]);
+  const [selectedAuthors, setSelectedAuthors] = useState<string[]>([]);
   const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
   const filters = intl.filters as DictionarySection;
+  const catalog = intl.catalog as DictionarySection | undefined;
+  const unknownAuthorLabel =
+    (catalog?.unknownAuthor as string | undefined) || "Unknown";
 
   useEffect(() => {
+    const authorParam = searchParams.get("author");
     const genreParam = searchParams.get("genre");
     const tagParam = searchParams.get("tag");
 
-    setSelectedGenres(genreParam ? genreParam.split(",") : []);
-    setSelectedTags(tagParam ? tagParam.split(",") : []);
+    setSelectedAuthors(splitFilterParam(authorParam));
+    setSelectedGenres(splitFilterParam(genreParam));
+    setSelectedTags(splitFilterParam(tagParam));
   }, [searchParams]);
 
   useEffect(() => {
@@ -47,6 +65,7 @@ export default function FiltersDrawer({
       try {
         const data = await getLibraryFilters({ scope });
         if (!data || "error" in data) throw new Error("Error fetching filters");
+        setAuthors(data.authors);
         setGenres(data.genres);
         setTags(data.tags);
       } catch (e) {
@@ -64,6 +83,14 @@ export default function FiltersDrawer({
     );
   }
 
+  function toggleAuthor(authorName: string) {
+    setSelectedAuthors((prev) =>
+      prev.includes(authorName)
+        ? prev.filter((author) => author !== authorName)
+        : [...prev, authorName]
+    );
+  }
+
   function toggleTag(tagName: string) {
     setSelectedTags((prev) =>
       prev.includes(tagName)
@@ -75,6 +102,7 @@ export default function FiltersDrawer({
   function applyFilters() {
     const params = new URLSearchParams();
 
+    if (selectedAuthors.length) params.set("author", selectedAuthors.join(","));
     if (selectedGenres.length) params.set("genre", selectedGenres.join(","));
     if (selectedTags.length) params.set("tag", selectedTags.join(","));
     params.set("page", "1");
@@ -84,13 +112,15 @@ export default function FiltersDrawer({
   }
 
   function clearFilters() {
+    setSelectedAuthors([]);
     setSelectedGenres([]);
     setSelectedTags([]);
     router.push(`?page=1`);
     setIsOpen(false);
   }
 
-  const totalFilters = selectedGenres.length + selectedTags.length;
+  const totalFilters =
+    selectedAuthors.length + selectedGenres.length + selectedTags.length;
   const isFiltering = totalFilters > 0;
 
   return (
@@ -140,6 +170,27 @@ export default function FiltersDrawer({
         </header>
 
         <div className="p-4 flex flex-col gap-4 flex-grow overflow-hidden">
+          <Accordion title={filters.authors as string}>
+            <ul className="space-y-1 max-h-44 md:max-h-64 overflow-auto pr-2">
+              {authors.map((author) => (
+                <li key={author.id}>
+                  <label className="inline-flex items-center space-x-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={selectedAuthors.includes(author.name)}
+                      onChange={() => toggleAuthor(author.name)}
+                    />
+                    <span className="capitalize">
+                      {author.name === UNKNOWN_AUTHOR_ID
+                        ? unknownAuthorLabel
+                        : author.name}
+                    </span>
+                  </label>
+                </li>
+              ))}
+            </ul>
+          </Accordion>
+
           <Accordion title={filters.genres as string}>
             <ul className="space-y-1 max-h-44 md:max-h-64 overflow-auto pr-2">
               {genres.map((genre) => (

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/library/manga/grid/SeriesIndex.tsx

@@ -19,6 +19,7 @@ interface SeriesIndexProps {
   lang: Locale;
   intl: Dictionary;
   page?: number;
+  authorFilter?: string | string[];
   genreFilter?: string | string[];
   tagFilter?: string | string[];
   scope?: LibraryScope;
@@ -29,11 +30,14 @@ export default async function SeriesIndex({
   lang,
   intl,
   page = 1,
+  authorFilter = [],
   genreFilter = [],
   tagFilter = [],
   scope = "all",
   section = "manga",
 }: SeriesIndexProps) {
+  const authorList =
+    typeof authorFilter === "string" ? authorFilter.split(",") : authorFilter;
   const genreList =
     typeof genreFilter === "string" ? genreFilter.split(",") : genreFilter;
   const tagList =
@@ -44,6 +48,7 @@ export default async function SeriesIndex({
     listPagedSeriesWithVolumes({
       page,
       pageSize: LIBRARY_PAGE_SIZE,
+      authorNames: authorList,
       genreNames: genreList,
       tagNames: tagList,
       includeGenres: true,

package/dist/src/components/library/manga/grid/VolumesIndex.tsx

@@ -18,6 +18,7 @@ interface VolumesIndexProps {
   lang: Locale;
   intl: Dictionary;
   page?: number;
+  authorFilter?: string | string[];
   genreFilter?: string | string[];
   tagFilter?: string | string[];
   scope?: LibraryScope;
@@ -28,12 +29,15 @@ export default async function VolumesIndex({
   lang,
   intl,
   page = 1,
+  authorFilter = [],
   genreFilter = [],
   tagFilter = [],
   scope = "all",
   section = "manga",
 }: VolumesIndexProps) {
   const user = await verifySession();
+  const authorList =
+    typeof authorFilter === "string" ? authorFilter.split(",") : authorFilter;
   const genreList =
     typeof genreFilter === "string" ? genreFilter.split(",") : genreFilter;
   const tagList =
@@ -44,6 +48,7 @@ export default async function VolumesIndex({
     pageSize: LIBRARY_PAGE_SIZE,
     includeGenres: true,
     includeTags: true,
+    authorNames: authorList,
     genreNames: genreList,
     tagNames: tagList,
     scope,

package/dist/src/components/library/manga/grid/WantToRead.tsx

@@ -18,6 +18,7 @@ interface WantToReadProps {
   lang: Locale;
   intl: Dictionary;
   page?: number;
+  authorFilter?: string | string[];
   genreFilter?: string | string[];
   tagFilter?: string | string[];
   scope?: LibraryScope;
@@ -28,6 +29,7 @@ export default async function WantToRead({
   lang,
   intl,
   page = 1,
+  authorFilter = [],
   genreFilter = [],
   tagFilter = [],
   scope = "all",
@@ -36,6 +38,8 @@ export default async function WantToRead({
   const user = await verifySession();
   if (!user) return null;
 
+  const authorList =
+    typeof authorFilter === "string" ? authorFilter.split(",") : authorFilter;
   const genreList =
     typeof genreFilter === "string" ? genreFilter.split(",") : genreFilter;
   const tagList =
@@ -47,6 +51,7 @@ export default async function WantToRead({
     pageSize: LIBRARY_PAGE_SIZE,
     includeGenres: true,
     includeTags: true,
+    authorNames: authorList,
     genreNames: genreList,
     tagNames: tagList,
     onlyUnreadForUser: true,

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>