feat(projects, pipeline): project detail page.

src/layouts/default.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useCallback, useRef, useState } from "react";
 import clsx from "clsx";
 import {
   createStyles,
@@ -16,13 +16,15 @@ import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 import ChevronRightIcon from "@material-ui/icons/ChevronRight";
-import { ProjectPanel } from '../projects/project-panel';
+import { ProjectPanel } from "../projects/project-panel";
+import { HeaderContainerProvider } from "./header-container";
 const drawerWidth = 240;
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       display: "flex",
+      overflow: "hidden",
     },
     appBar: {
       zIndex: theme.zIndex.drawer + 1,
@@ -70,17 +72,24 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: "center",
       justifyContent: "flex-end",
       padding: theme.spacing(0, 1),
+      flex: "none",
       // necessary for content to be below app bar
       ...theme.mixins.toolbar,
     },
+    headerContaner: {
+      flex: "auto",
+    },
     content: {
       flexGrow: 1,
-      padding: theme.spacing(3),
+      height: "100vh",
+      display: "flex",
+      flexFlow: "column",
+      padding: theme.spacing(0),
     },
   })
 );
 
-export const DefaultLayout: FC = ({children}) => {
+export const DefaultLayout: FC = ({ children }) => {
   const classes = useStyles();
   const theme = useTheme();
   const [open, setOpen] = React.useState(true);
@@ -93,62 +102,71 @@ export const DefaultLayout: FC = ({children}) => {
     setOpen(false);
   };
 
+  const [headerContainer, setHeaderContainer] = useState(undefined);
+  const onRefChange = useCallback(
+    (node) => {
+      setHeaderContainer(node);
+    },
+    [setHeaderContainer]
+  );
+
   return (
     <div className={classes.root}>
-        <CssBaseline />
-        <AppBar
-          position="fixed"
-          className={clsx(classes.appBar, {
-            [classes.appBarShift]: open,
-          })}
-        >
-          <Toolbar>
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              onClick={handleDrawerOpen}
-              edge="start"
-              className={clsx(classes.menuButton, {
-                [classes.hide]: open,
-              })}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography variant="h6" noWrap>
-              Mini variant drawer
-            </Typography>
-          </Toolbar>
-        </AppBar>
-        <Drawer
-          variant="permanent"
-          className={clsx(classes.drawer, {
+      <CssBaseline />
+      <AppBar
+        position="fixed"
+        className={clsx(classes.appBar, {
+          [classes.appBarShift]: open,
+        })}
+      >
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawerOpen}
+            edge="start"
+            className={clsx(classes.menuButton, {
+              [classes.hide]: open,
+            })}
+          >
+            <MenuIcon />
+          </IconButton>
+          <div className={classes.headerContaner} ref={onRefChange}></div>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        variant="permanent"
+        className={clsx(classes.drawer, {
+          [classes.drawerOpen]: open,
+          [classes.drawerClose]: !open,
+        })}
+        classes={{
+          paper: clsx({
             [classes.drawerOpen]: open,
             [classes.drawerClose]: !open,
-          })}
-          classes={{
-            paper: clsx({
-              [classes.drawerOpen]: open,
-              [classes.drawerClose]: !open,
-            }),
-          }}
-        >
-          <div className={classes.toolbar}>
-            <IconButton onClick={handleDrawerClose}>
-              {theme.direction === "rtl" ? (
-                <ChevronRightIcon />
-              ) : (
-                <ChevronLeftIcon />
-              )}
-            </IconButton>
-          </div>
-          <Divider />
-          <ProjectPanel />
-          <Divider />
-        </Drawer>
-        <main className={classes.content}>
-          <div className={classes.toolbar} />
-          { children }
-        </main>
+          }),
+        }}
+      >
+        <div className={classes.toolbar}>
+          <IconButton onClick={handleDrawerClose}>
+            {theme.direction === "rtl" ? (
+              <ChevronRightIcon />
+            ) : (
+              <ChevronLeftIcon />
+            )}
+          </IconButton>
+        </div>
+        <Divider />
+        <ProjectPanel />
+        <Divider />
+      </Drawer>
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+
+        <HeaderContainerProvider value={headerContainer}>
+          {children}
+        </HeaderContainerProvider>
+      </main>
     </div>
   );
-}
+};