From 01436f46b6b53b684cfba4708618863d2d4280c1 Mon Sep 17 00:00:00 2001
From: Val <44112412+LawfaL@users.noreply.github.com>
Date: Tue, 4 Mar 2025 17:54:21 +0700
Subject: [PATCH] fix: social media hover

---
 public/assets/css/style.css  |   4 ++
 src/app/(main)/layout.tsx    |   4 +-
 src/components/Header.tsx    | 100 ++++++++++++++++++-----------------
 src/components/HeaderNav.tsx |   6 +--
 4 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index da6ac85..b0b28e8 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -3912,6 +3912,10 @@ a.logo:hover {
   color: #00898b;
 }
 
+.social-nav:hover {
+  color: #00abad;
+}
+
 /* Menu sub */
 
 .inner-nav .mi-chevron-down {
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 6521bf7..01a8889 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -26,9 +26,7 @@ export default function MainLayout({
       <body className="appear-animate body">
         <div className="theme-slick">
           <div className="page" id="top">
-            <nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
-              <Header links={navMenuData} />
-            </nav>
+            <Header links={navMenuData} />
             <main id="main">{children}</main>
             <Footer />
           </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8b0c041..6f11cba 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -14,57 +14,59 @@ const shareIcons: Record<string, any> = {
 
 export default function Header({ links }: { links: typeof navMenuData }) {
   return (
-    <div className="main-nav-sub full-wrapper">
-      {/* Logo  (* Add your text or image to the link tag. Use SVG or PNG image format. 
+    <nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
+      <div className="main-nav-sub full-wrapper">
+        {/* Logo  (* Add your text or image to the link tag. Use SVG or PNG image format. 
               If you use a PNG logo image, the image resolution must be equal 200% of the visible logo
               image size for support of retina screens. See details in the template documentation. *) */}
-      <div className="nav-logo-wrap local-scroll">
-        <Link href={`/`} className="logo">
-          <Image
-            src="/assets/images/demo-slick/logo-dark.webp"
-            alt="Your Company Logo"
-            width={105}
-            height={34}
-            className="light-mode-logo"
-          />
-          <Image
-            src="/assets/images/demo-slick/logo-dark.webp"
-            alt="Your Company Logo"
-            width={405}
-            height={34}
-            className="dark-mode-logo"
-          />
-        </Link>
+        <div className="nav-logo-wrap local-scroll">
+          <Link href={`/`} className="logo">
+            <Image
+              src="/assets/images/demo-slick/logo-dark.webp"
+              alt="Your Company Logo"
+              width={105}
+              height={34}
+              className="light-mode-logo"
+            />
+            <Image
+              src="/assets/images/demo-slick/logo-dark.webp"
+              alt="Your Company Logo"
+              width={405}
+              height={34}
+              className="dark-mode-logo"
+            />
+          </Link>
+        </div>
+        {/* Mobile Menu Button */}
+        <div onClick={toggleMobileMenu} className="mobile-nav" role="button" tabIndex={0}>
+          <i className="mobile-nav-icon" />
+          <span className="visually-hidden">Menu</span>
+        </div>
+        {/* Main Menu */}
+        <div className="inner-nav desktop-nav">
+          <ul className="clearlist local-scroll">
+            {/* Item With Sub */}
+            <HeaderNav links={links} />
+            {/* End Item With Sub */}
+          </ul>
+          <ul className="items-end clearlist">
+            {/* Languages */}
+            {/* <LanguageSelect /> */}
+            {/* End Languages */}
+            <li></li>
+          </ul>
+        </div>
+        <div className="flex mt-4 gap-3">
+          {Object.keys(shareIcons).map((k, idx) => {
+            return (
+              <a key={idx} className="cursor-pointer" href={"/"} target="_blank">
+                {shareIcons[k]}
+              </a>
+            );
+          })}
+        </div>
+        {/* End Main Menu */}
       </div>
-      {/* Mobile Menu Button */}
-      <div onClick={toggleMobileMenu} className="mobile-nav" role="button" tabIndex={0}>
-        <i className="mobile-nav-icon" />
-        <span className="visually-hidden">Menu</span>
-      </div>
-      {/* Main Menu */}
-      <div className="inner-nav desktop-nav">
-        <ul className="clearlist local-scroll">
-          {/* Item With Sub */}
-          <HeaderNav links={links} />
-          {/* End Item With Sub */}
-        </ul>
-        <ul className="items-end clearlist">
-          {/* Languages */}
-          {/* <LanguageSelect /> */}
-          {/* End Languages */}
-          <li></li>
-        </ul>
-      </div>
-      <div className="flex mt-4 gap-3">
-        {Object.keys(shareIcons).map((k, idx) => {
-          return (
-            <a key={idx} className="cursor-pointer" href={"/"} target="_blank">
-              {shareIcons[k]}
-            </a>
-          );
-        })}
-      </div>
-      {/* End Main Menu */}
-    </div>
+    </nav>
   );
 }
diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx
index 132d4a8..b29626a 100644
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@@ -56,7 +56,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
 
             {Array.isArray(link?.child) && (
               <>
-                <Link href={link?.href ?? "#"} className="mn-has-sub">
+                <Link href={link?.href ?? "#"} className="mn-has-sub flex justify-between">
                   {link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
                 </Link>
 
@@ -70,8 +70,8 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
                       )}
                       {Array.isArray(subLink?.child) && (
                         <>
-                          <Link href={subLink?.href ?? "#"} className="mn-has-sub">
-                            {subLink.text}
+                          <Link href={subLink?.href ?? "#"} className="mn-has-sub !flex !justify-between">
+                            <span>{subLink.text}</span>
                             <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text, subLink.text])} />
                           </Link>