2025-05-23 22:22:56 +00:00
|
|
|
import React, { useEffect, useState, useRef } from 'react';
|
|
|
|
|
import styled from '@emotion/styled';
|
|
|
|
|
import { NavBar } from './NavBar';
|
|
|
|
|
import { Footer } from './Footer';
|
2025-05-27 18:19:40 +00:00
|
|
|
import { CircularProgress } from '@mui/material';
|
|
|
|
|
import { useLocalStore } from '@components';
|
2025-05-23 22:22:56 +00:00
|
|
|
|
|
|
|
|
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)`;
|
2025-05-27 18:19:40 +00:00
|
|
|
const { user, department } = useLocalStore();
|
2025-05-23 22:22:56 +00:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
window.scrollTo(0,0);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
2025-05-27 18:19:40 +00:00
|
|
|
<div>
|
|
|
|
|
{!user || !department ? (
|
|
|
|
|
<Body
|
|
|
|
|
style={{
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
color: 'grey',
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<CircularProgress color="inherit" />
|
|
|
|
|
</Body>
|
|
|
|
|
) : (
|
|
|
|
|
<Body>
|
|
|
|
|
<MainContainer id="main-container">
|
|
|
|
|
<Main id="main">
|
|
|
|
|
<NavBar />
|
|
|
|
|
<div ref={bannerRef} />
|
|
|
|
|
<Content
|
|
|
|
|
cssProps={{
|
|
|
|
|
minHeightMain
|
|
|
|
|
}}
|
|
|
|
|
id="content"
|
|
|
|
|
>
|
|
|
|
|
{children}
|
|
|
|
|
</Content>
|
|
|
|
|
</Main>
|
|
|
|
|
</MainContainer>
|
|
|
|
|
<Footer />
|
|
|
|
|
</Body>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
2025-05-23 22:22:56 +00:00
|
|
|
)
|
|
|
|
|
}
|
