feat: create layout container for the pages

src/@types/Components.d.ts

@@ -23,3 +23,10 @@ declare namespace Header {
     isNavigationCollapsed: boolean
   }
 }
+
+declare namespace PageLayoutContainer {
+  type Props = {
+    isNavigationCollapsed: boolean
+    children: React.ReactNode
+  }
+}

src/components/Header/Header.tsx

@@ -14,6 +14,7 @@ import { avatar } from 'assets/icons';
 
 const useStyles = makeStyles((theme: Theme) => ({
   headerContainer: {
+    zIndex: 1,
     position: 'fixed',
     width: 'calc(100% - 280px)',
     right: 0,

src/components/PageLayoutContainer/PageLayoutContainer.tsx

@@ -0,0 +1,41 @@
+import {
+  Grid, Theme, useMediaQuery, useTheme,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  rootContainer: {
+    position: 'fixed',
+    width: 'calc(100% - 280px)',
+    right: 0,
+    top: 104,
+    padding: theme.spacing(3),
+    transition: 'width 0.2s ease',
+  },
+  rootContainerExtended: {
+    width: `calc(100% - ${theme.spacing(9)}px)`,
+    [theme.breakpoints.down('sm')]: {
+      width: '100%',
+    },
+  },
+}));
+
+export const PageLayoutContainer = ({
+  isNavigationCollapsed,
+  children,
+}: PageLayoutContainer.Props): JSX.Element => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const matchesSmallSize = useMediaQuery(theme.breakpoints.down('sm'));
+
+  return (
+    <Grid
+      container
+      className={clsx(classes.rootContainer,
+        (matchesSmallSize || isNavigationCollapsed) && classes.rootContainerExtended)}
+    >
+      {children}
+    </Grid>
+  );
+};

src/components/index.ts

@@ -1,3 +1,4 @@
 export { MenuItem } from './MenuItem/MenuItem';
 export { Navigation } from './Navigation/Navigation';
 export { Header } from './Header/Header';
+export { PageLayoutContainer } from './PageLayoutContainer/PageLayoutContainer';