From 6a1fa4295684afd4b0fd5cb7f8d6feca847cbd79 Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Sun, 16 Mar 2025 19:19:44 +0700
Subject: [PATCH] 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.
---
 apps/gacha/src/app/layout.tsx           |   2 +-
 libs/ui/src/organisms/navbar/navbar.tsx | 135 ++++++++++++------------
 2 files changed, 69 insertions(+), 68 deletions(-)

diff --git a/apps/gacha/src/app/layout.tsx b/apps/gacha/src/app/layout.tsx
index 846ecea..7428943 100644
--- a/apps/gacha/src/app/layout.tsx
+++ b/apps/gacha/src/app/layout.tsx
@@ -4,7 +4,7 @@ import { Navbar } from '@imphnen-frontend-service/ui/organisms';
 
 export const AppLayout: FC = (): ReactElement => {
   return (
-    <main className="bg-primary-50 min-h-screen px-8 py-[60px]">
+    <main className="bg-primary-50 min-h-screen">
       <Navbar />
       <Outlet />
     </main>
diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx
index 13cd94f..5d987d0 100644
--- a/libs/ui/src/organisms/navbar/navbar.tsx
+++ b/libs/ui/src/organisms/navbar/navbar.tsx
@@ -7,74 +7,75 @@ export const Navbar: FC = (): ReactElement => {
   const [isDropdownOpen, setDropdownOpen] = useState(false);
 
   return (
-    <header
-      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"
-      role="navigation"
-    >
-      <div className="flex w-full items-center justify-between p-4 md:px-[32px] md:py-[10px]">
-        <div className="flex items-center">
-          <img
-            src="/logos/simple.svg"
-            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>
-            )}
+    <header className="bg-primary-50 w-full px-[32px] md:px-[60px] pt-[60px] sticky top-0 z-50">
+      <header
+        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">
+            <img
+              src="/logos/simple.svg"
+              alt="IMPHNEN Logo"
+              className="h-8 md:h-[40px] lg:h-[52px] w-auto"
+            />
           </div>
-        </nav>
-      </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>
+          </nav>
+        </div>
+      </header>
     </header>
   );
 };