\n {/* Logo */}\n

\n navigateTo('home')}\n className=\"flex items-center space-x-2 text-xl font-bold text-purple-600 hover:text-purple-700 transition-colors\"\n >\n 🐾\n PawPals\n \n

\n\n {/* Desktop Navigation */}\n

\n {navItems.map((item) => (\n navigateTo(item.id)}\n className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n currentPage === item.id\n ? 'bg-purple-100 text-purple-700'\n : 'text-gray-600 hover:text-purple-600 hover:bg-gray-100'\n }`}\n >\n {item.icon}\n {item.label}\n \n ))}\n

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

\n {user ? (\n

\n navigateTo('profile')}\n className=\"flex items-center space-x-2 text-gray-600 hover:text-purple-600 transition-colors\"\n >\n 👤\n {user.name}\n \n \n Logout\n \n

\n ) : (\n setShowAuthModal(true)}\n className=\"bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700 transition-colors text-sm\"\n >\n Sign In\n \n )}\n\n {/* Mobile menu button */}\n setShowMobileMenu(!showMobileMenu)}\n className=\"md:hidden p-2 rounded-md text-gray-600 hover:text-purple-600 hover:bg-gray-100\"\n >\n \n \n

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

\n {navItems.map((item) => (\n {\n navigateTo(item.id);\n setShowMobileMenu(false);\n }}\n className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n currentPage === item.id\n ? 'bg-purple-100 text-purple-700'\n : 'text-gray-600 hover:text-purple-600 hover:bg-gray-100'\n }`}\n >\n {item.icon}\n {item.label}\n \n ))}\n

\n )}\n

\n\n {/* Auth Modal */}\n {showAuthModal && (\n setShowAuthModal(false)}\n onSuccess={(user) => {\n setUser(user);\n setShowAuthModal(false);\n }}\n />\n )}\n \n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Aditi_Deshmukh/PetWebsite/code/frontend/components/Navigation.tsx","extension","actionData","errors"]