#44 added new header comp

src/components/common/Header.js

@@ -1,39 +1,45 @@
 import React from 'react';
- import { makeStyles } from '@mui/styles';
+import { makeStyles } from '@mui/styles';
 import { Box } from '@mui/system';
-import { Button, Chip, List, ListItemButton, Typography, Popper, IconButton, Switch } from '@mui/material';
-import PLAY from "../../assets/svg/play.svg";
-import DOWN from "../../assets/svg/dropdown.svg";
-import LOGO from "../../assets/svg/logo.svg";
-import INFO from "../../assets/svg/info.svg";
-import vars from "../../assets/styles/variables";
+import { Button, Chip, List, ListItemButton, Typography } from '@mui/material';
+import PSYLOGO from '../../assets/svg/new-logo.svg';
+import vars from '../../assets/styles/variables';
+import { CustomBreadcrumbsWithMenu } from './Breadcrumbs';
 
-const { textWhite, listSelectedTextColor, dropdownBg, dropdownTextColor } = vars;
+const { textWhite, listSelectedTextColor, headerBorderColor } = vars;
 
 const useStyles = makeStyles(() => ({
   root: {
     background: textWhite,
-    height: '3.5rem',
-    padding: '0 0.625rem 0 1.5rem',
+    height: '3.375rem',
+    padding: '0.5rem 0.625rem 0.5rem 0.625rem ',
     display: 'flex',
     alignItems: 'center',
+    border: `1px solid ${headerBorderColor}`,
+    inset: '1rem auto auto 0 !important',
   },
 
   leftSection: {
-    width: '20.625rem',
+    display: 'flex',
+    alignItems: 'center',
+    '& img': {
+      marginRight: '1rem',
+      marginLeft: 0,
+    },
+
     '& .MuiButton-root': {
       padding: 0,
       fontWeight: 600,
       fontSize: '1.25rem',
       lineHeight: '1.5rem',
       color: listSelectedTextColor,
-      '& img': {
-        marginRight: 0,
-        marginLeft: '0.5rem',
-      },
+      // '& img': {
+      //   marginRight: 0,
+      //   marginLeft: 0,
+      // },
 
       '&:hover': {
-        background: 'transparent'
+        background: 'transparent',
       },
     },
   },
@@ -42,66 +48,13 @@ const useStyles = makeStyles(() => ({
     flexGrow: 1,
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
 
   rightSection: {
     width: '20.625rem',
     display: 'flex',
-    justifyContent: 'flex-end'
-  },
-
-  dropDown: {
-    width: '17.5rem',
-    background: dropdownBg,
-    boxShadow: '0 0.25rem 2.5rem rgba(0, 0, 0, 0.1), 0 1rem 7.5rem rgba(60, 60, 67, 0.2)',
-    padding: '0.5rem',
-    borderRadius: '0.75rem',
-    inset: '1rem auto auto 0 !important',
-
-    '&:before': {
-      content: '""',
-      width: 0,
-      height: 0,
-      borderStyle: 'solid',
-      borderWidth: '0 1rem 1rem 1rem',
-      borderColor: `transparent transparent ${dropdownBg} transparent`,
-      position: 'absolute',
-      top: '-1rem',
-      // right: 0,
-      // left: 0,
-      // margin: '0 auto',
-      left: '2rem'
-    },
-  },
-
-  dropDownHeader: {
-    padding: '0.5rem',
-    display: 'flex',
-    flexWrap: 'wrap',
-    marginBottom: '0.5rem',
-
-    '& .MuiBox-root': {
-      width: 'calc(100% - 2.625rem)',
-      paddingLeft: '0.5rem',
-
-      '& strong': {
-        display: 'block',
-        fontWeight: 600,
-        fontSize: '1.25rem',
-        lineHeight: '1.5rem',
-        color: listSelectedTextColor,
-      },
-
-      '& span': {
-        display: 'block',
-        fontWeight: 500,
-        fontSize: '0.8125rem',
-        lineHeight: '1rem',
-        letterSpacing: '-0.005rem',
-        color: dropdownTextColor,
-      },
-    },
+    justifyContent: 'flex-end',
   },
 
   card: {
@@ -114,7 +67,7 @@ const useStyles = makeStyles(() => ({
     padding: '0.5rem 0.75rem',
 
     '&:not(:last-child)': {
-       marginBottom: '0.5rem',
+      marginBottom: '0.5rem',
     },
 
     '& .MuiIconButton-root': {
@@ -129,74 +82,49 @@ const useStyles = makeStyles(() => ({
       color: listSelectedTextColor,
     },
   },
-}))
+}));
+
+const breadcrumbs = [
+  { id: 'home', text: 'Home' },
+  { id: 'breadSubItem1', text: 'breadSubItem1' },
+  { id: 'breadSubItem2', text: 'breadSubItem2' },
+  { id: 'breadSubItem3', text: 'breadSubItem3' },
+  { id: 'breadSubItem4', text: 'breadSubItem4' },
+  { id: 'breadSubItem5', text: 'breadSubItem5' },
+  { id: 'breadSubItem6', text: 'breadSubItem6' },
+  { id: 'breadSubItem7', text: 'breadSubItem7' },
+  { id: 'composition2', text: 'Composition 2' },
+];
 
 const Header = () => {
   const classes = useStyles();
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event) => {
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-
-  const id = open ? 'simple-popper' : undefined;
-
-  const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
   return (
     <Box className={classes.root}>
       <Box className={classes.leftSection}>
-        <Button
-          disableRipple
-          aria-describedby={id}
-          onClick={handleClick}
-        >
-          model12.py
-          <img src={DOWN} alt="down" />
-        </Button>
+        <img src={PSYLOGO} alt="new-logo" aria-describedby="logo" />
 
-        <Popper id={id} open={open} className={classes.dropDown} anchorEl={anchorEl} placement='bottom-start'>
-          <Box className={classes.dropDownHeader}>
-            <img src={LOGO} alt="logo" />
-            <Box>
-              <Typography component="strong">model12.py</Typography>
-              <Typography component="span">PsyNeuLink View</Typography>
-            </Box>
-          </Box>
-
-          <Box className={classes.card}>
-            <Typography>Background dotted grid</Typography>
-            <Switch {...label} defaultChecked />
-          </Box>
-
-          <Box className={classes.card}>
-            <Typography>About Psyneulink</Typography>
-             <IconButton disableRipple><img src={INFO} alt="info" /></IconButton>
-          </Box>
-        </Popper>
-        {/* <Typography>New visualization</Typography> */}
+        <CustomBreadcrumbsWithMenu breadcrumbs={breadcrumbs} />
       </Box>
       <Box className={classes.middleSection}>
-        <List className="customSwitch" component="nav">
+        <List className="headerSwitch" component="nav">
           <ListItemButton disableRipple selected>
-            <Typography>Construct</Typography>
+            <Typography>Build</Typography>
           </ListItemButton>
           <ListItemButton disableRipple disabled>
-            <Typography>Visualize</Typography>
+            <Typography>Test</Typography>
             <Chip label="SOON" />
           </ListItemButton>
         </List>
       </Box>
       <Box className={classes.rightSection}>
         <Button disabled disableElevation variant="contained">
-          <img src={PLAY} alt="Run-selection" />
-          Run selection
-          <Chip label="SOON" color='primary' />
+          Share
+          <Chip label="SOON" color="primary" />
         </Button>
       </Box>
     </Box>
   );
 };
 
-export default Header;
+export default Header;

src/components/common/Layout.js

@@ -9,7 +9,7 @@ const Layout = ({ children }) => {
       <Header />
       <Main />
     </Box>
-  )
+  );
 };
 
-export default Layout;
+export default Layout;