fix: HeaderNav types and defect
This commit is contained in:
parent
312e4bed2f
commit
ae9ec00946
@ -1,12 +1,12 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { navMenuData } from "@/data/menu";
|
||||||
import addScrollspy from "@/utils/addScroll";
|
import addScrollspy from "@/utils/addScroll";
|
||||||
import { init_classic_menu_resize } from "@/utils/menuToggle";
|
import { init_classic_menu_resize } from "@/utils/menuToggle";
|
||||||
import { scrollToElement } from "@/utils/scrollToElement";
|
import { scrollToElement } from "@/utils/scrollToElement";
|
||||||
import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu";
|
import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
|
||||||
import { Fragment, useEffect, useRef, useState } from "react";
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { navMenuData } from "@/data/menu";
|
import { Fragment, useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
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 [isDropdownOpen, setIsDropdownOpen] = useState([""]);
|
const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
|
||||||
@ -36,89 +36,70 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{links[0].href?.includes("/") &&
|
{links.map((link, index) => (
|
||||||
links.map((link, index) => (
|
<Fragment key={index}>
|
||||||
<Fragment key={index}>
|
<li>
|
||||||
<li>
|
{!Array.isArray(link?.child) && (
|
||||||
{!Array.isArray(link?.child) && (
|
<Link href={link.href}>
|
||||||
<Link href={link.href}>
|
{animateY ? (
|
||||||
{animateY ? (
|
<span className="btn-animate-y">
|
||||||
<span className="btn-animate-y">
|
<span className="btn-animate-y-1">{link.text}</span>
|
||||||
<span className="btn-animate-y-1">{link.text}</span>
|
<span className="btn-animate-y-2" aria-hidden="true">
|
||||||
<span className="btn-animate-y-2" aria-hidden="true">
|
{link.text}
|
||||||
{link.text}
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
) : (
|
|
||||||
link.text
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{Array.isArray(link?.child) && (
|
|
||||||
<>
|
|
||||||
<Link href={link?.href ?? "#"} className="mn-has-sub">
|
|
||||||
{link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<ul className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
|
|
||||||
{link.child.map((subLink: any, subLinkIdx: number) => (
|
|
||||||
<li key={subLinkIdx}>
|
|
||||||
{!Array.isArray(subLink?.child) && (
|
|
||||||
<Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
|
|
||||||
{subLink?.text}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{Array.isArray(subLink?.child) && (
|
|
||||||
<>
|
|
||||||
<Link href={subLink?.href ?? "#"} className="mn-has-sub">
|
|
||||||
{subLink.text}{" "}
|
|
||||||
<i
|
|
||||||
className="mi-chevron-down"
|
|
||||||
onClick={() => toggleDropdown([link.text, subLink.text])}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<ul className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"}`}>
|
|
||||||
{subLink.child.map((subLink2: any, subLinkIdx2: number) => (
|
|
||||||
<li key={subLinkIdx2}>
|
|
||||||
<Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
|
|
||||||
{subLink2?.text}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
{index != links.length - 1 && (
|
|
||||||
<div className="text-white h-[25px] mx-2 opacity-[0.3]" style={{ border: "1px solid white" }} />
|
|
||||||
)}
|
|
||||||
</Fragment>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{!links[0].href?.includes("/") &&
|
|
||||||
links.map((link: any, index: any) => (
|
|
||||||
<li className="scrollspy-link" key={index}>
|
|
||||||
<a onClick={() => closeMobileMenu()} className="" href={link.href}>
|
|
||||||
{animateY ? (
|
|
||||||
<span className="btn-animate-y">
|
|
||||||
<span className="btn-animate-y-1">{link.text}</span>
|
|
||||||
<span className="btn-animate-y-2" aria-hidden="true">
|
|
||||||
{link.text}
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
) : (
|
||||||
) : (
|
link.text
|
||||||
link.text
|
)}
|
||||||
)}
|
</Link>
|
||||||
</a>
|
)}
|
||||||
|
|
||||||
|
{Array.isArray(link?.child) && (
|
||||||
|
<>
|
||||||
|
<Link href={link?.href ?? "#"} className="mn-has-sub">
|
||||||
|
{link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<ul className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
|
||||||
|
{link.child.map((subLink: any, subLinkIdx: number) => (
|
||||||
|
<li key={subLinkIdx}>
|
||||||
|
{!Array.isArray(subLink?.child) && (
|
||||||
|
<Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
|
||||||
|
{subLink?.text}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{Array.isArray(subLink?.child) && (
|
||||||
|
<>
|
||||||
|
<Link href={subLink?.href ?? "#"} className="mn-has-sub">
|
||||||
|
{subLink.text}
|
||||||
|
<i className="mi-chevron-down" onClick={() => toggleDropdown([link.text, subLink.text])} />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<ul className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"}`}>
|
||||||
|
{subLink.child.map((subLink2: any, subLinkIdx2: number) => (
|
||||||
|
<li key={subLinkIdx2}>
|
||||||
|
<Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
|
||||||
|
{subLink2?.text}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</li>
|
</li>
|
||||||
))}
|
{index != links.length - 1 && (
|
||||||
|
<div
|
||||||
|
className="text-white bg-white h-[1px] md:h-[25px] mx-2 opacity-[0.3]"
|
||||||
|
style={{ border: "1px solid white" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,4 @@
|
|||||||
export const navMenuData = [
|
export const navMenuData = [
|
||||||
{ href: "/", text: "Home" },
|
|
||||||
{ href: "/blog", text: "Blog" },
|
|
||||||
{ href: "/testimonials", text: "Testimonials" },
|
|
||||||
{ href: "https://cochise.mdnavigatorclinical.com/prognocistc1/cochiseClinicIndex.html", text: "Patient Portal" },
|
|
||||||
{
|
{
|
||||||
href: "#",
|
href: "#",
|
||||||
text: "About",
|
text: "About",
|
||||||
@ -68,10 +64,13 @@ export const navMenuData = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{ href: "https://cochise.mdnavigatorclinical.com/prognocistc1/cochiseClinicIndex.html", text: "Patient Portal" },
|
||||||
|
{ href: "/blog", text: "Blog" },
|
||||||
{
|
{
|
||||||
href: "#",
|
href: "#",
|
||||||
text: "Resources",
|
text: "Resources",
|
||||||
child: [
|
child: [
|
||||||
|
{ href: "/testimonials", text: "Testimonials" },
|
||||||
{ href: "/insurances", text: "Insurances" },
|
{ href: "/insurances", text: "Insurances" },
|
||||||
{ href: "/support", text: "Support Groups" },
|
{ href: "/support", text: "Support Groups" },
|
||||||
{ href: "/hospitality-house", text: "Hospitality House" },
|
{ href: "/hospitality-house", text: "Hospitality House" },
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user