diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx index 76bae6f..4eef427 100644 --- a/src/components/layout/AppShell/AppShell.tsx +++ b/src/components/layout/AppShell/AppShell.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'; import { useLocation, Link } from 'react-router'; import { useQuery } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; +import { motion } from 'framer-motion'; import { useAuthStore } from '@/store/auth'; import { useHaptic } from '@/platform'; @@ -109,11 +110,13 @@ export function AppShell({ children }: AppShellProps) { }; }, []); - // Desktop navigation items - const desktopNavItems = [ + // Desktop navigation — labels always visible (no hover-reveal gimmick) + const desktopNav = [ { path: '/', label: t('nav.dashboard'), icon: HomeIcon }, { path: '/subscriptions', label: t('nav.subscription'), icon: SubscriptionIcon }, { path: '/balance', label: t('nav.balance'), icon: CreditCardIcon }, + ...(referralEnabled ? [{ path: '/referral', label: t('nav.referral'), icon: UsersIcon }] : []), + ...(giftEnabled ? [{ path: '/gift', label: t('nav.gift'), icon: GiftIcon }] : []), { path: '/support', label: t('nav.support'), icon: ChatIcon }, { path: '/info', label: t('nav.info'), icon: InfoIcon }, { path: '/profile', label: t('nav.profile'), icon: UserIcon }, @@ -128,6 +131,48 @@ export function AppShell({ children }: AppShellProps) { haptic.impact('light'); }; + // A single elegant nav link: icon + label always visible, with a shared + // framer-motion pill that slides to the active item on navigation. + const renderNavLink = ( + path: string, + label: string, + Icon: React.ComponentType<{ className?: string }>, + admin = false, + ) => { + const active = admin ? location.pathname.startsWith('/admin') : isActive(path); + return ( + + {active && ( + + )} + + {label} + + ); + }; + // headerHeight comes from useHeaderHeight() — accounts for TG safe area in fullscreen return ( @@ -170,81 +215,12 @@ export function AppShell({ children }: AppShellProps) { {/* Center Navigation */} -