\n {/* Logo */}\n

\n navigate('/')}\n className=\"flex items-center space-x-2 text-xl font-bold text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors\"\n >\n 🛍️\n ModernShop\n \n

\n\n {/* Search Bar - Desktop */}\n

\n \n

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

\n navigate('/')}\n className={`text-sm font-medium transition-colors ${\n currentPath === '/' \n ? 'text-indigo-600 dark:text-indigo-400' \n : 'text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400'\n }`}\n >\n Home\n \n navigate('/shop')}\n className={`text-sm font-medium transition-colors ${\n currentPath === '/shop' \n ? 'text-indigo-600 dark:text-indigo-400' \n : 'text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400'\n }`}\n >\n Shop\n \n \n {/* Categories Dropdown */}\n

\n \n

\n {categories.map((category) => (\n navigate(`/shop?category=${category.slug}`)}\n className=\"block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n >\n {category.name}\n \n ))}\n

\n\n {/* Right side actions */}\n

\n {/* Dark mode toggle */}\n setDarkMode(!darkMode)}\n className=\"p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors\"\n aria-label=\"Toggle dark mode\"\n >\n {darkMode ? (\n \n ) : (\n \n )}\n \n\n {/* Cart */}\n navigate('/cart')}\n className=\"relative p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors\"\n aria-label=\"Shopping cart\"\n >\n \n {cartItemCount > 0 && (\n \n {cartItemCount}\n \n )}\n \n\n {/* User menu */}\n {user ? (\n

\n setIsUserMenuOpen(!isUserMenuOpen)}\n className=\"flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors\"\n >\n \n {user.firstName}\n \n \n\n {isUserMenuOpen && (\n

\n {\n navigate('/account');\n setIsUserMenuOpen(false);\n }}\n className=\"block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n >\n My Account\n \n {\n navigate('/account#orders');\n setIsUserMenuOpen(false);\n }}\n className=\"block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n >\n Order History\n \n

\n {\n handleLogout();\n setIsUserMenuOpen(false);\n }}\n className=\"block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n >\n Sign Out\n \n

\n )}\n

\n ) : (\n

\n navigate('/login')}\n className=\"text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors\"\n >\n Sign In\n \n navigate('/signup')}\n className=\"btn-primary px-4 py-2 rounded-lg text-white text-sm font-medium\"\n >\n Sign Up\n \n

\n )}\n\n {/* Mobile menu button */}\n setIsMenuOpen(!isMenuOpen)}\n className=\"md:hidden p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors\"\n aria-label=\"Toggle menu\"\n >\n \n \n

\n\n {/* Mobile menu */}\n {isMenuOpen && (\n

\n {/* Mobile search */}\n \n\n {/* Mobile navigation */}\n

\n {\n navigate('/');\n setIsMenuOpen(false);\n }}\n className=\"block w-full text-left py-2 text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors\"\n >\n Home\n \n {\n navigate('/shop');\n setIsMenuOpen(false);\n }}\n className=\"block w-full text-left py-2 text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors\"\n >\n Shop\n \n \n {/* Mobile categories */}\n

\n {categories.map((category) => (\n {\n navigate(`/shop?category=${category.slug}`);\n setIsMenuOpen(false);\n }}\n className=\"block w-full text-left py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors\"\n >\n {category.name}\n \n ))}\n

\n )}\n

\n );\n}","deleted","label",[170,171,172,153],"frontend","components","layout","permalink","https://www.val.town/x/jeffy/jeffi/code/frontend/components/layout/Header.tsx","extension","actionData","errors"]