From 6f1ce1b3b0ed6f729bc28dd8a05e11782fc6a89d Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
Date: Wed, 12 Mar 2025 16:07:47 +0700
Subject: [PATCH] fix: header nav style

---
 src/components/Header.tsx    | 69 +++++++++++++++++++-----------------
 src/components/HeaderNav.tsx |  2 +-
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ebe6f35..381280d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -41,20 +41,13 @@ export default function Header({ links }: { links: typeof navMenuData }) {
   return (
     <nav className="main-nav dark stick-fixed wow-menubar wch-unset relative">
       <div className="main-nav-sub full-wrapper">
-        <div className="nav-logo-wrap local-scroll">
+        <div className="nav-logo-wrap local-scroll lg:hidden">
           <Link href={`/`} className="logo">
             <Image
               src="/assets/images/demo-slick/logo-dark.webp"
-              alt="Your Company Logo"
-              width={500}
-              height={195}
-              className="light-mode-logo"
-            />
-            <Image
-              src="/assets/images/demo-slick/logo-dark.webp"
-              alt="Your Company Logo"
-              width={500}
-              height={195}
+              alt="Company Logo"
+              width={250}
+              height={150}
               className="dark-mode-logo"
             />
           </Link>
@@ -67,29 +60,41 @@ export default function Header({ links }: { links: typeof navMenuData }) {
         {/* Main Menu */}
         <div className="inner-nav desktop-nav">
           <ul className="clearlist local-scroll">
+            <li className="!hidden lg:!block">
+              <Link href={`/`} className="logo">
+                <Image
+                  src="/assets/images/demo-slick/logo-dark.webp"
+                  alt="Company Logo"
+                  width={165}
+                  height={100}
+                  className="dark-mode-logo"
+                />
+              </Link>
+            </li>
             <HeaderNav links={links} />
-          </ul>
-
-          <ul className="items-end flex flex-col justify-center h-full">
-            <div className="flex flex-col items-center h-full w-full content-center justify-center gap-2">
-              <a
-                href="/contact"
-                className="bg-extColorPrimary6 hover:bg-extColorPrimary8 px-3 py-2 rounded-full text-white font-semibold hover:cursor-pointer hover:scale-[1.15] mt-3 lg:mt-0 transition-all duration-300"
-              >
-                REQUEST CONSULTATION
-              </a>
-              <div className="flex justify-between w-full flex-col lg:flex-row">
-                {Object.keys(shareIcons).map((k, idx) => {
-                  return (
-                    <li key={idx} className="!p-0 !m-0">
-                      <a className="cursor-pointer text-white" href={shareIcons[k].link} target="_blank">
-                        {shareIcons[k].dom}
-                      </a>
-                    </li>
-                  );
-                })}
+            <li>
+              <div className="flex flex-col items-center h-full w-full content-center justify-center gap-2">
+                <div className="flex justify-center">
+                  <a
+                    href="/contact"
+                    className="bg-extColorPrimary6 hover:bg-extColorPrimary8 px-4 py-2 rounded-full text-white font-semibold hover:cursor-pointer hover:scale-[1.15] mt-3 lg:mt-0 transition-all duration-300"
+                  >
+                    REQUEST CONSULTATION
+                  </a>
+                </div>
+                <div className="flex justify-between w-full flex-col lg:flex-row">
+                  {Object.keys(shareIcons).map((k, idx) => {
+                    return (
+                      <div key={idx} className="!p-0 !m-0">
+                        <a className="cursor-pointer text-white" href={shareIcons[k].link} target="_blank">
+                          {shareIcons[k].dom}
+                        </a>
+                      </div>
+                    );
+                  })}
+                </div>
               </div>
-            </div>
+            </li>
           </ul>
         </div>
 
diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx
index 46ff8f5..c5e0bff 100644
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@@ -125,7 +125,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
           </li>
           {index != links.length - 1 && (
             <div
-              className="text-white bg-white h-[1px] md:h-[25px] mx-2 opacity-[0.3]"
+              className="text-white bg-white h-[1px] lg:h-[25px] mx-2 opacity-[0.3]"
               style={{ border: "1px solid white" }}
             />
           )}