front/core/DefaultEntityPageNavbar: stole styling from alunds PR

2020-02-07 09:27:04 +01:00
parent 87bdd8279b
commit 58ad9cd322
2 changed files with 97 additions and 11 deletions
@@ -1,21 +1,35 @@
 import React, { FC } from 'react';
 import { EntityPageNavbarProps } from '../../api/entityView/types';
-import { useEntityUri, EntityLink } from '../..';
-import { List, ListItem } from '@material-ui/core';
+import { useEntityUri } from '../..';
+import { List, makeStyles, Theme } from '@material-ui/core';
+import NavbarItem from './NavbarItem';
+
+const useStyles = makeStyles<Theme>({
+  nav: {
+    gridArea: 'pageNav',
+    width: 220,
+    transition: 'width 0.07s, height 0s',
+    transitionTimingFunction: 'ease-in',
+    backgroundColor: '#eeeeee',
+    boxShadow: '0px 0 4px 0px rgba(0,0,0,0.35)',
+  },
+  list: {
+    padding: 0,
+  },
+});

 const DefaultEntityPageNavbar: FC<EntityPageNavbarProps> = ({ navItems }) => {
+  const classes = useStyles();
  const entityUri = useEntityUri();

  return (
-    <List>
-      {navItems.map(({ title, target }) => (
-        <ListItem key={target}>
-          <EntityLink uri={entityUri} subPath={target}>
-            {title}
-          </EntityLink>
-        </ListItem>
-      ))}
-    </List>
+    <nav className={classes.nav}>
+      <List className={classes.list}>
+        {navItems.map((navItem, index) => (
+          <NavbarItem key={index} navItem={navItem} entityUri={entityUri} />
+        ))}
+      </List>
+    </nav>
  );
 };

@@ -0,0 +1,72 @@
+import React, { FC } from 'react';
+import { EntityLink } from '../..';
+import {
+  ListItem,
+  makeStyles,
+  Theme,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+} from '@material-ui/core';
+import { EntityPageNavItem } from '../../api/entityView/types';
+
+const useStyles = makeStyles<Theme>(theme => ({
+  root: {
+    display: 'block',
+    overflow: 'hidden',
+    borderBottom: `1px solid #d9d9d9`,
+    paddingLeft: theme.spacing(1),
+  },
+  label: {
+    color: '#333',
+    fontWeight: 'bolder',
+    whiteSpace: 'nowrap',
+    lineHeight: 1.0,
+  },
+  iconImg: {
+    width: 24,
+    height: 24,
+  },
+  icon: {
+    margin: theme.spacing(0.5, 2, 0.5, 0),
+    minWidth: 0,
+    fontSize: 24,
+  },
+  expand: {
+    color: 'white',
+  },
+}));
+
+type Props = {
+  navItem: EntityPageNavItem;
+  entityUri: string;
+};
+
+const NavbarItem: FC<Props> = ({ navItem, entityUri }) => {
+  const classes = useStyles();
+  const IconComponent = navItem.icon;
+
+  return (
+    <EntityLink
+      className={classes.root}
+      uri={entityUri}
+      subPath={navItem.target}
+    >
+      <ListItem button className={`${classes.listItemGutters}`}>
+        <ListItemIcon className={classes.icon}>
+          <IconComponent fontSize="inherit" />
+        </ListItemIcon>
+        <ListItemText
+          primary={
+            <Typography variant="subtitle1" className={classes.label}>
+              {navItem.title}
+            </Typography>
+          }
+          disableTypography
+        />
+      </ListItem>
+    </EntityLink>
+  );
+};
+
+export default NavbarItem;