feat: enhance MainLayout with mobile navigation and logout functionality

- Introduced a responsive navigation menu for mobile devices, allowing users to access key sections easily.
- Added a logout button with both icon and text options for better user experience.
- Updated language switcher to include a globe icon for improved visual representation.
- Added "logout" translations in English and Chinese locales.

Author: huhusmang

src/components/layouts/MainLayout.tsx

@@ -5,6 +5,7 @@ import {
   BarChart3,
   CreditCard,
   History,
+  LogOut,
 } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
@@ -23,6 +24,34 @@ export function MainLayout({ children }: MainLayoutProps) {
   const { t } = useTranslation('navigation')
   const { user, logout } = useAuthStore()
 
+  const navLinks = [
+    {
+      to: '/',
+      icon: <Home className="h-4 w-4" />,
+      text: t('dashboard'),
+    },
+    {
+      to: '/subscriptions',
+      icon: <CreditCard className="h-4 w-4" />,
+      text: t('subscriptions'),
+    },
+    {
+      to: '/expense-reports',
+      icon: <BarChart3 className="h-4 w-4" />,
+      text: t('reports'),
+    },
+    {
+      to: '/notifications',
+      icon: <History className="h-4 w-4" />,
+      text: t('notifications'),
+    },
+    {
+      to: '/settings',
+      icon: <Settings className="h-4 w-4" />,
+      text: t('settings'),
+    },
+  ]
+
   return (
     <div className="flex flex-col min-h-screen bg-background">
       <header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur">
@@ -31,64 +60,86 @@ export function MainLayout({ children }: MainLayoutProps) {
             <Link to="/" className="flex items-center space-x-2">
               <span className="font-bold text-lg sm:text-xl">SubManager</span>
             </Link>
+            <nav className="hidden md:flex items-center gap-1 sm:gap-2">
+              {navLinks.map((link) => (
+                <Link to={link.to} key={link.to}>
+                  <Button
+                    variant={
+                      location.pathname === link.to ? 'default' : 'ghost'
+                    }
+                    size="sm"
+                    className="px-2 sm:px-3"
+                  >
+                    {link.icon}
+                    <span className="md:ml-2">{link.text}</span>
+                  </Button>
+                </Link>
+              ))}
+            </nav>
           </div>
 
-          <div className="flex items-center gap-1 sm:gap-2">
-            <Link to="/">
-              <Button variant={location.pathname === '/' ? "default" : "ghost"} size="sm" className="px-2 sm:px-3">
-                <Home className="h-4 w-4 sm:mr-2" />
-                <span className="hidden sm:inline">{t('dashboard')}</span>
-              </Button>
-            </Link>
-
-            <Link to="/subscriptions">
-              <Button variant={location.pathname === '/subscriptions' ? "default" : "ghost"} size="sm" className="px-2 sm:px-3">
-                <CreditCard className="h-4 w-4 sm:mr-2" />
-                <span className="hidden sm:inline">{t('subscriptions')}</span>
-              </Button>
-            </Link>
-
-            <Link to="/expense-reports">
-              <Button variant={location.pathname === '/expense-reports' ? "default" : "ghost"} size="sm" className="px-2 sm:px-3">
-                <BarChart3 className="h-4 w-4 sm:mr-2" />
-                <span className="hidden sm:inline">{t('reports')}</span>
-              </Button>
-            </Link>
-
-            <Link to="/notifications">
-              <Button variant={location.pathname === '/notifications' ? "default" : "ghost"} size="sm" className="px-2 sm:px-3">
-                <History className="h-4 w-4 sm:mr-2" />
-                <span className="hidden sm:inline">{t('notifications')}</span>
-              </Button>
-            </Link>
-
-            <Link to="/settings">
-              <Button variant={location.pathname === '/settings' ? "default" : "ghost"} size="sm" className="px-2 sm:px-3">
-                <Settings className="h-4 w-4 sm:mr-2" />
-                <span className="hidden sm:inline">{t('settings')}</span>
-              </Button>
-            </Link>
-
-            <div className="flex items-center gap-2">
-              <LanguageSwitcher />
-              <ModeToggle />
-              {user && (
-                <UIButton variant="ghost" size="sm" onClick={logout}>Logout</UIButton>
-              )}
-            </div>
+          <div className="flex items-center gap-2">
+            <LanguageSwitcher />
+            <ModeToggle />
+            {user && (
+              <>
+                <UIButton
+                  variant="ghost"
+                  size="sm"
+                  onClick={logout}
+                  className="hidden md:inline-flex"
+                >
+                  {t('logout')}
+                </UIButton>
+                <UIButton
+                  variant="ghost"
+                  size="icon"
+                  onClick={logout}
+                  className="md:hidden"
+                >
+                  <LogOut className="h-5 w-5" />
+                </UIButton>
+              </>
+            )}
           </div>
         </div>
       </header>
-      
-      <main className="container py-4 sm:py-6 px-4 sm:px-6 flex-grow">{children}</main>
-      
-      <footer className="border-t py-4 sm:py-6">
+
+      <main className="container py-4 sm:py-6 px-4 sm:px-6 flex-grow pb-20 md:pb-6">
+        {children}
+      </main>
+
+      <footer className="border-t py-4 sm:py-6 hidden md:block">
         <div className="container flex flex-col items-center justify-center gap-4 md:flex-row md:gap-6 px-4 sm:px-6">
           <p className="text-center text-sm leading-loose text-muted-foreground">
             &copy; {new Date().getFullYear()} SubManager. All rights reserved.
           </p>
         </div>
       </footer>
+
+      {/* Bottom Navigation for Mobile */}
+      <div className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t bg-background">
+        <div className="container mx-auto px-4">
+          <nav className="flex justify-around items-center h-16">
+            {navLinks.map((link) => (
+              <Link
+                to={link.to}
+                key={link.to}
+                className="flex flex-col items-center justify-center text-muted-foreground hover:text-primary"
+              >
+                <Button
+                  variant={
+                    location.pathname === link.to ? 'secondary' : 'ghost'
+                  }
+                  size="icon"
+                >
+                  {link.icon}
+                </Button>
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </div>
     </div>
   )
 }

src/components/ui/LanguageSwitcher.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Globe } from 'lucide-react';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
 import { cn } from '@/lib/utils';
 import { apiClient } from '@/utils/api-client';
@@ -50,6 +51,7 @@ export function LanguageSwitcher() {
       <SelectTrigger className={cn(
         "w-auto min-w-0 px-3 py-2 h-9 gap-1.5"
       )}>
+        <Globe className="h-4 w-4" />
         <SelectValue>
           {currentLanguage?.name || t('language')}
         </SelectValue>

src/i18n/locales/en/navigation.json

@@ -5,5 +5,6 @@
   "settings": "Settings",
   "dashboard": "Dashboard",
   "expenseReports": "Expense Reports",
-  "notifications": "Notification History"
+  "notifications": "Notification History",
+  "logout": "Logout"
 }

src/i18n/locales/zh-CN/navigation.json

@@ -5,5 +5,6 @@
   "settings": "设置",
   "dashboard": "仪表板",
   "expenseReports": "支出报表",
-  "notifications": "通知历史"
+  "notifications": "通知历史",
+  "logout": "登出"
 }