fix: header navigation
This commit is contained in:
parent
6d3dd6b542
commit
d6d41102a7
@ -15,7 +15,7 @@ import "@public/assets/css/styles.css";
|
||||
import Image from "next/image";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import { slickMultipagesDark } from "@/data/menu";
|
||||
import { navMenuData } from "@/data/menu";
|
||||
|
||||
export default function MainLayout({
|
||||
children,
|
||||
@ -80,7 +80,7 @@ export default function MainLayout({
|
||||
<div className="theme-slick">
|
||||
<div className="page" id="top">
|
||||
<nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
|
||||
<Header links={slickMultipagesDark} />
|
||||
<Header links={navMenuData} />
|
||||
</nav>
|
||||
<main id="main">{children}</main>
|
||||
<footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
|
||||
|
@ -1,5 +1,4 @@
|
||||
"use client";
|
||||
import Nav2 from "@/components/Nav";
|
||||
import HeaderNav from "@/components/HeaderNav";
|
||||
import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
@ -37,7 +36,7 @@ export default function Header1Multipage({ links }: any) {
|
||||
<div className="inner-nav desktop-nav">
|
||||
<ul className="clearlist local-scroll">
|
||||
{/* Item With Sub */}
|
||||
<Nav2 links={links} />
|
||||
<HeaderNav links={links} />
|
||||
{/* End Item With Sub */}
|
||||
</ul>
|
||||
<ul className="items-end clearlist">
|
||||
|
115
src/components/HeaderNav.tsx
Normal file
115
src/components/HeaderNav.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import addScrollspy from "@/utils/addScroll";
|
||||
import { init_classic_menu_resize } from "@/utils/menuToggle";
|
||||
import { scrollToElement } from "@/utils/scrollToElement";
|
||||
import { closeMobileMenu } from "@/utils/toggleMobileMenu";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function HeaderNav({ links, animateY = false }: any) {
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
scrollToElement();
|
||||
}, 1000);
|
||||
init_classic_menu_resize();
|
||||
window.addEventListener("scroll", addScrollspy as any);
|
||||
|
||||
window.addEventListener("resize", init_classic_menu_resize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", addScrollspy as any);
|
||||
window.removeEventListener("resize", init_classic_menu_resize);
|
||||
};
|
||||
}, []);
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<>
|
||||
{links[0].href?.includes("/") &&
|
||||
links.map((link: any, index: any) => (
|
||||
<li key={index}>
|
||||
{!Array.isArray(link?.child) && (
|
||||
<Link className={pathname.split("/")[1] == link.href.split("/")[1] ? "active" : ""} 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>
|
||||
) : (
|
||||
link.text
|
||||
)}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{Array.isArray(link?.child) && (
|
||||
<>
|
||||
<a
|
||||
href="#"
|
||||
className="mn-has-sub"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
// toggleDropdown();
|
||||
}}
|
||||
>
|
||||
{link.text} <i className="mi-chevron-down" />
|
||||
</a>
|
||||
|
||||
<ul className={`mn-sub to-left`}>
|
||||
{link.child.map((subLink: any, subLinkIdx: number) => (
|
||||
<li key={subLinkIdx}>
|
||||
{!Array.isArray(subLink?.child) && <Link href={subLink?.href}>{subLink?.text}</Link>}
|
||||
|
||||
{Array.isArray(subLink?.child) && (
|
||||
<>
|
||||
<a
|
||||
href="#"
|
||||
className="mn-has-sub"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
// toggleDropdown();
|
||||
}}
|
||||
>
|
||||
{subLink.text} <i className="mi-chevron-down" />
|
||||
</a>
|
||||
|
||||
<ul className={`mn-sub to-left`}>
|
||||
{subLink.child.map((subLink2: any, subLinkIdx2: number) => (
|
||||
<li key={subLinkIdx2}>
|
||||
<Link href={subLink2?.href}>{subLink2?.text}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
|
||||
{!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>
|
||||
) : (
|
||||
link.text
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,73 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import addScrollspy from "@/utils/addScroll";
|
||||
import { init_classic_menu_resize } from "@/utils/menuToggle";
|
||||
import { scrollToElement } from "@/utils/scrollToElement";
|
||||
import { closeMobileMenu } from "@/utils/toggleMobileMenu";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function OnePageNav({ links, animateY = false }: any) {
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
scrollToElement();
|
||||
}, 1000);
|
||||
init_classic_menu_resize();
|
||||
window.addEventListener("scroll", addScrollspy as any);
|
||||
|
||||
window.addEventListener("resize", init_classic_menu_resize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", addScrollspy as any);
|
||||
window.removeEventListener("resize", init_classic_menu_resize);
|
||||
};
|
||||
}, []);
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<>
|
||||
{links[0].href?.includes("/") &&
|
||||
links.map((link: any, index: any) => (
|
||||
<li key={index}>
|
||||
<Link
|
||||
className={
|
||||
pathname.split("/")[1] == link.href.split("/")[1]
|
||||
? "active"
|
||||
: ""
|
||||
}
|
||||
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>
|
||||
) : (
|
||||
link.text
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
{!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>
|
||||
) : (
|
||||
link.text
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
1328
src/data/menu.ts
1328
src/data/menu.ts
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user