Skip to content

Fix : Search modal closes on input focus and search results #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Alexandrbig1 merged 1 commit into from
Oct 10, 2025
Merged

Fix : Search modal closes on input focus and search results #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
240 changes: 101 additions & 139 deletions src/components/Header/MainHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,163 +9,125 @@ import {
User,
ShoppingCart,
} from 'lucide-react';
import SearchBox from '../Search/SearchBox';
import SearchBox from '../Search/SearchBox';
import TopHeader from "../TopHeader/TopHeader";

export default function Header() {
const [mobileOpen, setMobileOpen] = useState(false);
const [shopOpen, setShopOpen] = useState(false);
const [search, setSearch] = useState(false);


return (
<header className="bg-white shadow-md w-full fixed top-8 left-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
{/* Left: Logo */}
<div className="flex-shrink-0">
<Link to="/">
<img
src="/images/official-logo-core-x.svg"
alt="CoreX Logo"
className="h-8 w-auto"
/>
</Link>
</div>

{/* Center: Desktop Navigation */}
<nav className="hidden md:flex space-x-8">
{/* Shop Dropdown */}
<div className="relative">
<button
onClick={() => setShopOpen(!shopOpen)}
className="flex items-center gap-1 text-gray-700 hover:text-black"
>
Shop <ChevronDown className="h-4 w-4" />
</button>
{shopOpen && (
<div className="absolute left-0 top-full mt-2 w-screen max-w-4xl bg-white shadow-lg p-6">
<div className="grid grid-cols-3 gap-4">
<div className="p-4 bg-gray-100 rounded">Category 1</div>
<div className="p-4 bg-gray-100 rounded">Category 2</div>
<div className="p-4 bg-gray-100 rounded">Category 3</div>
</div>
</div>
)}
<>
<TopHeader />
<header className="bg-white shadow-md w-full fixed top-10 left-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
{/* Left: Logo */}
<div className="flex-shrink-0">
<Link to="/">
<img
src="/images/official-logo-core-x.svg"
alt="CoreX Logo"
className="h-8 w-auto"
/>
</Link>
</div>

<Link to="garage-sale" className="text-gray-700 hover:text-black">
Garage Sale
</Link>
<Link to="/products" className="text-gray-700 hover:text-black">
All Products
</Link>
<Link to="/about-corex" className="text-gray-700 hover:text-black">
About CoreX
</Link>
</nav>

{/* Right: Icons (desktop) + Mobile Hamburger */}
<div className="flex items-center space-x-6">
{/* Desktop Icons */}
<div className="hidden md:flex items-center space-x-6 text-gray-700">
{/* search box logic */}
<a aria-label="Search"
onClick={() => setSearch(!search)}
className="cursor-pointer ">
<Search className="h-5 w-5 hover:text-black" />
{(search) &&
<div className='fixed h-full w-1/2 top-0 right-0 z-5'>
<div className='flex items-center w-full justify-between mt-2 h-15 px-2 bg-gray-100'>
<div className='font-bold text-lg mr-4'>
<p>SEARCH</p>
</div>
<div className='font-bold text-lg mr-4'>
<button
className='cursor-pointer'
onClick={() =>{
setSearch(!search);
} }
>x</button>
{/* Center: Desktop Navigation */}
<nav className="hidden md:flex space-x-8">
<div className="relative">
<button
onClick={() => setShopOpen(!shopOpen)}
className="flex items-center gap-1 text-gray-700 hover:text-black"
>
Shop <ChevronDown className="h-4 w-4" />
</button>
{shopOpen && (
<div className="absolute left-0 top-full mt-2 w-screen max-w-4xl bg-white shadow-lg p-6">
<div className="grid grid-cols-3 gap-4">
<div className="p-4 bg-gray-100 rounded">Category 1</div>
<div className="p-4 bg-gray-100 rounded">Category 2</div>
<div className="p-4 bg-gray-100 rounded">Category 3</div>
</div>
</div>
<SearchBox
className=""
/>
</div>
}
</a>
<a href="#" aria-label="Wishlist">
<Heart className="h-5 w-5 hover:text-black" />
</a>
<a href="#" aria-label="User Account">
<User className="h-5 w-5 hover:text-black" />
</a>
<a href="#" aria-label="Shopping Cart">
<ShoppingCart className="h-5 w-5 hover:text-black" />
</a>
)}
</div>

<Link to="/garage-sale" className="text-gray-700 hover:text-black">
Garage Sale
</Link>
<Link to="/products" className="text-gray-700 hover:text-black">
All Products
</Link>
<Link to="/about-corex" className="text-gray-700 hover:text-black">
About CoreX
</Link>
</nav>

{/* Right Icons */}
<div className="flex items-center space-x-6">
<div className="hidden md:flex items-center space-x-6 text-gray-700">
<button
aria-label="Search"
onClick={() => setSearch(true)}
className="cursor-pointer flex items-center"
>
<Search className="h-5 w-5 hover:text-black" />
</button>

<a href="#" aria-label="Wishlist">
<Heart className="h-5 w-5 hover:text-black" />
</a>
<a href="#" aria-label="User Account">
<User className="h-5 w-5 hover:text-black" />
</a>
<a href="#" aria-label="Shopping Cart">
<ShoppingCart className="h-5 w-5 hover:text-black" />
</a>
</div>

{/* Mobile Hamburger */}
<div className="md:hidden flex items-center space-x-4">
<button
onClick={() => setSearch(true)}
className="text-gray-700 hover:text-black"
aria-label="Search"
>
<Search className="h-5 w-5" />
</button>
<button
onClick={() => setMobileOpen(!mobileOpen)}
className="text-gray-700 hover:text-black"
>
{mobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button>
</div>
</div>
</div>
</div>
</header>

{/* Mobile Hamburger */}
<div className="md:hidden">
{/* 🔍 Right Slide Search Drawer */}
{search && (
<div className="fixed inset-0 z-[9999] flex justify-end bg-black/40">
{/* Drawer */}
<div className="relative w-full sm:w-[580px] bg-white h-full shadow-2xl transform transition-transform duration-300 ease-in-out translate-x-0">
<div className="flex justify-between items-center p-6 border-b">
<h2 className="text-lg font-bold text-gray-900">SEARCH</h2>
<button
onClick={() => setMobileOpen(!mobileOpen)}
className="text-gray-700 hover:text-black"
onClick={() => setSearch(false)}
className="text-gray-600 hover:text-black"
>
{mobileOpen ? (
<X className="h-6 w-6" />
) : (
<Menu className="h-6 w-6" />
)}
<X className="h-5 w-5" />
</button>
</div>
<div className="p-6 overflow-y-auto h-[calc(100%-80px)]">
<SearchBox />
</div>
</div>
</div>
</div>

{/* Mobile Menu */}
{mobileOpen && (
<div className="md:hidden bg-white shadow-md">
<nav className="flex flex-col space-y-2 p-4">
<button
onClick={() => setShopOpen(!shopOpen)}
className="flex items-center justify-between text-gray-700 hover:text-black"
>
Shop <ChevronDown className="h-4 w-4" />
</button>
{shopOpen && (
<div className="flex flex-col space-y-2 pl-4">
<a href="#" className="text-gray-600 hover:text-black">
Category 1
</a>
<a href="#" className="text-gray-600 hover:text-black">
Category 2
</a>
<a href="#" className="text-gray-600 hover:text-black">
Category 3
</a>
</div>
)}
<Link
to="/garage-sale" className="text-gray-700 hover:text-black">
Garage Sale
</Link>
<Link
to="/products"
className="text-gray-700 hover:text-black"
onClick={() => setMobileOpen(false)}
>
All Products
</Link>
<Link
to="/about-corex"
className="text-gray-700 hover:text-black"
onClick={() => setMobileOpen(false)}
>
About CoreX
</Link>
</nav>
</div>
)}
</header>
</>
);
}
}
Loading