diff --git a/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx b/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx index df68484609..5edbea7bf0 100644 --- a/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx +++ b/frontend/packages/core/src/components/DefaultEntityPage/DefaultEntityPage.tsx @@ -1,29 +1,60 @@ import React, { FC } from 'react'; +import { makeStyles, Theme } from '@material-ui/core'; import { EntityPageProps } from '../../api/entityView/types'; import { useEntity } from '../../api'; import { Switch, Route, Redirect } from 'react-router-dom'; import DefaultEntityPageHeader from '../DefaultEntityPageHeader'; import DefaultEntityPageNavbar from '../DefaultEntityPageNavbar'; +const useStyles = makeStyles(theme => ({ + root: { + display: 'grid', + gridTemplateAreas: ` + 'header header' + 'navbar content' + `, + gridTemplateRows: 'auto 1fr', + gridTemplateColumns: 'auto 1fr', + minHeight: '100%', + paddingBottom: theme.spacing(3), + }, + header: { + gridArea: 'header', + }, + navbar: { + gridArea: 'navbar', + }, + content: { + gridArea: 'content', + }, +})); + const DefaultEntityPage: FC = ({ navItems, views }) => { + const classes = useStyles(); const { kind, id } = useEntity(); const basePath = `/entity/${kind}/${id}`; return ( -
- - - - {views.map(({ path, component }) => ( - - ))} - - +
+
+ +
+
+ +
+
+ + {views.map(({ path, component }) => ( + + ))} + + +
); };