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 Image from "next/image";
|
||||||
import Header from "@/components/Header";
|
import Header from "@/components/Header";
|
||||||
import Footer from "@/components/Footer";
|
import Footer from "@/components/Footer";
|
||||||
import { slickMultipagesDark } from "@/data/menu";
|
import { navMenuData } from "@/data/menu";
|
||||||
|
|
||||||
export default function MainLayout({
|
export default function MainLayout({
|
||||||
children,
|
children,
|
||||||
@ -80,7 +80,7 @@ export default function MainLayout({
|
|||||||
<div className="theme-slick">
|
<div className="theme-slick">
|
||||||
<div className="page" id="top">
|
<div className="page" id="top">
|
||||||
<nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
|
<nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
|
||||||
<Header links={slickMultipagesDark} />
|
<Header links={navMenuData} />
|
||||||
</nav>
|
</nav>
|
||||||
<main id="main">{children}</main>
|
<main id="main">{children}</main>
|
||||||
<footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
|
<footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
"use client";
|
import HeaderNav from "@/components/HeaderNav";
|
||||||
import Nav2 from "@/components/Nav";
|
|
||||||
import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
|
import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@ -37,7 +36,7 @@ export default function Header1Multipage({ links }: any) {
|
|||||||
<div className="inner-nav desktop-nav">
|
<div className="inner-nav desktop-nav">
|
||||||
<ul className="clearlist local-scroll">
|
<ul className="clearlist local-scroll">
|
||||||
{/* Item With Sub */}
|
{/* Item With Sub */}
|
||||||
<Nav2 links={links} />
|
<HeaderNav links={links} />
|
||||||
{/* End Item With Sub */}
|
{/* End Item With Sub */}
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="items-end clearlist">
|
<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