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>