70 lines
1.5 KiB
React
70 lines
1.5 KiB
React
|
import React, { useEffect, useState, useRef } from 'react';
|
||
|
|
import styled from '@emotion/styled';
|
||
|
|
import { NavBar } from './NavBar';
|
||
|
|
import { Footer } from './Footer';
|
||
|
|
|
||
|
|
const minHeight = 'calc(100vh - 30px)';
|
||
|
|
|
||
|
|
const Body = styled.div({
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
position: 'relative',
|
||
|
|
overflow: 'hidden',
|
||
|
|
height: '100vh',
|
||
|
|
minHeight
|
||
|
|
});
|
||
|
|
|
||
|
|
const MainContainer = styled.div({
|
||
|
|
display: 'flex',
|
||
|
|
textAlign: 'center',
|
||
|
|
width: '100%',
|
||
|
|
flexDirection: 'row',
|
||
|
|
height: minHeight
|
||
|
|
});
|
||
|
|
|
||
|
|
const Main = styled.div({
|
||
|
|
background: 'linear-gradient(100deg, #f3f9ff 80%, rgba(217, 217, 217) 100%);',
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
width: '100%',
|
||
|
|
height: minHeight
|
||
|
|
});
|
||
|
|
|
||
|
|
const Content = styled.div(({ cssProps }) => ({
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
width: '100%',
|
||
|
|
alignContent: 'center',
|
||
|
|
overflowY: 'auto',
|
||
|
|
height: cssProps?.minHeightMain || '100%'
|
||
|
|
}));
|
||
|
|
|
||
|
|
export const Shell = ({ children }) => {
|
||
|
|
const bannerRef = useRef();
|
||
|
|
const nonContentHeight = 92 + (bannerRef?.current?.offsetHeight || 0);
|
||
|
|
const minHeightMain = `calc(100vh - ${nonContentHeight}px)`;
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
window.scrollTo(0,0);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Body>
|
||
|
|
<MainContainer id="main-container">
|
||
|
|
<Main id="main">
|
||
|
|
<NavBar />
|
||
|
|
<div ref={bannerRef} />
|
||
|
|
<Content
|
||
|
|
cssProps={{
|
||
|
|
minHeightMain
|
||
|
|
}}
|
||
|
|
id="content"
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Content>
|
||
|
|
</Main>
|
||
|
|
</MainContainer>
|
||
|
|
<Footer />
|
||
|
|
</Body>
|
||
|
|
)
|
||
|
|
}
|