Sidebar nav and header changes

Signed-off-by: Thomas Evans <tevans3@icloud.com>

ui/src/components/Header.js

@@ -3,14 +3,15 @@ import { makeStyles } from "@material-ui/styles";
 import Breadcrumbs from "@material-ui/core/Breadcrumbs";
 import Link from "@material-ui/core/Link";
 import Typography from "@material-ui/core/Typography";
+import { useLocation } from "react-router-dom";
 
 const useStyles = makeStyles({
   root: {
     alignItems: "center",
     display: "flex",
     flexFlow: "row",
-    marginBottom: 20,
     width: "100%",
+    marginTop: "10px",
   },
   context: {
     flex: "1 0 auto",
@@ -23,10 +24,18 @@ const useStyles = makeStyles({
 const Header = (props) => {
   const classes = useStyles();
   const { title, breadcrumbs } = props;
+  const { pathname } = useLocation();
+
+  const mainPath = "/allocation" || "/";
+
+  const headerTitle = pathname === mainPath ? "Cost Allocation" : "Cloud Cost";
 
   return (
     <div className={classes.root}>
-      <img src={require("../images/logo.png")} alt="OpenCost" />
+      {/* <img src={require("../images/logo.png")} alt="OpenCost" /> */}
+      <Typography variant="h3" style={{ marginBottom: "10px" }}>
+        {headerTitle}
+      </Typography>
       <div className={classes.context}>
         {title && (
           <Typography variant="h4" className={classes.title}>

ui/src/components/Nav/NavItem.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
+import { Link } from "react-router-dom";
+import { makeStyles } from "@material-ui/styles";
+
+const NavItem = ({ active, href, name, onClick, secondary, title, icon }) => {
+  const useStyles = makeStyles({
+    root: {
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: "#ebebeb",
+      },
+      "&:selected": {
+        backgroundColor: "#e1e1e1",
+      },
+    },
+    text: {
+      maxWidth: 200,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
+    activeIcon: {
+      color: "#346ef2",
+      minWidth: 36,
+    },
+    activeText: {
+      color: "#346ef2",
+    },
+    icon: {
+      color: "#4e4e4e",
+      minWidth: 36,
+    },
+  });
+  const classes = useStyles();
+
+  const listItemIconClasses = { root: classes.icon };
+  const listItemTextClasses = {
+    secondary: classes.text,
+  };
+
+  if (active) {
+    listItemIconClasses.root = classes.activeIcon;
+    listItemTextClasses.primary = classes.activeText;
+  }
+
+  const renderListItemCore = () => (
+    <ListItem
+      className={active ? "active" : ""}
+      classes={{ root: classes.root }}
+      onClick={(e) => {
+        console.log("click");
+        if (onClick) {
+          onClick();
+          e.stopPropagation();
+        }
+      }}
+      selected={active}
+      title={title}
+    >
+      <ListItemIcon classes={listItemIconClasses}>{icon}</ListItemIcon>
+      <ListItemText
+        classes={listItemTextClasses}
+        primary={name}
+        secondary={secondary}
+      />
+    </ListItem>
+  );
+
+  return href && !active ? (
+    <Link style={{ textDecoration: "none", color: "inherit" }} to={`${href}`}>
+      {renderListItemCore()}
+    </Link>
+  ) : (
+    renderListItemCore()
+  );
+};
+
+export { NavItem };

ui/src/components/Nav/SidebarNav.js

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Drawer, List } from "@material-ui/core";
+
+import { NavItem } from "./NavItem";
+import { BarChart } from "@material-ui/icons";
+import { Cloud } from "@material-ui/icons";
+import { makeStyles } from "@material-ui/styles";
+
+const DRAWER_WIDTH = 200;
+
+const SidebarNav = ({ active }) => {
+  const useStyles = makeStyles({
+    drawer: {
+      width: DRAWER_WIDTH,
+      flexShrink: 0,
+    },
+    drawerPaper: {
+      backgroundColor: "inherit",
+      border: 0,
+      width: DRAWER_WIDTH,
+      paddingTop: "2.5rem",
+    },
+    text: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
+  });
+
+  const classes = useStyles();
+
+  const [init, setInit] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!init) {
+      setInit(true);
+    }
+  }, [init]);
+
+  const top = [
+    {
+      name: "Cost Allocation",
+      href: "allocation",
+      icon: <BarChart />,
+    },
+    { name: "Cloud Cost", href: "cloud", icon: <Cloud /> },
+  ];
+
+  return (
+    <Drawer
+      anchor={"left"}
+      className={classes.drawer}
+      classes={{ paper: classes.drawerPaper }}
+      variant={"permanent"}
+    >
+      <img
+        src={require("../../images/logo.png")}
+        alt="OpenCost"
+        style={{ flexShrink: 1, padding: "1rem" }}
+      />
+      <List style={{ flexGrow: 1 }}>
+        {top.map((l) => (
+          <NavItem active={active === `/${l.href}`} key={l.name} {...l} />
+        ))}
+      </List>
+    </Drawer>
+  );
+};
+
+export { SidebarNav };

ui/src/components/Nav/index.js

@@ -0,0 +1,3 @@
+import { SidebarNav } from "./SidebarNav";
+
+export default SidebarNav;

ui/src/components/Page.js

@@ -1,28 +1,43 @@
 import { makeStyles } from "@material-ui/styles";
 import React from "react";
+import { useLocation } from "react-router-dom";
+import { SidebarNav } from "./Nav/SidebarNav";
 
 const useStyles = makeStyles({
   wrapper: {
-    display: "flex",
-    flexFlow: "column",
+    position: "relative",
+    height: "100vh",
     flexGrow: 1,
-    margin: "20px 30px 0 30px",
-    minWidth: 800,
+    overflowX: "auto",
+    paddingLeft: "2rem",
+    paddingRight: "rem",
+    paddingTop: "2.5rem",
   },
   flexGrow: {
     display: "flex",
     flexFlow: "column",
     flexGrow: 1,
   },
+  body: {
+    display: "flex",
+    overflowY: "scroll",
+    margin: "0px",
+    backgroundColor: "f3f3f3",
+  },
 });
 
 const Page = (props) => {
   const classes = useStyles();
 
+  const { pathname } = useLocation();
+
   return (
-    <div className={classes.flexGrow}>
-      <div className={classes.wrapper}>
-        <div className={classes.flexGrow}>{props.children}</div>
+    <div className={classes.body}>
+      <SidebarNav active={pathname} />
+      <div className={classes.flexGrow}>
+        <div className={classes.wrapper}>
+          <div className={classes.flexGrow}>{props.children}</div>
+        </div>
       </div>
     </div>
   );

ui/src/route.js

@@ -3,7 +3,6 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import Reports from "./Reports.js";
 import CloudCostReports from "./CloudCostReports.js";
-import Sidebar from "./components/Sidebar.js";
 
 const Routes = () => {
   return (
@@ -12,6 +11,9 @@ const Routes = () => {
         <Route exact path="/">
           <Reports />
         </Route>
+        <Route exact path="/allocation">
+          <Reports />
+        </Route>
         <Route exact path="/cloud">
           <CloudCostReports />
         </Route>