'use client';
import { Fragment, MutableRefObject, PropsWithChildren, RefObject, useCallback, useEffect, useRef, useState } from 'react';
import { Dialog, Popover } from '@headlessui/react';
import clsx from 'clsx';
import { banner, blogEnabled, componentsRounded, iconsCountRounded, sponsorsUrl, uiGithubUrl } from '@/config/site';
import Icon from '@/components/Icon';
import GoToTop from '@/components/layout/GoToTop';
import Link from '@/components/Link';
import NavLink from '@/components/NavLink';
import Shape from '@/components/Shape';
import { usePathname } from 'next/navigation';
const NavDropdown = ({ title, children, active, footer = false }) => {
return (
{({ open }) => (
<>
{title}
{children}
{footer && {footer}
}
>
)}
);
};
const menuLinks = [
{
title: 'UI Kit',
menu: 'ui',
children: [
{
icon: 'home',
href: '/',
title: 'About',
description: 'Develop beautiful web apps with Tabler',
},
{
icon: 'layout-dashboard',
href: '/preview',
title: 'Preview template',
description: 'See what Tabler looks like and offers',
},
{
icon: 'script',
href: '/docs',
title: 'Documentation',
description: 'Read how to develop apps with Tabler',
},
{
icon: 'lego',
href: '/features',
title: 'Features',
description: 'See what kind of features you can find here',
},
{
icon: 'lifebuoy',
href: '/support',
title: 'Support',
description: 'Write to us if you need anything!',
},
{
icon: 'brand-github',
href: uiGithubUrl,
title: 'Source code',
description: 'View Tabler\'s source code ',
props: {
target: '_blank',
rel: 'nofollow',
},
},
],
},
{
href: '/emails',
menu: 'emails',
title: 'Email templates',
},
{
href: '/icons',
menu: 'icons',
title: (
<>
Over {iconsCountRounded}
Icons
>
),
},
...(blogEnabled ? [{
href: '/blog',
menu: 'blog',
title: <>Blog>,
}] : []),
{
href: '/docs',
menu: 'docs',
title: 'Documentation',
},
// {
// href: '/guides',
// menu: 'guides',
// title: 'Guides',
// },
{
menu: 'sponsors',
href: sponsorsUrl,
type: 'button',
title: (
Sponsor project
),
icon: ,
},
];
const NavbarLink = (link, menu) => {
// const router = useRouter()
if (link.type === 'button') {
return (
);
} else if (link.children) {
return (
{link.children.map((link) => (
true} {...link.props}>
{link.title}
{link.description}
))}
);
}
return (
// router.pathname.replace(/^\//, '').startsWith(link.menu)
{link.title}
);
};
const SidebarLink = (link, menu, onClick) => {
if (link.type === 'button') {
return (
);
} else if (link.children) {
return (
{link.title}
{link.children.map((link) => (
{link.title}
))}
);
}
return (
{link.title}
);
};
const Navbar = ({ menu, opened, onClick, ...props }: { menu?: string; opened?: boolean; onClick?: (event: React.MouseEvent) => void; className?: string }) => {
return {menuLinks.map((link) => ({NavbarLink(link, menu)}))}
;
};
const Banner = () => {
const [showBanner, setShowBanner] = useState(false);
useEffect(() => {
if (window.localStorage.getItem(`banner-${banner.id}`) !== '1') {
setShowBanner(true);
}
}, []);
function closeBanner() {
localStorage.setItem(`banner-${banner.id}`, '1');
setShowBanner(false);
}
return (
banner.show &&
showBanner && (
)
);
};
export default function Header({ headerStatic, className, pageProps, ...props }: { headerStatic?: boolean; className?: string; pageProps?: any }) {
const [sticky, setSticky] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const pathname = usePathname();
function closeModal() {
setIsOpen(false);
}
function toggleModal() {
setIsOpen(!isOpen);
}
useEffect(() => {
const handleScroll = () => {
setSticky(window.pageYOffset > 0);
};
window.addEventListener('scroll', handleScroll);
handleScroll();
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<>
>
);
}