burn swap and page menu updates

src/components/header.tsx

@@ -4,19 +4,27 @@ import { useTheme } from 'next-themes';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
 import { LanguageSelector } from '@/components/language-selector';
-import { Moon, Sun } from 'lucide-react';
+import { Moon, Sun, Menu, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 export function Header() {
   const { theme, setTheme } = useTheme();
   const { t } = useTranslation();
   const [mounted, setMounted] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  useEffect(() => {
+    // Close mobile menu when route changes
+    setMobileMenuOpen(false);
+  }, [pathname]);
+
   const toggleTheme = () => {
     console.log('Toggle clicked, current theme:', theme);
     const newTheme = theme === 'dark' ? 'light' : 'dark';
@@ -26,6 +34,13 @@ export function Header() {
 
   const logoSrc = !mounted ? '/logo-dark.svg' : theme === 'dark' ? '/logo-dark.svg' : '/logo-light.svg';
 
+  const navLinks = [
+    { href: '/', label: 'Swap' },
+    { href: '/stake', label: 'Stake' },
+    { href: '/unstake', label: 'Unstake' },
+    { href: '/about', label: 'About' },
+  ];
+
   return (
     <header className="border-b">
       <div className="container mx-auto px-4 py-4 flex items-center justify-between">
@@ -40,37 +55,95 @@ export function Header() {
           <span className="bg-yellow-500/20 text-yellow-500 text-xs font-bold px-2 py-1 rounded border border-yellow-500/50">
             BETA
           </span>
+
+          {/* Mobile Menu Button - Moved to left side */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="md:hidden"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? (
+              <X className="h-5 w-5" />
+            ) : (
+              <Menu className="h-5 w-5" />
+            )}
+            <span className="sr-only">Toggle menu</span>
+          </Button>
         </div>
 
         <div className="flex items-center gap-2">
-          {/* Navigation Links */}
+          {/* Desktop Navigation Links */}
           <nav className="hidden md:flex items-center gap-1 mr-2">
-            <Link href="/">
-              <Button variant="ghost" size="sm" className="text-sm font-medium">
-                Swap
-              </Button>
-            </Link>
-            <Link href="/about">
-              <Button variant="ghost" size="sm" className="text-sm font-medium">
-                About
-              </Button>
-            </Link>
+            {navLinks.map((link) => (
+              <Link key={link.href} href={link.href}>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={`text-sm font-medium ${pathname === link.href ? 'bg-accent' : ''}`}
+                >
+                  {link.label}
+                </Button>
+              </Link>
+            ))}
           </nav>
 
-          {/* Language Selector */}
-          <LanguageSelector />
+          {/* Language Selector - Hidden on small screens */}
+          <div className="hidden sm:block">
+            <LanguageSelector />
+          </div>
 
-          {/* Theme Toggle */}
-          <Button variant="ghost" size="icon" onClick={toggleTheme} type="button">
+          {/* Theme Toggle - Hidden on mobile */}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={toggleTheme}
+            type="button"
+            className="hidden sm:flex"
+          >
             <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
             <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span className="sr-only">Toggle theme</span>
           </Button>
 
-          {/* Wallet Connect */}
+          {/* Wallet Connect - Always visible */}
           <ConnectButton />
         </div>
       </div>
+
+      {/* Mobile Menu */}
+      {mobileMenuOpen && (
+        <div className="md:hidden border-t">
+          <nav className="container mx-auto px-4 py-4 flex flex-col gap-2">
+            {navLinks.map((link) => (
+              <Link key={link.href} href={link.href}>
+                <Button
+                  variant="ghost"
+                  className={`w-full justify-start text-base font-medium ${pathname === link.href ? 'bg-accent' : ''}`}
+                >
+                  {link.label}
+                </Button>
+              </Link>
+            ))}
+            <div className="flex items-center gap-2 pt-2 border-t mt-2">
+              <div className="flex-1">
+                <LanguageSelector />
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={toggleTheme}
+                type="button"
+                className="flex-shrink-0"
+              >
+                <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span className="sr-only">Toggle theme</span>
+              </Button>
+            </div>
+          </nav>
+        </div>
+      )}
     </header>
   );
 }