...

src/components/Navigation.jsx

@@ -1,10 +1,13 @@
+import { useState } from 'react'
 import { Button } from '@/components/ui/button.jsx'
-import { Globe } from 'lucide-react'
+import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/sheet.jsx'
+import { Globe, Menu } from 'lucide-react'
 import { Link, useLocation } from 'react-router-dom'
 import navigationData from '../config/navigation.json'
 
 function Navigation() {
   const location = useLocation()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
   
   const isActive = (path) => {
     return location.pathname === path
@@ -18,6 +21,8 @@ function Navigation() {
             <Globe className="h-8 w-8 text-blue-600" />
             <span className="text-xl font-bold text-slate-900">ThreeFold Galaxy</span>
           </Link>
+
+          {/* Desktop Navigation */}
           <div className="hidden md:flex items-center space-x-8">
             {navigationData
               .filter(item => item.show !== false)
@@ -34,6 +39,39 @@ function Navigation() {
               <Link to="/register">Join Now</Link>
             </Button>
           </div>
+
+          {/* Mobile Navigation */}
+          <div className="md:hidden">
+            <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon">
+                  <Menu className="h-6 w-6" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="right" className="bg-white text-slate-900 sm:max-w-sm py-6">
+                <div className="flex flex-col items-center space-y-4 pt-6">
+                  {navigationData
+                    .filter(item => item.show !== false)
+                    .map((item) => (
+                      <SheetClose asChild key={item.path}>
+                        <Link
+                          to={item.path}
+                          className={`text-xl font-medium text-center ${isActive(item.path) ? 'text-blue-600' : 'text-slate-900 hover:text-blue-600'}`}
+                          onClick={() => setIsMobileMenuOpen(false)}
+                        >
+                          {item.label}
+                        </Link>
+                      </SheetClose>
+                    ))}
+                  <SheetClose asChild>
+                    <Button asChild className="bg-blue-600 hover:bg-blue-700">
+                      <Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link>
+                    </Button>
+                  </SheetClose>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
         </div>
       </div>
     </nav>