66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import React, { ReactNode, useState, useEffect } from 'react';
|
|
import { mdiClose, mdiDotsVertical } from '@mdi/js';
|
|
import { containerMaxW } from '../config';
|
|
import BaseIcon from './BaseIcon';
|
|
import NavBarItemPlain from './NavBarItemPlain';
|
|
import NavBarMenuList from './NavBarMenuList';
|
|
import { MenuNavBarItem } from '../interfaces';
|
|
import { useAppSelector } from '../stores/hooks';
|
|
|
|
type Props = {
|
|
menu: MenuNavBarItem[];
|
|
className: string;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export default function NavBar({ menu, className = '', children }: Props) {
|
|
const [isMenuNavBarActive, setIsMenuNavBarActive] = useState(false);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrolled = window.scrollY > 0;
|
|
setIsScrolled(scrolled);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
const handleMenuNavBarToggleClick = () => {
|
|
setIsMenuNavBarActive(!isMenuNavBarActive);
|
|
};
|
|
|
|
return (
|
|
<nav
|
|
className={`${className} top-0 inset-x-0 fixed ${bgColor} h-14 z-30 transition-position w-screen lg:w-auto dark:bg-dark-800`}
|
|
>
|
|
<div
|
|
className={`flex lg:items-stretch ${containerMaxW} ${
|
|
isScrolled &&
|
|
`border-b border-midnightBlueTheme-outsideCardColor dark:border-dark-700`
|
|
}`}
|
|
>
|
|
<div className='flex flex-1 items-stretch h-14'>{children}</div>
|
|
<div className='flex-none items-stretch flex h-14 lg:hidden'>
|
|
<NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
|
|
<BaseIcon
|
|
path={isMenuNavBarActive ? mdiClose : mdiDotsVertical}
|
|
size='24'
|
|
/>
|
|
</NavBarItemPlain>
|
|
</div>
|
|
<div
|
|
className={`${
|
|
isMenuNavBarActive ? 'block' : 'hidden'
|
|
} max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 ${bgColor} shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-dark-800`}
|
|
>
|
|
<NavBarMenuList menu={menu} />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|