improve navbar

src/components/Navigation.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
-    import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search } from 'lucide-react';
+    import { Home, PlusSquare, Library, LogOut, Settings, ChevronDown, Search, Heart, Menu } from 'lucide-react';
     import { useAuth } from '../contexts/AuthContext';
     import { supabase } from '../lib/supabase';
 
-    type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search';
+    type Page = 'home' | 'deck' | 'login' | 'collection' | 'profile' | 'search' | 'life-counter';
 
     interface NavigationProps {
       currentPage: Page;
@@ -13,7 +13,9 @@ import React, { useState, useRef, useEffect } from 'react';
     export default function Navigation({ currentPage, setCurrentPage }: NavigationProps) {
       const { user, signOut } = useAuth();
       const [showDropdown, setShowDropdown] = useState(false);
+      const [showMobileMenu, setShowMobileMenu] = useState(false);
       const dropdownRef = useRef<HTMLDivElement>(null);
+      const mobileMenuRef = useRef<HTMLDivElement>(null);
       const [username, setUsername] = useState<string | null>(null);
 
       useEffect(() => {
@@ -39,6 +41,9 @@ import React, { useState, useRef, useEffect } from 'react';
           if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
             setShowDropdown(false);
           }
+          if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node)) {
+            setShowMobileMenu(false);
+          }
         };
 
         document.addEventListener('mousedown', handleClickOutside);
@@ -50,6 +55,7 @@ import React, { useState, useRef, useEffect } from 'react';
         { id: 'deck' as const, label: 'New Deck', icon: PlusSquare },
         { id: 'collection' as const, label: 'Collection', icon: Library },
         { id: 'search' as const, label: 'Search', icon: Search },
+        { id: 'life-counter' as const, label: 'Life Counter', icon: Heart },
       ];
 
       const handleSignOut = async () => {
@@ -135,37 +141,54 @@ import React, { useState, useRef, useEffect } from 'react';
 
           {/* Mobile Navigation - Bottom */}
           <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50">
-            <div className="grid grid-cols-5 h-16">
-              {navItems.map((item) => (
+            <div className="flex justify-between items-center h-16 px-4">
+              <span className="text-2xl font-bold text-orange-500">Deckerr</span>
+              <div className="relative" ref={mobileMenuRef}>
                 <button
-                  key={item.id}
-                  onClick={() => setCurrentPage(item.id)}
-                  className={`flex flex-col items-center justify-center space-y-1
-                    ${currentPage === item.id
-                      ? 'text-white bg-gray-900'
-                      : 'text-gray-300 hover:text-white hover:bg-gray-700'
-                    }`}
+                  onClick={() => setShowMobileMenu(!showMobileMenu)}
+                  className="text-gray-300 hover:text-white"
                 >
-                  <item.icon size={20} />
-                  <span className="text-xs">{item.label}</span>
+                  <Menu size={24} />
                 </button>
-              ))}
-              {user && (
-                <button
-                  onClick={() => setShowDropdown(!showDropdown)}
-                  className="flex flex-col items-center justify-center space-y-1 text-gray-300 hover:text-white hover:bg-gray-700"
-                >
-                  <div className="relative">
-                    <img
-                      src={getAvatarUrl(user.id)}
-                      alt="User avatar"
-                      className="w-8 h-8 rounded-full bg-gray-700"
-                    />
-                    <Settings size={14} className="absolute -bottom-1 -right-1 bg-gray-800 rounded-full p-0.5" />
+                {showMobileMenu && (
+                  <div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700">
+                    {navItems.map((item) => (
+                      <button
+                        key={item.id}
+                        onClick={() => {
+                          setCurrentPage(item.id);
+                          setShowMobileMenu(false);
+                        }}
+                        className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+                      >
+                        <item.icon size={16} />
+                        <span>{item.label}</span>
+                      </button>
+                    ))}
+                    {user && (
+                      <>
+                        <button
+                          onClick={() => {
+                            setCurrentPage('profile');
+                            setShowMobileMenu(false);
+                          }}
+                          className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+                        >
+                          <Settings size={16} />
+                          <span>Profile Settings</span>
+                        </button>
+                        <button
+                          onClick={handleSignOut}
+                          className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+                        >
+                          <LogOut size={16} />
+                          <span>Sign Out</span>
+                        </button>
+                      </>
+                    )}
                   </div>
-                  <span className="text-xs">Profile</span>
-                </button>
-              )}
+                )}
+              </div>
             </div>
           </nav>