feat: update navbar to cover top of the page
- Update the navbar to be sticky when scrolling the page and cover the top of the page. - Fix the margins for every viewport.
This commit is contained in:
Hafid Nur
@@ -4,7 +4,7 @@ import { Navbar } from '@imphnen-frontend-service/ui/organisms';
|
|||||||
|
|
||||||
export const AppLayout: FC = (): ReactElement => {
|
export const AppLayout: FC = (): ReactElement => {
|
||||||
return (
|
return (
|
||||||
<main className="bg-primary-50 min-h-screen px-8 py-[60px]">
|
<main className="bg-primary-50 min-h-screen">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -7,74 +7,75 @@ export const Navbar: FC = (): ReactElement => {
|
|||||||
const [isDropdownOpen, setDropdownOpen] = useState(false);
|
const [isDropdownOpen, setDropdownOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header
|
<header className="bg-primary-50 w-full px-[32px] md:px-[60px] pt-[60px] sticky top-0 z-50">
|
||||||
className="bg-white shadow-lg rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto sticky"
|
<header
|
||||||
role="navigation"
|
className="bg-white shadow-lg rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto"
|
||||||
>
|
role="navigation"
|
||||||
<div className="flex w-full items-center justify-between p-4 md:px-[32px] md:py-[10px]">
|
>
|
||||||
<div className="flex items-center">
|
<div className="flex w-full items-center justify-between p-4 md:px-[32px] md:py-[10px]">
|
||||||
<img
|
<div className="flex items-center">
|
||||||
src="/logos/simple.svg"
|
<img
|
||||||
alt="IMPHNEN Logo"
|
src="/logos/simple.svg"
|
||||||
className="h-8 md:h-[40px] lg:h-[52px] w-auto"
|
alt="IMPHNEN Logo"
|
||||||
/>
|
className="h-8 md:h-[40px] lg:h-[52px] w-auto"
|
||||||
</div>
|
/>
|
||||||
|
|
||||||
<nav className="w-full flex justify-end">
|
|
||||||
<ul className="items-center gap-x-8 font-semibold hidden md:flex">
|
|
||||||
<li>
|
|
||||||
<Button
|
|
||||||
size="md"
|
|
||||||
variant="text"
|
|
||||||
className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
|
|
||||||
>
|
|
||||||
<Link to="#">Home</Link>
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Button
|
|
||||||
size="md"
|
|
||||||
variant="text"
|
|
||||||
className="lg:text-[19px] lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
|
|
||||||
>
|
|
||||||
<Link to="#">Merch Gacha</Link>
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<button
|
|
||||||
className={`md:hidden duration-200 ${
|
|
||||||
isDropdownOpen ? 'transform rotate-90' : ''
|
|
||||||
}`}
|
|
||||||
onClick={() => setDropdownOpen(!isDropdownOpen)}
|
|
||||||
>
|
|
||||||
<MenuOutlined style={{ color: '#1a8ce6' }} />
|
|
||||||
</button>
|
|
||||||
<div className="relative">
|
|
||||||
{isDropdownOpen && (
|
|
||||||
<div className="absolute right-0 top-0 mt-5">
|
|
||||||
<ul className="mt-2 w-48 bg-white shadow-md border rounded-[16px] border-gray-200 px-5 py-3">
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
to="#"
|
|
||||||
className="block text-primary-500 hover:text-primary-600 transition-colors px-4 py-2 text-center font-semibold"
|
|
||||||
>
|
|
||||||
Home
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link
|
|
||||||
to="#"
|
|
||||||
className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
|
|
||||||
>
|
|
||||||
Merch Gacha
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<nav className="w-full flex justify-end">
|
||||||
</div>
|
<ul className="items-center gap-x-8 font-semibold hidden md:flex">
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
size="md"
|
||||||
|
variant="text"
|
||||||
|
className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
|
||||||
|
>
|
||||||
|
<Link to="#">Home</Link>
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
size="md"
|
||||||
|
variant="text"
|
||||||
|
className="lg:text-[19px] lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
<Link to="#">Merch Gacha</Link>
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button
|
||||||
|
className={`md:hidden duration-200 ${
|
||||||
|
isDropdownOpen ? 'transform rotate-90' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => setDropdownOpen(!isDropdownOpen)}
|
||||||
|
>
|
||||||
|
<MenuOutlined style={{ color: '#1a8ce6' }} />
|
||||||
|
</button>
|
||||||
|
<div className="relative">
|
||||||
|
{isDropdownOpen && (
|
||||||
|
<div className="absolute right-0 top-0 mt-5">
|
||||||
|
<ul className="mt-2 w-48 bg-white shadow-md border rounded-[16px] border-gray-200 px-5 py-3">
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="#"
|
||||||
|
className="block text-primary-500 hover:text-primary-600 transition-colors px-4 py-2 text-center font-semibold"
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="#"
|
||||||
|
className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
|
||||||
|
>
|
||||||
|
Merch Gacha
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user