import React, { useEffect, useState, useRef } from 'react'; import styled from '@emotion/styled'; import { NavBar } from './NavBar'; import { Footer } from './Footer'; import { CircularProgress } from '@mui/material'; import { useLocalStore } from '@components'; 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)`; const { user, department } = useLocalStore(); useEffect(() => { window.scrollTo(0,0); }, []); return (
{!user || !department ? ( ) : (
{children}
) }