adding mobile responsive headers

src/components/header.tsx

@@ -33,6 +33,7 @@ export function Header() {
   };
 
   const logoSrc = !mounted ? '/logo-dark.svg' : theme === 'dark' ? '/logo-dark.svg' : '/logo-light.svg';
+  const mobileLogoSrc = '/logo-flower.svg';
 
   const navLinks = [
     { href: '/', label: 'Swap' },
@@ -45,31 +46,31 @@ export function Header() {
     <header className="border-b">
       <div className="container mx-auto px-4 py-4 flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/">
+          {/* Desktop logo - just a link */}
+          <Link href="/" className="hidden sm:block">
             <img
               src={logoSrc}
               alt="Liquidity Party"
               className="h-8 w-auto cursor-pointer"
             />
           </Link>
+
+          {/* Mobile logo - toggles menu */}
+          <button
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            className="sm:hidden focus:outline-none"
+          >
+            <img
+              src={mobileLogoSrc}
+              alt="Liquidity Party"
+              className="h-8 w-8 cursor-pointer"
+            />
+            <span className="sr-only">Toggle menu</span>
+          </button>
+
           <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">