fix: header nav shadow and hover animation
This commit is contained in:
parent
5cf5794bb4
commit
c53866252e
@ -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;
|
||||||
|
@ -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%;
|
||||||
|
@ -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 {
|
||||||
|
@ -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 && (
|
||||||
|
Loading…
x
Reference in New Issue
Block a user