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>