Add left nav (#4705)

* Automated translation update ( bf08a04cda )

* Add Layout component wip

* finish layout implementation

* convert header to left nav

* better nav item spacing

* return source files to original glory

* lint fix

* Remove height limit on login screen

* fix top spacing on 3-panel layout

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Brent Clark <brent@backboneiq.com>
This commit is contained in:
Brent Clark 2023-03-15 22:45:55 -05:00 committed by GitHub
parent cab5f29b57
commit cef99cba71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 280 additions and 201 deletions

View file

@ -8,6 +8,7 @@ import Typography from '@mui/material/Typography';
import { Images } from 'images';
import { ServerSelectors } from 'store';
import { RouteEnum } from 'types';
import Layout from 'containers/Layout/Layout';
import './Initialize.css';
@ -35,25 +36,27 @@ const Initialize = ({ initialized }: InitializeProps) => {
return initialized
? <Navigate to={RouteEnum.LOGIN} />
: (
<Root className={'Initialize ' + classes.root}>
<div className='Initialize-content'>
<img src={Images.Logo} alt="logo" />
<Typography variant="subtitle1" className='subtitle'>{ t('InitializeContainer.title') }</Typography>
<Trans i18nKey="InitializeContainer.subtitle">
<Typography variant="subtitle2"></Typography>
<Typography variant="subtitle2"></Typography>
</Trans>
</div>
<Layout>
<Root className={'Initialize ' + classes.root}>
<div className='Initialize-content'>
<img src={Images.Logo} alt="logo" />
<Typography variant="subtitle1" className='subtitle'>{ t('InitializeContainer.title') }</Typography>
<Trans i18nKey="InitializeContainer.subtitle">
<Typography variant="subtitle2"></Typography>
<Typography variant="subtitle2"></Typography>
</Trans>
</div>
<div className="Initialize-graphics">
<div className="topLeft Initialize-graphics__square" />
<div className="topRight Initialize-graphics__square" />
<div className="bottomRight Initialize-graphics__square" />
<div className="bottomLeft Initialize-graphics__square" />
<div className="topBar Initialize-graphics__bar" />
<div className="bottomBar Initialize-graphics__bar" />
</div>
</Root>
<div className="Initialize-graphics">
<div className="topLeft Initialize-graphics__square" />
<div className="topRight Initialize-graphics__square" />
<div className="bottomRight Initialize-graphics__square" />
<div className="bottomLeft Initialize-graphics__square" />
<div className="topBar Initialize-graphics__bar" />
<div className="bottomBar Initialize-graphics__bar" />
</div>
</Root>
</Layout>
);
}