56 lines
2.0 KiB
TypeScript
56 lines
2.0 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'
|
|
|
|
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);
|
|
|
|
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} fixed inset-x-0 top-0 z-30 h-14 w-screen border-b border-[#DDD5C7] bg-[#F6F3EC]/95 backdrop-blur transition-position lg:w-auto dark:bg-dark-800`}
|
|
>
|
|
<div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled ? 'shadow-sm shadow-[#83755E]/10 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'
|
|
} absolute left-0 top-14 flex max-h-screen-menu w-screen items-center overflow-y-auto bg-[#F6F3EC] shadow-lg lg:static lg:flex lg:w-auto lg:overflow-visible lg:bg-transparent lg:shadow-none dark:bg-dark-800`}
|
|
>
|
|
<NavBarMenuList menu={menu} />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|