Skip to content

updated/#12 - added hover effect on buttons in the main header #150

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 13, 2025
Merged

updated/#12 - added hover effect on buttons in the main header #150

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
64 changes: 39 additions & 25 deletions src/components/Header/MainHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
ShoppingCart,
} from 'lucide-react';
import SearchBox from '../Search/SearchBox';
import TopHeader from "../TopHeader/TopHeader";
import TopHeader from '../TopHeader/TopHeader';
import ShopMenu from '../ShopMenu';

export default function Header() {
Expand Down Expand Up @@ -46,30 +46,45 @@ export default function Header() {
<img
src="/images/official-logo-core-x.svg"
alt="CoreX Logo"
className="h-8 w-auto"
className="h-10 w-auto"
/>
</Link>
</div>

{/* Center: Desktop Navigation */}
<nav className="hidden md:flex space-x-8 items-center">
<nav className="hidden md:flex space-x-6 items-center">
<div className="relative">
<ShopMenu
<ShopMenu
shopOpen={shopOpen}
setShopOpen={setShopOpen}
onShopClick={handleShopClick}
onShopKeyDown={handleShopButtonKeyDown}
/>
</div>

<Link to="/garage-sale" className="text-gray-700 hover:text-black font-medium">
{/* Garage Sale */}
<Link
to="/garage-sale"
className="px-5 py-2 rounded-full font-medium text-gray-700 transition-all duration-300 hover:bg-[#0D1B2A] hover:text-white"
>
GARAGE SALE
</Link>
<Link to="/products" className="text-gray-700 hover:text-black font-medium">

{/* All Products */}
<Link
to="/products"
className="px-5 py-2 rounded-full font-medium text-gray-700 transition-all duration-300 hover:bg-[#0D1B2A] hover:text-white"
>
ALL PRODUCTS
</Link>
<Link to="/about-corex" className="text-gray-700 hover:text-black font-medium">
ABOUT COREX
{/* About CoreX */}
<Link
to="/about-corex"
className="group px-5 py-2 rounded-full font-medium text-gray-700 transition-all duration-300 hover:bg-[#0D1B2A] hover:text-white"
>
ABOUT CORE
<span className="text-red-600 group-hover:text-red-600 transition-colors duration-300">
X
</span>
</Link>
</nav>

Expand All @@ -92,15 +107,15 @@ export default function Header() {
>
<Heart className="h-5 w-5" />
</a>

<Link
to="/login"
aria-label="User Account"
className="transform transition-transform duration-200 hover:scale-110 hover:text-black"
>
<User className="h-5 w-5" />
</Link>

<a
href="#"
aria-label="Shopping Cart"
Expand All @@ -122,7 +137,7 @@ export default function Header() {
<button
onClick={() => setMobileOpen(!mobileOpen)}
className="text-gray-700 hover:text-black"
aria-label={mobileOpen ? "Close menu" : "Open menu"}
aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
>
{mobileOpen ? (
<X className="h-6 w-6" />
Expand Down Expand Up @@ -171,14 +186,14 @@ export default function Header() {
>
Garage Sale
</Link>

<Link
to="/products"
className="text-gray-700 hover:text-black transition"
>
All Products
</Link>

<Link
to="/about-corex"
className="text-gray-700 hover:text-black transition"
Expand All @@ -193,20 +208,24 @@ export default function Header() {
{/* Overlay for Mobile Menu */}
<div
className={`fixed inset-0 bg-black/30 backdrop-blur-sm transition-opacity duration-300 ${
mobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
mobileOpen
? 'opacity-100 pointer-events-auto'
: 'opacity-0 pointer-events-none'
} z-[998]`}
/>

{/* Mobile Menu Drawer */}
<div
ref={mobileMenuRef}
className={`fixed top-0 right-0 w-full sm:w-[280px] h-full bg-white shadow-2xl border-l border-gray-200 z-[999] transform transition-all duration-300 ease-in-out ${
mobileOpen ? "translate-x-0 scale-100" : "translate-x-full scale-95"
mobileOpen ? 'translate-x-0 scale-100' : 'translate-x-full scale-95'
} flex flex-col`}
>
{/* Mobile Menu Header */}
<div className="flex justify-between items-center px-6 py-4 border-b border-gray-200">
<h2 className="font-bold text-lg text-[#023E8A] tracking-wide">MENU</h2>
<h2 className="font-bold text-lg text-[#023E8A] tracking-wide">
MENU
</h2>
<button
onClick={() => setMobileOpen(false)}
className="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
Expand All @@ -226,7 +245,7 @@ export default function Header() {
Shop
<ChevronDown
className={`h-4 w-4 transition-transform duration-200 ${
shopOpen ? "rotate-180" : ""
shopOpen ? 'rotate-180' : ''
}`}
/>
</button>
Expand Down Expand Up @@ -311,12 +330,7 @@ export default function Header() {
</div>

{/* Search Drawer */}
{search && (
<SearchBox
isOpen={search}
onClose={() => setSearch(false)}
/>
)}
{search && <SearchBox isOpen={search} onClose={() => setSearch(false)} />}
</>
);
}
}
Loading