import React , { CSSProperties , FunctionComponent , useState } from "react" ; import { MenuProvider , MenuContext } from "../menu" ; import { Header , Props as HeaderProps } from "../header" ; import style from "./style.module.scss" ; export interface Props extends HeaderProps { style ? : CSSProperties ; } export const HeaderLayout = ( props ) => { const { children } = props ; const [ isMenuOpen , setMenuOpen ] = useState ( false ) ; const menuContext = { open : ( ) => { setMenuOpen ( true ) ; } , close : ( ) => { setMenuOpen ( false ) ; } , toggle : ( ) => { setMenuOpen ( ! isMenuOpen ) ; } , } ; return ( < MenuProvider value = { menuContext } > < div className = { style . container } style = { props . style } > < Header { ... props } isMenuOpen = { isMenuOpen } / > < div className = { style . innerContainer } > { children } < /div> < /div> < /MenuProvider>); } ;