\n {/* Logo */}\n

onNavigate('home')}\n >\n

🫧

\n BubbleSpace\n

\n\n {/* Navigation Links */}\n

\n onNavigate('home')}\n className={`font-medium transition-colors duration-200 ${\n currentView === 'home' \n ? 'text-blue-600 border-b-2 border-blue-600 pb-1' \n : 'text-gray-600 hover:text-gray-800'\n }`}\n >\n Home\n \n \n {user && (\n <>\n onNavigate('profile')}\n className={`font-medium transition-colors duration-200 ${\n currentView === 'profile' \n ? 'text-blue-600 border-b-2 border-blue-600 pb-1' \n : 'text-gray-600 hover:text-gray-800'\n }`}\n >\n Profile\n \n \n onNavigate('chat')}\n className={`font-medium transition-colors duration-200 ${\n currentView === 'chat' \n ? 'text-blue-600 border-b-2 border-blue-600 pb-1' \n : 'text-gray-600 hover:text-gray-800'\n }`}\n >\n Messages\n \n \n )}\n

\n\n {/* User Menu */}\n

\n {user ? (\n

\n setShowUserMenu(!showUserMenu)}\n className=\"flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200\"\n >\n

\n {user.avatar || user.displayName.charAt(0).toUpperCase()}\n

\n \n {user.displayName}\n \n \n \n\n {/* Dropdown Menu */}\n {showUserMenu && (\n

\n {\n onNavigate('profile');\n setShowUserMenu(false);\n }}\n className=\"w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200\"\n >\n 👤 View Profile\n \n {\n onNavigate('chat');\n setShowUserMenu(false);\n }}\n className=\"w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200\"\n >\n 💬 Messages\n \n

\n {\n onLogout();\n setShowUserMenu(false);\n }}\n className=\"w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors duration-200\"\n >\n 🚪 Sign Out\n \n

\n )}\n

\n ) : (\n \n Sign In\n \n )}\n

\n\n {/* Mobile Navigation */}\n {user && (\n

\n onNavigate('home')}\n className={`flex flex-col items-center py-2 px-4 text-xs font-medium ${\n currentView === 'home' ? 'text-blue-600' : 'text-gray-600'\n }`}\n >\n 🏠\n Home\n \n onNavigate('profile')}\n className={`flex flex-col items-center py-2 px-4 text-xs font-medium ${\n currentView === 'profile' ? 'text-blue-600' : 'text-gray-600'\n }`}\n >\n 👤\n Profile\n \n onNavigate('chat')}\n className={`flex flex-col items-center py-2 px-4 text-xs font-medium ${\n currentView === 'chat' ? 'text-blue-600' : 'text-gray-600'\n }`}\n >\n 💬\n Messages\n \n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/jex/io/code/frontend/components/Navigation.tsx","extension","actionData","errors"]