erik/octto-engenharia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adicionar busca no menu mobile com SearchDropdown e reduzir espaço superior

Browse Source
This commit is contained in:
Erik
2025-12-01 17:15:37 -03:00
parent ef98075686
commit 2bf941777f
1 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/Header.tsx
View File

@@ -14,6 +14,8 @@ export default function Header() {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false);
const [logo, setLogo] = useState<string | null>(null); const [logo, setLogo] = useState<string | null>(null);
const [mobileSearchValue, setMobileSearchValue] = useState('');
const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const { locale, setLocale, t } = useLocale(); const { locale, setLocale, t } = useLocale();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
@@ -251,16 +253,28 @@ export default function Header() {
</button> </button>
{/* Mobile Menu Overlay */} {/* Mobile Menu Overlay */}
<div className={`fixed inset-0 bg-white dark:bg-secondary z-40 transition-transform duration-300 ease-in-out md:hidden flex flex-col pt-24 px-6 overflow-y-auto ${isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}> <div className={`fixed inset-0 bg-white dark:bg-secondary z-40 transition-transform duration-300 ease-in-out md:hidden flex flex-col pt-20 px-6 overflow-y-auto ${isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
{/* Mobile Search */} {/* Mobile Search */}
<div className="mb-6 relative shrink-0"> <div className="mb-6 relative shrink-0">
<i className="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i> <div className="relative">
<input <i className="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
type="text" <input
placeholder={t('nav.search')} type="text"
className="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder={t('nav.search')}
/> value={mobileSearchValue}
onChange={(e) => setMobileSearchValue(e.target.value)}
onFocus={() => setIsMobileSearchOpen(true)}
onBlur={() => setTimeout(() => setIsMobileSearchOpen(false), 200)}
className="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
/>
<SearchDropdown
isOpen={isMobileSearchOpen}
searchValue={mobileSearchValue}
onSearchChange={setMobileSearchValue}
onClose={() => setIsMobileSearchOpen(false)}
/>
</div>
</div> </div>
<nav className="flex flex-col gap-4 text-base font-medium"> <nav className="flex flex-col gap-4 text-base font-medium">