Fix mobile layout

Author: Jawnnypoo

src/components/Header/Header.css

@@ -65,7 +65,6 @@
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    margin: 0 auto;
 }
 
 .logo-image {
@@ -79,6 +78,29 @@
     color: var(--primary-color);
 }
 
+.hamburger-menu {
+    display: none;
+    flex-direction: column;
+    gap: 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    z-index: 101;
+}
+
+.hamburger-menu span {
+    width: 24px;
+    height: 2px;
+    background-color: var(--text-secondary);
+    transition: all 0.3s ease;
+    border-radius: 2px;
+}
+
+.hamburger-menu:hover span {
+    background-color: var(--primary-color);
+}
+
 .nav-links {
     display: flex;
     align-items: center;
@@ -215,17 +237,36 @@
         font-size: 1.25rem;
     }
 
-    .nav-logo {
-        margin-left: 3rem;
+    .hamburger-menu {
+        display: flex;
     }
 
     .nav-links {
-        gap: 1rem;
+        position: fixed;
+        top: 0;
+        right: -100%;
+        height: 100vh;
+        width: 70%;
+        max-width: 300px;
+        background: var(--background-primary);
+        flex-direction: column;
+        padding: 5rem 2rem 2rem;
+        gap: 1.5rem;
+        transition: right 0.3s ease;
+        border-left: 1px solid var(--border-color);
+        z-index: 100;
+        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
+    }
+
+    .nav-links.mobile-open {
+        right: 0;
     }
 
     .nav-link {
-        font-size: 0.875rem;
-        padding: 6px 12px;
+        font-size: 1rem;
+        padding: 12px 16px;
+        width: 100%;
+        text-align: left;
     }
 
     .profile-button,

src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './Header.css';
 import {useAuth} from '../../contexts/AuthContext';
 
@@ -8,37 +8,55 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = ({isSubpage = false}) => {
     const {user} = useAuth();
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
     return (
         <header className="app-header">
             <nav className="app-nav">
-                {isSubpage && (
-                    <button onClick={() => window.location.hash = ''} className="back-arrow" title="Back to Home">
-                        ←
-                    </button>
-                )}
                 <div className="nav-logo" onClick={() => window.location.hash = ''} style={{cursor: 'pointer'}}>
                     <img src="images/logo_salamander.png" alt="Salamander" className="logo-image"/>
                     <h1>Salamander</h1>
                 </div>
-                <div className="nav-links">
-                    <button onClick={() => window.location.hash = 'learn-more'}
-                            className="nav-link nav-link-secondary">Get Started
+                <button
+                    className="hamburger-menu"
+                    onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                    aria-label="Toggle menu"
+                >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+                <div className={`nav-links ${mobileMenuOpen ? 'mobile-open' : ''}`}>
+                    <button onClick={() => {
+                        window.location.hash = 'learn-more';
+                        setMobileMenuOpen(false);
+                    }} className="nav-link nav-link-secondary">Get Started
                     </button>
-                    <button onClick={() => window.location.hash = 'pricing'} className="nav-link">Pricing</button>
+                    <button onClick={() => {
+                        window.location.hash = 'pricing';
+                        setMobileMenuOpen(false);
+                    }} className="nav-link">Pricing</button>
                     {user ? (
                         <button
                             className="nav-link"
-                            onClick={() => window.location.hash = 'account'}
+                            onClick={() => {
+                                window.location.hash = 'account';
+                                setMobileMenuOpen(false);
+                            }}
                             title={`${user.displayName || user.email} - View Account`}
                         >
                             Profile
                         </button>
                     ) : (
                         <>
-                            <button onClick={() => window.location.hash = 'auth'} className="nav-link">Log In</button>
-                            <button onClick={() => window.location.hash = 'auth'}
-                                    className="nav-link nav-link-primary">Sign Up
+                            <button onClick={() => {
+                                window.location.hash = 'auth';
+                                setMobileMenuOpen(false);
+                            }} className="nav-link">Log In</button>
+                            <button onClick={() => {
+                                window.location.hash = 'auth';
+                                setMobileMenuOpen(false);
+                            }} className="nav-link nav-link-primary">Sign Up
                             </button>
                         </>
                     )}