feat: menu

src/components/Layout/Layout.tsx

@@ -1,8 +1,9 @@
-import React, { FC, PropsWithChildren } from 'react'
+import React, { FC, PropsWithChildren, useState } from 'react'
 import styled from 'styled-components'
 import { Header, HeaderProps } from './Header'
 import { Footer } from './Footer'
-import { Outlet } from 'react-router-dom'
+import { Menu } from '../Menu'
+import { Breakpoint, useBreakpoint } from '../Breakpoint'
 
 const StyledSection = styled.section`
   display: flex;
@@ -21,16 +22,64 @@ const StyledFooter = styled(Footer)`
 const StyledMain = styled.main`
   flex: auto;
 `
+const StyledMainSection = styled.section`
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+`
 
-export const Layout: FC<PropsWithChildren<Omit<HeaderProps, 'className'>>> = ({ children, ...headerProps }) => {
+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} />
-			<StyledMain>
-				<Outlet />
-				{children}
-			</StyledMain>
-			<StyledFooter />
+			<StyledHeader {...headerProps} onClickMenu={handleClickMenu} />
+			<Main>
+				{headerProps.showMenu && (!isSmallScreen || displayMenu) ?
+					<Menu onClose={handleCloseMenu} onLogout={handleLogout} /> : null}
+				<StyledMainSection>
+					<StyledMain>
+						{children}
+					</StyledMain>
+					<StyledFooter />
+				</StyledMainSection>
+			</Main>
 		</StyledSection>
 	)
 }