86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
import React, { FC, PropsWithChildren, useState } from 'react'
|
|
import styled from 'styled-components'
|
|
import { Header, HeaderProps } from './Header'
|
|
import { Footer } from './Footer'
|
|
import { Menu } from '../Menu'
|
|
import { Breakpoint, useBreakpoint } from '../Breakpoint'
|
|
|
|
const StyledSection = styled.section`
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
`
|
|
|
|
const StyledHeader = styled(Header)`
|
|
flex: 0 0 auto;
|
|
`
|
|
|
|
const StyledFooter = styled(Footer)`
|
|
flex: 0 0 auto;
|
|
`
|
|
|
|
const StyledMain = styled.main`
|
|
flex: auto;
|
|
`
|
|
const StyledMainSection = styled.section`
|
|
flex: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
`
|
|
|
|
const StyledMainWrapper = styled.section<{ $column?: boolean }>`
|
|
flex: auto;
|
|
display: flex;
|
|
flex-direction: ${({ $column }) => $column ? 'column' : 'row'};
|
|
`
|
|
|
|
export const Main: FC<PropsWithChildren<{ column?: boolean }>> = ({ children, column }) => {
|
|
return (
|
|
<>
|
|
<Breakpoint s down>
|
|
{children}
|
|
</Breakpoint>
|
|
<Breakpoint s up>
|
|
<StyledMainWrapper $column={column}>
|
|
{children}
|
|
</StyledMainWrapper>
|
|
</Breakpoint>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export const Layout: FC<PropsWithChildren<Omit<HeaderProps, 'className' | 'onClickMenu'>>> = ({
|
|
children,
|
|
...headerProps
|
|
}) => {
|
|
const isSmallScreen = useBreakpoint({ s: true, down: true })
|
|
const [displayMenu, setDisplayMenu] = useState(false)
|
|
|
|
const handleClickMenu = () => {
|
|
if (!isSmallScreen) return
|
|
setDisplayMenu(s => !s)
|
|
}
|
|
|
|
const handleCloseMenu = () => {
|
|
if (!isSmallScreen) return
|
|
setDisplayMenu(false)
|
|
}
|
|
|
|
const handleLogout = () => {}
|
|
return (
|
|
<StyledSection>
|
|
<StyledHeader {...headerProps} onClickMenu={handleClickMenu} />
|
|
<Main>
|
|
{headerProps.showMenu && (!isSmallScreen || displayMenu) ?
|
|
<Menu onClose={handleCloseMenu} onLogout={handleLogout} /> : null}
|
|
<StyledMainSection>
|
|
<StyledMain>
|
|
{children}
|
|
</StyledMain>
|
|
<StyledFooter />
|
|
</StyledMainSection>
|
|
</Main>
|
|
</StyledSection>
|
|
)
|
|
}
|