rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: social media hover

Browse Source
This commit is contained in:
Val 2025-03-04 17:54:21 +07:00
parent efb92d0833
commit 01436f46b6
4 changed files with 59 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/css/style.css
View File

@ -3912,6 +3912,10 @@ a.logo:hover {
color: #00898b;
}
.social-nav:hover {
color: #00abad;
}
/* Menu sub */
.inner-nav .mi-chevron-down {

4
src/app/(main)/layout.tsx
View File

@ -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>

100
src/components/Header.tsx
View File

@ -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>
);
}

6
src/components/HeaderNav.tsx
View File

@ -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>