From c1db9727c7135c5f5e10e7e13837a3e57cea1aaf Mon Sep 17 00:00:00 2001
From: Yves Gugger <guggeryves@hotmail.com>
Date: Sat, 13 Dec 2025 13:19:54 +0100
Subject: [PATCH] Mobile: Beautiful slide-in navigation drawer

---
 frontend/src/app/terminal/radar/page.tsx | 200 ++++++++++++++++++++++-
 1 file changed, 196 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/terminal/radar/page.tsx b/frontend/src/app/terminal/radar/page.tsx
index 1dffefe..f375dac 100644
--- a/frontend/src/app/terminal/radar/page.tsx
+++ b/frontend/src/app/terminal/radar/page.tsx
@@ -25,7 +25,14 @@ import {
   ChevronRight,
   Sparkles,
   Radio,
-  Activity
+  Activity,
+  Menu,
+  Tag,
+  Coins,
+  Shield,
+  LogOut,
+  Crown,
+  ChevronDown
 } from 'lucide-react'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -59,7 +66,7 @@ interface SearchResult {
 // ============================================================================
 
 export default function RadarPage() {
-  const { isAuthenticated, domains, addDomain } = useStore()
+  const { isAuthenticated, domains, addDomain, user, subscription, logout } = useStore()
   const { toast, showToast, hideToast } = useToast()
   
   const [hotAuctions, setHotAuctions] = useState<HotAuction[]>([])
@@ -71,6 +78,9 @@ export default function RadarPage() {
   const [addingToWatchlist, setAddingToWatchlist] = useState(false)
   const [searchFocused, setSearchFocused] = useState(false)
   const searchInputRef = useRef<HTMLInputElement>(null)
+  
+  // Mobile Menu State
+  const [menuOpen, setMenuOpen] = useState(false)
 
   // Load Data
   const loadDashboardData = useCallback(async () => {
@@ -147,13 +157,41 @@ export default function RadarPage() {
   const availableDomains = domains?.filter(d => d.is_available) || []
   const totalDomains = domains?.length || 0
 
-  // Nav Items for Mobile
+  // Nav Items for Mobile Bottom Bar
   const mobileNavItems = [
     { href: '/terminal/radar', label: 'Radar', icon: Target, active: true },
     { href: '/terminal/market', label: 'Market', icon: Gavel, active: false },
     { href: '/terminal/watchlist', label: 'Watch', icon: Eye, active: false },
     { href: '/terminal/intel', label: 'Intel', icon: TrendingUp, active: false },
-    { href: '/terminal/settings', label: 'More', icon: Settings, active: false },
+  ]
+  
+  // Full Navigation for Drawer
+  const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
+  const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
+  
+  const drawerNavSections = [
+    {
+      title: 'Discover',
+      items: [
+        { href: '/terminal/radar', label: 'Radar', icon: Target },
+        { href: '/terminal/market', label: 'Market', icon: Gavel },
+        { href: '/terminal/intel', label: 'Intel', icon: TrendingUp },
+      ]
+    },
+    {
+      title: 'Manage',
+      items: [
+        { href: '/terminal/watchlist', label: 'Watchlist', icon: Eye },
+        { href: '/terminal/sniper', label: 'Sniper', icon: Target },
+      ]
+    },
+    {
+      title: 'Monetize',
+      items: [
+        { href: '/terminal/yield', label: 'Yield', icon: Coins, isNew: true },
+        { href: '/terminal/listing', label: 'For Sale', icon: Tag },
+      ]
+    }
   ]
 
   return (
@@ -521,8 +559,162 @@ export default function RadarPage() {
                 <span className="text-[10px] font-medium">{item.label}</span>
               </Link>
             ))}
+            
+            {/* Menu Button */}
+            <button
+              onClick={() => setMenuOpen(true)}
+              className="flex-1 flex flex-col items-center justify-center gap-1 text-white/40 active:text-white/60 transition-colors"
+            >
+              <Menu className="w-5 h-5" />
+              <span className="text-[10px] font-medium">Menu</span>
+            </button>
           </div>
         </nav>
+        
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* MOBILE DRAWER MENU */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {menuOpen && (
+          <div className="lg:hidden fixed inset-0 z-[100]">
+            {/* Backdrop */}
+            <div 
+              className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200"
+              onClick={() => setMenuOpen(false)}
+            />
+            
+            {/* Drawer Panel */}
+            <div className="absolute top-0 right-0 bottom-0 w-[85%] max-w-[320px] bg-[#0A0A0A] border-l border-white/[0.08] animate-in slide-in-from-right duration-300 flex flex-col" style={{ paddingTop: 'env(safe-area-inset-top)', paddingBottom: 'env(safe-area-inset-bottom)' }}>
+              
+              {/* Drawer Header */}
+              <div className="flex items-center justify-between p-5 border-b border-white/[0.08]">
+                <div className="flex items-center gap-3">
+                  <Image src="/pounce-puma.png" alt="Pounce" width={32} height={32} className="object-contain" />
+                  <div>
+                    <h2 className="text-sm font-bold text-white">Pounce</h2>
+                    <p className="text-[10px] text-white/40 font-mono">Terminal</p>
+                  </div>
+                </div>
+                <button
+                  onClick={() => setMenuOpen(false)}
+                  className="w-10 h-10 flex items-center justify-center text-white/40 hover:text-white active:text-white transition-colors"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+              
+              {/* Navigation Sections */}
+              <div className="flex-1 overflow-y-auto py-4">
+                {drawerNavSections.map((section) => (
+                  <div key={section.title} className="mb-6">
+                    <div className="flex items-center gap-2 px-5 mb-2">
+                      <div className="w-1 h-1 bg-accent rounded-full" />
+                      <span className="text-[10px] font-mono text-white/30 uppercase tracking-widest">{section.title}</span>
+                    </div>
+                    <div className="space-y-0.5">
+                      {section.items.map((item: any) => (
+                        <Link
+                          key={item.href}
+                          href={item.href}
+                          onClick={() => setMenuOpen(false)}
+                          className="flex items-center gap-3 px-5 py-3 text-white/60 hover:text-white hover:bg-white/[0.03] active:bg-white/[0.05] transition-colors"
+                        >
+                          <item.icon className="w-5 h-5 text-white/40" />
+                          <span className="text-sm font-medium flex-1">{item.label}</span>
+                          {item.isNew && (
+                            <span className="px-2 py-0.5 text-[9px] font-bold bg-accent/20 text-accent border border-accent/20">
+                              New
+                            </span>
+                          )}
+                          <ChevronRight className="w-4 h-4 text-white/20" />
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+                
+                {/* Settings */}
+                <div className="border-t border-white/[0.08] pt-4 mt-2">
+                  <Link
+                    href="/terminal/settings"
+                    onClick={() => setMenuOpen(false)}
+                    className="flex items-center gap-3 px-5 py-3 text-white/60 hover:text-white hover:bg-white/[0.03] active:bg-white/[0.05] transition-colors"
+                  >
+                    <Settings className="w-5 h-5 text-white/40" />
+                    <span className="text-sm font-medium flex-1">Settings</span>
+                    <ChevronRight className="w-4 h-4 text-white/20" />
+                  </Link>
+                  
+                  {user?.is_admin && (
+                    <Link
+                      href="/admin"
+                      onClick={() => setMenuOpen(false)}
+                      className="flex items-center gap-3 px-5 py-3 text-amber-500/70 hover:text-amber-400 hover:bg-amber-500/5 active:bg-amber-500/10 transition-colors"
+                    >
+                      <Shield className="w-5 h-5" />
+                      <span className="text-sm font-medium flex-1">Admin Panel</span>
+                      <ChevronRight className="w-4 h-4 text-amber-500/30" />
+                    </Link>
+                  )}
+                </div>
+              </div>
+              
+              {/* User Card */}
+              <div className="border-t border-white/[0.08] p-5">
+                <div className="flex items-center gap-3 mb-4">
+                  <div className="w-10 h-10 bg-accent/10 border border-accent/20 flex items-center justify-center">
+                    <TierIcon className="w-5 h-5 text-accent" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-white truncate">
+                      {user?.name || user?.email?.split('@')[0] || 'User'}
+                    </p>
+                    <p className={clsx(
+                      "text-[10px] font-mono",
+                      tierName === 'Tycoon' ? "text-amber-400" : 
+                      tierName === 'Trader' ? "text-accent" : 
+                      "text-white/40"
+                    )}>
+                      {tierName}
+                    </p>
+                  </div>
+                </div>
+                
+                {/* Usage Bar */}
+                <div className="mb-4">
+                  <div className="flex items-center justify-between text-[10px] font-mono text-white/30 mb-1">
+                    <span>Usage</span>
+                    <span>{subscription?.domains_used || 0}/{subscription?.domain_limit || 5}</span>
+                  </div>
+                  <div className="h-1 bg-white/10 w-full">
+                    <div 
+                      className="h-full bg-accent transition-all duration-500"
+                      style={{ width: `${Math.min(((subscription?.domains_used || 0) / (subscription?.domain_limit || 5)) * 100, 100)}%` }}
+                    />
+                  </div>
+                </div>
+                
+                {tierName === 'Scout' && (
+                  <Link 
+                    href="/pricing"
+                    onClick={() => setMenuOpen(false)}
+                    className="flex items-center justify-center gap-2 w-full py-3 bg-accent text-black text-sm font-bold hover:bg-white active:scale-[0.98] transition-all mb-3"
+                  >
+                    <Sparkles className="w-4 h-4" />
+                    Upgrade Plan
+                  </Link>
+                )}
+                
+                <button
+                  onClick={() => { logout(); setMenuOpen(false) }}
+                  className="flex items-center justify-center gap-2 w-full py-3 border border-white/10 text-white/50 text-sm font-medium hover:text-white hover:border-white/20 active:bg-white/5 transition-all"
+                >
+                  <LogOut className="w-4 h-4" />
+                  Sign out
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </main>
       
       {/* Toast */}