65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { MenuToggle } from "../MenuToggle"
|
|
import { Menu } from "../Menu"
|
|
import { Overlay } from "@/ui/Overlay"
|
|
import { useContext } from "react"
|
|
import { ConfigContext } from "src/context/ConfigContext"
|
|
import { Box } from "@/ui/Box"
|
|
import { Spacer } from "../Spacer"
|
|
import { useToggle } from "react-use"
|
|
import { HudozkaLogo } from "../HudozkaLogo"
|
|
import { useDarkTheme } from "@/hooks/useDarkTheme"
|
|
import { HudozkaTitle } from "../HudozkaTitle"
|
|
import Link from "next/link"
|
|
|
|
export type MobileNavigationProps = {
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
export const MobileNavigation: React.FC<MobileNavigationProps> = ({ style }) => {
|
|
const dark = useDarkTheme()
|
|
const [open, toggleOpen] = useToggle(false)
|
|
const { menu } = useContext(ConfigContext)
|
|
|
|
return (
|
|
<>
|
|
<Overlay
|
|
show={open}
|
|
onClickOverlay={toggleOpen}
|
|
// duration={250}
|
|
duration={0}
|
|
>
|
|
<Box style={{
|
|
padding: "var(--size-s)",
|
|
}}>
|
|
<Spacer />
|
|
<MenuToggle
|
|
open={open}
|
|
onClick={toggleOpen}
|
|
/>
|
|
</Box>
|
|
<Box style={{
|
|
justifyContent: "center",
|
|
}}>
|
|
<Menu vertical
|
|
items={menu}
|
|
/>
|
|
</Box>
|
|
</Overlay>
|
|
|
|
<Box wrap gap={"var(--size-s)"} style={style}>
|
|
<Link href="/">
|
|
<a>
|
|
<HudozkaLogo dark={dark} />
|
|
</a>
|
|
</Link>
|
|
<HudozkaTitle compact />
|
|
<Spacer />
|
|
<MenuToggle
|
|
open={open}
|
|
onClick={toggleOpen}
|
|
/>
|
|
</Box>
|
|
</>
|
|
)
|
|
}
|