Add workflows menu

src/app/Workflows/Dashboard/Dashboard.tsx

@@ -30,7 +30,6 @@ const Dashboard: React.FC = () => {
   const [page, setPage] = useState<number>(1);
   return (
     <div>
-      <SectionHeader>Workflows</SectionHeader>
       <div className={styles['dashboard-card-container']}>
         <DashboardCard
           isLoading={groups.isLoading}

src/app/Workflows/_Layout/Layout.module.scss

@@ -1,5 +1,6 @@
-.breadcrumbs {
-  text-transform: none;
-  font-size: 1em;
-  line-height: 1.8em;
+.menu {
+  padding-left: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #808080;
 }

src/app/Workflows/_Layout/Layout.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { Router } from '../_Router';
+import { Menu } from '../_components';
+import styles from './Layout.module.scss';
 import { PageLayout, LayoutBody } from '@tapis/tapisui-common';
 
 const Layout: React.FC = () => {
   const body = (
     <LayoutBody>
+      <div className={styles['menu']}>
+        <Menu />
+      </div>
       <Router />
     </LayoutBody>
   );

src/app/Workflows/_components/Menu/Menu.tsx

@@ -1,52 +1,49 @@
 import React from 'react';
-import { Navbar, Nav, NavItem, Collapse, Button } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import { Icon } from '@tapis/tapisui-common';
-import styles from './Menu.module.scss';
+import { useHistory } from 'react-router-dom';
+import Stack from '@mui/material/Stack';
+import { Button } from '@mui/material';
 
 const Menu: React.FC = () => {
+  const history = useHistory();
   return (
-    <Navbar color="light" light expand={true}>
-      <Collapse isOpen={true} navbar>
-        <Nav className="me-auto" navbar>
-          <NavItem className={styles['nav-item']}>
-            <Link to="/workflows">
-              <Button>
-                <Icon name="dashboard"></Icon> Dashboard
-              </Button>
-            </Link>
-          </NavItem>
-          <NavItem className={styles['nav-item']}>
-            <Link to="/workflows/pipelines">
-              <Button>
-                <Icon name="publications"></Icon> Pipelines
-              </Button>
-            </Link>
-          </NavItem>
-          <NavItem className={styles['nav-item']}>
-            <Link to="/workflows/groups">
-              <Button>
-                <Icon name="user"></Icon> Groups
-              </Button>
-            </Link>
-          </NavItem>
-          <NavItem className={styles['nav-item']}>
-            <Link to="/workflows/archives">
-              <Button>
-                <Icon name="folder"></Icon> Archives
-              </Button>
-            </Link>
-          </NavItem>
-          <NavItem className={styles['nav-item']}>
-            <Link to="/workflows/identities">
-              <Button>
-                <Icon name="user"></Icon> Identities
-              </Button>
-            </Link>
-          </NavItem>
-        </Nav>
-      </Collapse>
-    </Navbar>
+    <Stack spacing={2} direction="row">
+      <Button
+        variant="outlined"
+        size="small"
+        onClick={() => {
+          history.push('/workflows');
+        }}
+      >
+        Dashboard
+      </Button>
+      <Button
+        variant="outlined"
+        size="small"
+        onClick={() => {
+          history.push('/workflows/groups');
+        }}
+      >
+        Groups
+      </Button>
+      <Button
+        variant="outlined"
+        size="small"
+        onClick={() => {
+          history.push('/workflows/pipelines');
+        }}
+      >
+        Pipelines
+      </Button>
+      <Button
+        variant="outlined"
+        size="small"
+        onClick={() => {
+          history.push('/workflows/archives');
+        }}
+      >
+        Archives
+      </Button>
+    </Stack>
   );
 };