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

fix: header nav shadow and hover animation

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-03-12 11:22:18 +07:00
parent 5cf5794bb4
commit c53866252e
4 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/assets/css/custom.css
View File

@ -20,13 +20,12 @@
.dark .light-mode-logo { .dark .light-mode-logo {
display: none; display: none;
} }
@media (min-width: 1025px) { /* @media (min-width: 1025px) {
.mn-has-sub:hover + *, .mn-has-sub:hover + *,
.mn-has-sub + *:hover { .mn-has-sub + *:hover {
display: block !important;
z-index: 1; z-index: 1;
} }
} } */
.fadeInText { .fadeInText {
animation: animationFadeText 0.5s linear 0s 1; animation: animationFadeText 0.5s linear 0s 1;

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

@ -3924,7 +3924,7 @@ a.logo:hover {
transition: var(--transition-default); transition: var(--transition-default);
} }
.mn-sub { .mn-sub {
display: none; /* opacity: 0; */
width: 220px; width: 220px;
position: absolute; position: absolute;
top: 100%; top: 100%;

4
src/app/globals.css
View File

@ -63,6 +63,10 @@ body {
.ext-btn-shadow-sm-primary8 { .ext-btn-shadow-sm-primary8 {
@apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors; @apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
} }
.shadow-nav {
@apply !shadow-[0px_0px_10px_0px_rgba(0,0,0,0.24)];
}
} }
.bg-gradient { .bg-gradient {

17
src/components/HeaderNav.tsx
View File

@ -10,6 +10,8 @@ import { Fragment, useEffect, useRef, useState } from "react";
import { FaCaretDown, FaCaretRight } from "react-icons/fa"; import { FaCaretDown, FaCaretRight } from "react-icons/fa";
export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) { export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) {
const [hoveredNavItem, setHoveredNavItem] = useState("");
const [hoveredSubNavItem, setHoveredSubNavItem] = useState("");
const [isDropdownOpen, setIsDropdownOpen] = useState([""]); const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
const dropdownRef = useRef(null); const dropdownRef = useRef(null);
@ -59,7 +61,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
)} )}
{Array.isArray(link?.child) && ( {Array.isArray(link?.child) && (
<> <div onMouseOver={() => setHoveredNavItem(`${index}`)} onMouseLeave={() => setHoveredNavItem("")}>
<Link <Link
href={link?.href ?? "#"} href={link?.href ?? "#"}
className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500" className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
@ -67,13 +69,16 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
> >
{link.text} <FaCaretDown className="ml-2" /> {link.text} <FaCaretDown className="ml-2" />
</Link> </Link>
<ul <ul
className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} lg:!top-[90px] !bg-extColorPrimary8 !shadow-2xl !transition-all !duration-500`} className={`mn-sub to-right mt-2 ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8 ${hoveredNavItem.includes(`${index}`) ? "lg:visible lg:opacity-100 lg:z-10" : "lg:invisible lg:opacity-0"} !transition-all !duration-300 lg:shadow-nav`}
ref={dropdownRef} ref={dropdownRef}
> >
{link.child.map((subLink: any, subLinkIdx: number) => ( {link.child.map((subLink: any, subLinkIdx: number) => (
<li key={subLinkIdx}> <li
key={subLinkIdx}
onMouseOver={() => setHoveredSubNavItem(`${index}-${subLinkIdx}`)}
onMouseLeave={() => setHoveredSubNavItem("")}
>
{!Array.isArray(subLink?.child) && ( {!Array.isArray(subLink?.child) && (
<Link <Link
href={subLink?.href} href={subLink?.href}
@ -94,7 +99,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
</Link> </Link>
<ul <ul
className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"} !bg-extColorPrimary8`} className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"} ${hoveredSubNavItem.includes(`${index}-${subLinkIdx}`) ? "lg:visible lg:opacity-100 lg:z-10" : "lg:invisible lg:opacity-0"} !bg-extColorPrimary8 !transition-all !duration-300 lg:shadow-nav`}
> >
{subLink.child.map((subLink2: any, subLinkIdx2: number) => ( {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
<li key={subLinkIdx2}> <li key={subLinkIdx2}>
@ -113,7 +118,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
</li> </li>
))} ))}
</ul> </ul>
</> </div>
)} )}
</li> </li>
{index != links.length - 1 && ( {index != links.length - 1 && (