From a31166e3ffd7ff2f62aeb532bce30ee3fdb7f06f Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Sun, 16 Mar 2025 06:07:07 +0700
Subject: [PATCH] feat: update navbar responsive

---
 libs/ui/src/organisms/navbar/navbar.tsx | 28 +++++++++++++++----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx
index 35616a0..13cd94f 100644
--- a/libs/ui/src/organisms/navbar/navbar.tsx
+++ b/libs/ui/src/organisms/navbar/navbar.tsx
@@ -1,4 +1,5 @@
 import { MenuOutlined } from '@ant-design/icons';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { FC, ReactElement, useState } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -7,32 +8,37 @@ export const Navbar: FC = (): ReactElement => {
 
   return (
     <header
-      className="bg-white shadow-sm 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 sticky"
       role="navigation"
     >
-      <div className="flex w-full items-center justify-between px-6 py-3">
+      <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 w-auto"
+            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>
-              <Link
-                to="#"
-                className="text-primary-500 hover:text-primary-600 transition-colors"
+              <Button
+                size="md"
+                variant="text"
+                className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
               >
-                Home
-              </Link>
+                <Link to="#">Home</Link>
+              </Button>
             </li>
             <li>
-              <Link to="#" className="text-gray-600 transition-colors">
-                Merch Gacha
-              </Link>
+              <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