You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
908 B
30 lines
908 B
2 years ago
|
import { useState } from "react"
|
||
|
|
import Navbar from "./elements/navbar"
|
||
|
|
import Footer from "./elements/footer"
|
||
|
|
import NotificationBanner from "./elements/notification-banner"
|
||
|
|
|
||
|
|
const Layout = ({ children, global, pageContext }) => {
|
||
|
|
const { navbar, footer, notificationBanner } = global.attributes
|
||
|
|
|
||
|
|
const [bannerIsShown, setBannerIsShown] = useState(true)
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col justify-between min-h-screen">
|
||
|
|
{/* Aligned to the top */}
|
||
|
|
<div className="flex-1">
|
||
|
|
{notificationBanner && bannerIsShown && (
|
||
|
|
<NotificationBanner
|
||
|
|
data={notificationBanner}
|
||
|
|
closeSelf={() => setBannerIsShown(false)}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
<Navbar navbar={navbar} pageContext={pageContext} />
|
||
|
|
<div>{children}</div>
|
||
|
|
</div>
|
||
|
|
{/* Aligned to the bottom */}
|
||
|
|
<Footer footer={footer} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Layout
|