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

@@ -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>

libs/ui/src/organisms/navbar/navbar.tsx

@@ -7,8 +7,9 @@ export const Navbar: FC = (): ReactElement => {
   const [isDropdownOpen, setDropdownOpen] = useState(false);
 
   return (
+    <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 sticky"
+        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]">
@@ -19,7 +20,6 @@ export const Navbar: FC = (): ReactElement => {
               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>
@@ -76,5 +76,6 @@ export const Navbar: FC = (): ReactElement => {
           </nav>
         </div>
       </header>
+    </header>
   );
 };