From 375a32e69d3005efcd98193f7d6c22b5363cfeb3 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Fri, 14 Aug 2026 15:02:12 +0200
Subject: [PATCH] feat(nav): add Sponsoring link to mobile pet-switcher
 dropdown

Desktop sidebar already lists /unterstuetzen as a primary nav item, but
mobile had no way to reach it at all. The 5-slot bottom tab bar has no
room for a 6th destination, so it goes in the pet-switcher dropdown
next to the existing secondary actions (add pet, theme toggle) instead
of a second floating header icon.
---
 src/components/layout/MobileNav.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx
index 15cf26b..8d19067 100644
--- a/src/components/layout/MobileNav.tsx
+++ b/src/components/layout/MobileNav.tsx
@@ -13,6 +13,7 @@ import {
   BadgeCheck,
   Moon,
   Sun,
+  Sparkles,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { NotificationBell } from "@/components/notifications/NotificationBell";
@@ -76,6 +77,7 @@ export function MobileNav({ pets }: MobileNavProps) {
   const isExplorePage = pathname.startsWith("/explore");
   const isNotificationsPage = pathname.startsWith("/notifications");
   const isMessagesPage = pathname.startsWith("/messages");
+  const isSponsorPage = pathname.startsWith("/unterstuetzen");
 
   return (
     <div className="lg:hidden fixed bottom-0 left-0 right-0 z-50">
@@ -148,6 +150,13 @@ export function MobileNav({ pets }: MobileNavProps) {
                 <span className="text-orange-500">+</span>
                 <span>{t("addPet")}</span>
               </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => router.push("/unterstuetzen")}
+                className={`flex items-center gap-2 cursor-pointer ${isSponsorPage ? "text-orange-500" : ""}`}
+              >
+                <Sparkles className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+                <span>{t("sponsor")}</span>
+              </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() => setDark(!isDark)}
                 className="flex items-center gap-2 cursor-pointer"