@mui/material#IconButton JavaScript Examples

SecondarySidebarToggle = () => {
  const { settings, updateSettings } = useSettings();

  const toggle = () => {
    updateSettings({
      secondarySidebar: { open: !settings.secondarySidebar.open },
    });
  };

  const { palette } = useTheme();
  const textColor = palette.primary.contrastText;

  return (
    <Toggle className={clsx({ open: settings.secondarySidebar.open })}>
      {settings.secondarySidebar.open && (
        <IconButton onClick={toggle} size="small" aria-label="toggle">
          <Icon sx={{ color: textColor }}>close</Icon>
        </IconButton>
      )}

      {!settings.secondarySidebar.open && (
        <Fab color="primary" aria-label="expand" onClick={toggle}>
          <Icon sx={{ color: textColor }}>settings</Icon>
        </Fab>
      )}
    </Toggle>
  );
}

render() {
    const { classes, t } = this.props;
    const { snackbar, permittedUsers } = this.state;
    return (
      <FormControl className={classes.form}>
        <Grid container alignItems="center"  className={classes.headline}>
          <Typography variant="h6">{t('Permitted Users')}</Typography>
          <IconButton onClick={this.handleAddDialog(true)} size="large">
            <AddCircleOutline color="primary" fontSize="small"/>
          </IconButton>
        </Grid>
        <List>
          {(permittedUsers || []).map((user, key) => <Fragment key={key}>
            <ListItem className={classes.listItem}>
              <ListItemText primary={user.displayName} />
              <IconButton onClick={this.handleRemoveUser(user.ID, key)} size="large">
                <Delete color="error" />
              </IconButton>
            </ListItem>
            <Divider />
          </Fragment>)}
        </List>
        <Feedback
          snackbar={snackbar}
          onClose={() => this.setState({ snackbar: '' })}
        />
      </FormControl>
    );
  }

// ----------------------------------------------------------------------

export default function UserMoreMenu() {
  const ref = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <IconButton ref={ref} onClick={() => setIsOpen(true)}>
        <Iconify icon="eva:more-vertical-fill" width={20} height={20} />
      </IconButton>

      <Menu
        open={isOpen}
        anchorEl={ref.current}
        onClose={() => setIsOpen(false)}
        PaperProps={{
          sx: { width: 200, maxWidth: '100%' },
        }}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        <MenuItem sx={{ color: 'text.secondary' }}>
          <ListItemIcon>
            <Iconify icon="eva:trash-2-outline" width={24} height={24} />
          </ListItemIcon>
          <ListItemText primary="Delete" primaryTypographyProps={{ variant: 'body2' }} />
        </MenuItem>

        <MenuItem component={RouterLink} to="#" sx={{ color: 'text.secondary' }}>
          <ListItemIcon>
            <Iconify icon="eva:edit-fill" width={24} height={24} />
          </ListItemIcon>
          <ListItemText primary="Edit" primaryTypographyProps={{ variant: 'body2' }} />
        </MenuItem>
      </Menu>
    </>
  );
}

MatxSearchBox = () => {
  const [open, setOpen] = useState(false);
  const toggle = () => {
    setOpen(!open);
  };

  const { palette } = useTheme();
  const textColor = palette.text.primary;

  return (
    <React.Fragment>
      {!open && (
        <IconButton onClick={toggle}>
          <Icon sx={{ color: textColor }}>search</Icon>
        </IconButton>
      )}

      {open && (
        <SearchContainer>
          <SearchInput type="text" placeholder="Search here..." autoFocus />
          <IconButton onClick={toggle} sx={{ mx: 2, verticalAlign: 'middle' }}>
            <Icon sx={{ color: textColor }}>close</Icon>
          </IconButton>
        </SearchContainer>
      )}
    </React.Fragment>
  );
}

export default function DashboardNavbar({ onOpenSidebar }) {
  return (
    <RootStyle>
      <ToolbarStyle>
        <IconButton onClick={onOpenSidebar} sx={{ mr: 1, color: 'text.primary', display: { lg: 'none' } }}>
          <Iconify icon="eva:menu-2-fill" />
        </IconButton>

        <Searchbar />
        <Box sx={{ flexGrow: 1 }} />

        <Stack direction="row" alignItems="center" spacing={{ xs: 0.5, sm: 1.5 }}>
          <AccountPopover />
        </Stack>
      </ToolbarStyle>
    </RootStyle>
  );
}

SecondarySidebarContent = () => {
  const { palette } = useTheme();
  const textColor = palette.primary.contrastText;
  return (
    <SidebarRoot width={'50px'} className="secondary-sidebar">
      <Span sx={{ m: 'auto' }}></Span>
      <MatxCustomizer />
      <ShoppingCart />

      <ChatHead
        icon={
          <IconButton sx={{ my: '12px', color: textColor }} size="small">
            <Icon>comments</Icon>
          </IconButton>
        }
      >
        <Chatbox />
      </ChatHead>
      <Span sx={{ m: 'auto' }}></Span>
    </SidebarRoot>
  );
}

function VisibilityPasswordTextField(props) {
  const { isVisible, onVisibilityChange, ...rest } = props;
  return (
    <TextField
      {...rest}
      type={isVisible ? "text" : "password"}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={() => {
                onVisibilityChange(!isVisible);
              }}
              onMouseDown={(event) => {
                event.preventDefault();
              }}
              size="large">
              {isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
            </IconButton>
          </InputAdornment>
        ),
      }}
    ></TextField>
  );
}

StatCards = () => {
  const cardList = [
    { name: 'New Leads', amount: 3050, icon: 'group' },
    { name: 'This week Sales', amount: '$80,500', icon: 'attach_money' },
    { name: 'Inventory Status', amount: '8.5% Stock Surplus', icon: 'store' },
    { name: 'Orders to deliver', amount: '305 Orders', icon: 'shopping_cart' },
  ];

  return (
    <Grid container spacing={3} sx={{ mb: '24px' }}>
      {cardList.map((item, index) => (
        <Grid item xs={12} md={6} key={index}>
          <StyledCard elevation={6}>
            <ContentBox>
              <Icon className="icon">{item.icon}</Icon>
              <Box ml="12px">
                <Small>{item.name}</Small>
                <Heading>{item.amount}</Heading>
              </Box>
            </ContentBox>

            <Tooltip title="View Details" placement="top">
              <IconButton>
                <Icon>arrow_right_alt</Icon>
              </IconButton>
            </Tooltip>
          </StyledCard>
        </Grid>
      ))}
    </Grid>
  );
}

function ThemeSwitch() {
  const [isDarkMode, setIsDarkMode] = useState(getValueFromLocalStorage('isDarkMode'));

  useEffect(() => {
    setValueToLocalStorage('isDarkMode', isDarkMode);
    document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
  }, [isDarkMode]);

  return (
    <div className="dark-mode-button-wrapper">
      <IconButton className="dark-mode-button" onClick={() => setIsDarkMode((isDark) => !isDark)}>
        {isDarkMode ? (
          <LightModeIcon className="dark-mode-icon" fontSize="large" />
        ) : (
          <DarkModeIcon className="dark-mode-icon" fontSize="large" />
        )}
      </IconButton>
    </div>
  );
}

function SideDrawer(props) {
  const { classes, onClose, open } = props;
  return (
    <Drawer anchor="right" open={open} variant="temporary" onClose={onClose}>
      <Toolbar disableGutters className={classes.toolbar}>
        <Box
          pl={3}
          pr={3}
          display="flex"
          justifyContent="space-between"
          width="100%"
          alignItems="center"
        >
          <Typography variant="h6">A Sidedrawer</Typography>
          <IconButton
            onClick={onClose}
            color="primary"
            aria-label="Close Sidedrawer"
            size="large">
            <CloseIcon />
          </IconButton>
        </Box>
      </Toolbar>
      <Divider />
    </Drawer>
  );
}

function IconButtonBar({ links = {} }) {
  const IconPicker = useCallback((icon) => {
    const props = { className: 'icon' };
    switch (icon) {
      case 'post':
        return <DescriptionIcon {...props} />;
      case 'demo':
        return <PlayIcon {...props} />;
      case 'github':
        return <GitHubIcon {...props} />;
      case 'googlePlay':
        return <AndroidIcon {...props} />;
      case 'appStore':
        return <AppleIcon {...props} />;
      case 'email':
        return <EmailIcon {...props} />;
      case 'linkedIn':
        return <LinkedInIcon {...props} />;
      default:
        return <></>;
    }
  }, []);

  return (
    <>
      {Object.keys(links).map((link, index) => {
        return (
          links[link] && (
            <Tooltip key={index} title={link} arrow className="icon-tooltip">
              <IconButton size="small" href={`${link === 'email' ? `mailto:` : ``}${links[link]}`}>
                {IconPicker(link)}
              </IconButton>
            </Tooltip>
          )
        );
      })}
    </>
  );
}

SimpleTable = () => {
  return (
    <Box width="100%" overflow="auto">
      <StyledTable>
        <TableHead>
          <TableRow>
            <TableCell align="left">Name</TableCell>
            <TableCell align="center">Company</TableCell>
            <TableCell align="center">Start Date</TableCell>
            <TableCell align="center">Status</TableCell>
            <TableCell align="center">Amount</TableCell>
            <TableCell align="right">Action</TableCell>
          </TableRow>
        </TableHead>

        <TableBody>
          {subscribarList.map((subscriber, index) => (
            <TableRow key={index}>
              <TableCell align="left">{subscriber.name}</TableCell>
              <TableCell align="center">{subscriber.company}</TableCell>
              <TableCell align="center">{subscriber.date}</TableCell>
              <TableCell align="center">{subscriber.status}</TableCell>
              <TableCell align="center">${subscriber.amount}</TableCell>
              <TableCell align="right">
                <IconButton>
                  <Icon color="error">close</Icon>
                </IconButton>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </StyledTable>
    </Box>
  );
}

Tab = ({
  active, onClose, onSelect, name, themeColor,
}) => (
  <Box
    role="button"
    tabIndex={0}
    sx={[
      {
        flex: 1,
        maxWidth: 30,
        display: 'flex',
        flexDirection: 'row',
        pl: 2,
        pr: 1,
        borderRight: (theme) => {
          if (themeColor != null) {
            return `1px solid ${themeColors[themeColor][800]}`;
          }
          return `1px solid ${theme.palette.background.paper}`;
        },
        WebkitAppRegion: 'no-drag',
      },
      active && {
        borderRight: 'none',
        bgcolor: (theme) => {
          if (themeColor != null) {
            return themeColors[themeColor][800];
          }
          return theme.palette.background.paper;
        },
      },
    ]}
    onClick={onSelect ? () => onSelect() : undefined}
    onKeyDown={onSelect ? (e) => {
      if (e.key === 'Enter') {
        onSelect();
      }
    } : undefined}
  >
    <Box
      sx={{
        flex: 1,
        display: 'flex',
        alignItems: 'center',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
      }}
    >
      {name || 'Tab'}
    </Box>
    {onClose && (
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          pl: 0.5,
        }}
      >
        <IconButton
          size="small"
          onClick={() => onClose()}
        >
          <CloseIcon fontSize="small" />
        </IconButton>
      </Box>
    )}
  </Box>
)

render() {
    const { classes, t, user, aliases, forward, forwardError, handleForwardInput, handleAliasEdit, handleRemoveAlias,
      handleAddAlias } = this.props;
    return (
      <FormControl className={classes.form}>
        <div className={classes.flexRow}>
          <Typography variant="h6">{t('E-Mail Addresses')}</Typography>
          {user?.ldapID && <Tooltip title={t("Warning") + ": " + t("Changes will be overwritten with next LDAP sync")}>
            <Warning color="warning" fontSize="inherit" style={{ fontSize: 32 }}/>  
          </Tooltip>}
        </div>
        <List className={classes.list}>
          {(aliases || []).map((alias, idx) => <ListItem key={idx} className={classes.listItem}>
            <TextField
              className={classes.listTextfield}
              value={alias}
              label={'Alias ' + (idx + 1)}
              onChange={handleAliasEdit(idx)}
            />
            <IconButton onClick={handleRemoveAlias(idx)} size="large">
              <Delete color="error" />
            </IconButton>
          </ListItem>
          )}
        </List>
        <Grid container justifyContent="center">
          <Button variant="contained" onClick={handleAddAlias}>{t('addHeadline', { item: 'E-Mail' })}</Button>
        </Grid>
        <Typography variant="h6" className={classes.headline}>{t('E-Mail forward')}</Typography>
        <Grid container className={classes.bottom} >
          <TextField
            className={classes.select}
            value={forward.forwardType === undefined ? '' : forward.forwardType}
            label={t('Forward type')}
            onChange={handleForwardInput('forwardType')}
            select
          >
            <MenuItem value={0}>{t('CC')}</MenuItem>
            <MenuItem value={1}>{t('Redirect')}</MenuItem>
          </TextField>
          <TextField
            error={forwardError}
            className={classes.listTextfield}
            value={forward.destination || ''}
            label={t('Destination')}
            onChange={handleForwardInput('destination')}
          />
        </Grid>
      </FormControl>
    );
  }

IconBackButton = (props) => {
    return (
        <IconButton size='large' {...props}>
            <ArrowBackIcon fontSize='large'/>
        </IconButton>
    );
}

KanbanCard = ({ card, handleRemoveCard }) => {
  //   console.log(card);
  return (
    <div className="react-kanban-card">
      <span>
        <div className="react-kanban-card__title">
          <span>{card.title}</span>
        </div>
      </span>
      <div className="react-kanban-card__description">{card.description}</div>
      <div className="d-flex justify-content-between align-items-center">
        <Avatar
          alt="Remy Sharp"
          src="/broken-image.jpg"
          sx={{ width: 24, height: 24 }}
        >
          B
        </Avatar>
        <div>
          <IconButton onClick={() => handleRemoveCard(card)} size="small">
            <Eye strokeWidth={1.5} size={13} />
          </IconButton>
          <IconButton
            onClick={() => handleRemoveCard(card)}
            size="small"
            color="info"
          >
            <Edit2 strokeWidth={1.5} size={13} />
          </IconButton>
          <IconButton
            onClick={() => handleRemoveCard(card)}
            size="small"
            color="error"
          >
            <Trash2 strokeWidth={1.5} size={15} />
          </IconButton>
        </div>
      </div>
    </div>
  );
}

StyledIconButton = styled(IconButton)(({ theme }) => ({
  color: theme.palette.text.primary,
}))

SectionNeverSaved = () => {
  const passwordsNeverSaveDomains = useSelector(
    (state) => state.preferences.passwordsNeverSaveDomains,
  );

  return (
    <List disablePadding dense>
      {passwordsNeverSaveDomains.length < 1 ? (
        <ListItem disabled>
          <ListItemText primary="Empty." />
        </ListItem>
      ) : (
        <ListItem>
          <Table size="small" aria-label="Never Saved">
            <TableBody>
              {passwordsNeverSaveDomains.map((domain) => (
                <TableRow key={domain}>
                  <TableCell component="th" scope="row">
                    {domain}
                  </TableCell>
                  <TableCell align="right">
                    <Tooltip title="Remove">
                      <IconButton
                        aria-label="Remove"
                        size="small"
                        onClick={() => {
                          requestSetPreference(
                            'passwordsNeverSaveDomains',
                            passwordsNeverSaveDomains.filter(((item) => item !== domain)),
                          );
                        }}
                      >
                        <ClearIcon />
                      </IconButton>
                    </Tooltip>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </ListItem>
      )}
    </List>
  );
}

StyledIconButton = styled(IconButton)(({ theme }) => ({
  padding: theme.spacing(0.5),
}))

TabBar = ({ themeColor }) => {
  const activeWorkspaceId = useSelector((state) => state.workspaces.activeWorkspaceId);
  const currentWorkspace = useSelector((state) => state.workspaces.workspaces[activeWorkspaceId]);

  const tabs = useSelector((state) => state.workspaceTabs[activeWorkspaceId]) || {};

  if (!currentWorkspace) return null;

  return (
    <Box
      sx={{
        display: 'flex',
        overflow: 'auto',
        height: 36,
        backgroundColor: (theme) => {
          if (themeColor != null) {
            return themeColors[themeColor][900];
          }
          return theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.grey[200];
        },
        WebkitUserSelect: 'none',
        WebkitAppRegion: 'drag',
      }}
    >
      <Tab
        active={!currentWorkspace.selectedTabId}
        themeColor={themeColor}
        onSelect={() => requestSetWorkspace(activeWorkspaceId, {
          selectedTabId: null,
        })}
      />
      {Object.keys(tabs).map((tabId) => (
        <Tab
          key={tabId}
          name={tabId}
          active={currentWorkspace.selectedTabId === tabId}
          onClose={() => requestRemoveWorkspaceTab(activeWorkspaceId, tabId)}
          onSelect={() => requestSetWorkspace(activeWorkspaceId, {
            selectedTabId: tabId,
          })}
          themeColor={themeColor}
        />
      ))}
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          ml: 1,
          WebkitAppRegion: 'no-drag',
        }}
      >
        <IconButton
          onClick={() => requestAddWorkspaceTab(activeWorkspaceId)}
          sx={{
            p: 6,
            WebkitAppRegion: 'no-drag',
            color: (theme) => {
              if (themeColor != null) {
                return theme.palette.getContrastText(themeColors[themeColor][800]);
              }
              return 'text.primary';
            },
          }}
          size="large"
        >
          <AddIcon sx={{ fontSize: 18 }} />
        </IconButton>
      </Box>
    </Box>
  );
}

PaginationTable = () => {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);

  const handleChangePage = (_, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  return (
    <Box width="100%" overflow="auto">
      <StyledTable>
        <TableHead>
          <TableRow>
            <TableCell align="left">Name</TableCell>
            <TableCell align="center">Company</TableCell>
            <TableCell align="center">Start Date</TableCell>
            <TableCell align="center">Status</TableCell>
            <TableCell align="center">Amount</TableCell>
            <TableCell align="right">Action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {subscribarList
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            .map((subscriber, index) => (
              <TableRow key={index}>
                <TableCell align="left">{subscriber.name}</TableCell>
                <TableCell align="center">{subscriber.company}</TableCell>
                <TableCell align="center">{subscriber.date}</TableCell>
                <TableCell align="center">{subscriber.status}</TableCell>
                <TableCell align="center">${subscriber.amount}</TableCell>
                <TableCell align="right">
                  <IconButton>
                    <Icon color="error">close</Icon>
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
        </TableBody>
      </StyledTable>

      <TablePagination
        sx={{ px: 2 }}
        page={page}
        component="div"
        rowsPerPage={rowsPerPage}
        count={subscribarList.length}
        onPageChange={handleChangePage}
        rowsPerPageOptions={[5, 10, 25]}
        onRowsPerPageChange={handleChangeRowsPerPage}
        nextIconButtonProps={{ "aria-label": "Next Page" }}
        backIconButtonProps={{ "aria-label": "Previous Page" }}
      />
    </Box>
  );
}

render() {
    const { classes, t } = this.props;
    const { name, snackbar, files, deleting } = this.state;
    const writable = this.context.includes(SYSTEM_ADMIN_WRITE);

    return (
      <ViewWrapper
        topbarTitle={t('DB Service')}
        snackbar={snackbar}
        onSnackbarClose={() => this.setState({ snackbar: '' })}
      >
        <Paper className={classes.paper} elevation={1}>
          <Grid container>
            <Typography
              color="primary"
              variant="h5"
            >
              {t('editHeadline', { item: 'Service' })}
            </Typography>
          </Grid>
          <FormControl className={classes.form}>
            <TextField
              label={t("Service")} 
              className={classes.input} 
              value={name || ''}
              autoFocus
              onChange={this.handleInput('name')}
            />
          </FormControl>
          <Typography variant="h6">Files</Typography>
          <List>
            {files.map((file, idx) => <React.Fragment key={idx}>
              <ListItem button onClick={this.handleNavigation(`dbconf/${name}/${file}`)}>
                <ListItemText
                  primary={file}
                />
                {writable && <IconButton onClick={this.handleDelete(file)} size="large">
                  <Delete color="error" />
                </IconButton>}
              </ListItem>
              <Divider />
            </React.Fragment>
            )}
          </List>
          <Button
            color="secondary"
            onClick={this.handleNavigation('dbconf')}
            style={{ marginRight: 8 }}
          >
            {t('Back')}
          </Button>
          <Button
            variant="contained"
            color="primary"
            onClick={this.handleEdit}
            disabled={!writable}
          >
            {t('Save')}
          </Button>
        </Paper>
        <DomainDataDelete
          open={!!deleting}
          delete={this.props.delete}
          onSuccess={this.handleDeleteSuccess}
          onError={this.handleDeleteError}
          onClose={this.handleDeleteClose}
          item={deleting}
          id={deleting}
          domainID={name}
        />
      </ViewWrapper>
    );
  }

StyledIconButton = styled(IconButton)(({ theme }) => ({
  '& span': {
    color: theme.palette.text.primary,
  },
  '& #disable': {
    color: theme.palette.text.disabled,
  },
}))

render() {
    const { classes, t, fetchmail, handleAdd, handleEdit, handleDelete } = this.props;
    return (
      <FormControl className={classes.form}>
        <Grid container alignItems="center"  className={classes.headline}>
          <Typography variant="h6">{t('Fetchmail')}</Typography>
          <IconButton onClick={handleAdd} size="large">
            <AddCircleOutline color="primary" fontSize="small"/>
          </IconButton>
        </Grid>
        <Table size="small">
          <TableHead>
            <TableRow>
              {this.columns.map((column) => (
                <TableCell key={column.value}>
                  {t(column.label)}
                </TableCell>
              ))}
              <TableCell padding="checkbox" />
            </TableRow>
          </TableHead>
          <TableBody>
            {fetchmail.map((entry, idx) => 
              <TableRow key={idx} hover onClick={handleEdit(idx)}>
                <TableCell>
                  {entry.srcUser}
                </TableCell>
                <TableCell>
                  {entry.srcServer}
                </TableCell>
                <TableCell>
                  {entry.srcFolder}
                </TableCell>
                <TableCell align="right">
                  <IconButton onClick={handleDelete(idx)} size="large">
                    <Delete color="error"/>
                  </IconButton>
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </FormControl>
    );
  }

export default function UserListToolbar({ numSelected, filterName, onFilterName }) {
  return (
    <RootStyle
      sx={{
        ...(numSelected > 0 && {
          color: 'primary.main',
          bgcolor: 'primary.lighter',
        }),
      }}
    >
      {numSelected > 0 ? (
        <Typography component="div" variant="subtitle1">
          {numSelected} selected
        </Typography>
      ) : (
        <SearchStyle
          value={filterName}
          onChange={onFilterName}
          placeholder="Search user..."
          startAdornment={
            <InputAdornment position="start">
              <Iconify icon="eva:search-fill" sx={{ color: 'text.disabled', width: 20, height: 20 }} />
            </InputAdornment>
          }
        />
      )}

      {numSelected > 0 ? (
        <Tooltip title="Delete">
          <IconButton>
            <Iconify icon="eva:trash-2-fill" />
          </IconButton>
        </Tooltip>
      ) : (
        <Tooltip title="Filter list">
          <IconButton>
            <Iconify icon="ic:round-filter-list" />
          </IconButton>
        </Tooltip>
      )}
    </RootStyle>
  );
}

Layout = ({drawerMenu, toolbarChildren, toolBarMenu, children}) => {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  const [breadcrumb, setBreadcrumb] = useState([]);

  return (
    <Box sx={{ display: 'flex'}}>
        <CssBaseline />
        <AppBar position="fixed" open={open}>
            <Toolbar>
              <div style={{paddingRight: '20px', display: open?"none":"inline-flex"}}><Logo /></div>
              <IconButton
                color="inherit"
                aria-label="open drawer"
                onClick={handleDrawerOpen}
                edge="start"
                sx={{
                  marginRight: '36px',
                  ...(open && { display: 'none' }),
                }}
              >
                
                <MenuIcon />
              </IconButton>
                {toolbarChildren}
                <div style={{
                    marginLeft: "auto",
                    marginRight: "0px",
                }}>{toolBarMenu}</div>
            </Toolbar>
        </AppBar>
        <Drawer
            variant="permanent"
            open={open}
        >
          <DrawerHeader>
            {open && <div style={{marginLeft:'0px', marginRight:'auto', display:'inline-flex',alignItems: 'center', flexWrap: 'wrap',}}>
                <div style={{display: 'inline-flex', paddingRight: '20px'}}>
                    <Logo />
                </div>
                <h2>FIREACT</h2>
            </div>}
            <IconButton onClick={handleDrawerClose}>
              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </DrawerHeader>
        <Divider />
            {drawerMenu}
        <Divider />
        </Drawer>
        <Box component="main" sx={{ flexGrow: 1, overflow:'hidden'}}>
            <DrawerHeader />
            <Box width={1} style={{position:"fixed", zIndex: '1200'}}>
                <Paper square>
                    <Box p={2}>
                    <Breadcrumb links={breadcrumb} />
                    </Box>
                </Paper>
            </Box>
            <div style={{position: 'relative'}}>
            <Box mt={10} ml={3} mr={3} mb={3}>
              <BreadcrumbContext.Provider value={{setBreadcrumb}}>
                  {children}
              </BreadcrumbContext.Provider>
            </Box>
            </div>
        </Box>
    </Box>
  );
}

function MessagePopperButton(props) {
  const { classes, messages } = props;
  const anchorEl = useRef();
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = useCallback(() => {
    setIsOpen(!isOpen);
  }, [isOpen, setIsOpen]);

  const handleClickAway = useCallback(() => {
    setIsOpen(false);
  }, [setIsOpen]);

  const id = isOpen ? "scroll-playground" : null;
  return (
    <Fragment>
      <IconButton
        onClick={handleClick}
        buttonRef={anchorEl}
        aria-label="Open Messages"
        aria-describedby={id}
        color="primary"
        size="large">
        <MessageIcon />
      </IconButton>
      <Popover
        disableScrollLock
        id={id}
        open={isOpen}
        anchorEl={anchorEl.current}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        classes={{ paper: classes.popoverPaper }}
        onClose={handleClickAway}
      >
        <AppBar position="static" color="inherit" className={classes.noShadow}>
          <Box pt={1} pl={2} pb={1} pr={1}>
            <Typography variant="subtitle1">Messages</Typography>
          </Box>
          <Divider className={classes.divider} />
        </AppBar>
        <List dense className={classes.tabContainer}>
          {messages.length === 0 ? (
            <ListItem>
              <ListItemText>
                You haven&apos;t received any messages yet.
              </ListItemText>
            </ListItem>
          ) : (
            messages.map((element, index) => (
              <MessageListItem
                key={index}
                message={element}
                divider={index !== messages.length - 1}
              />
            ))
          )}
        </List>
      </Popover>
    </Fragment>
  );
}

render() {
    const { classes, t, open, onClose } = this.props;
    const { service, filename, data, loading } = this.state;

    return (
      <Dialog
        onClose={onClose}
        open={open}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>{t('addHeadline', { item: 'File' })}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          <FormControl className={classes.form}>
            <TextField 
              className={classes.input} 
              label={t("Service name")} 
              fullWidth 
              value={service || ''}
              onChange={this.handleInput('service')}
              autoFocus
              required
            />
            <TextField 
              className={classes.input} 
              label={t("File name")} 
              fullWidth 
              value={filename || ''}
              onChange={this.handleInput('filename')}
              required
            />
            <Typography>Data</Typography>
            {data.map((pair, idx) => <Grid container key={idx}>
              <TextField
                label="key"
                value={pair.key}
                onChange={this.handleDataInput('key', idx)}
                className={classes.flexTextfield}
              />
              <TextField
                label="value"
                value={pair.value}
                onChange={this.handleDataInput('value', idx)}
                className={classes.flexTextfield}
              />
              <IconButton onClick={this.handleRemoveRow(idx)} size="large">
                <Delete color="error"/>
              </IconButton>
            </Grid>
            )}
            <Grid container justifyContent="center">
              <IconButton onClick={this.handleAddRow} size="large">
                <Add color="primary"/>
              </IconButton>
            </Grid>
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onClose}
            color="secondary"
          >
            {t('Cancel')}
          </Button>
          <Button
            onClick={this.handleUpload}
            variant="contained"
            color="primary"
            disabled={loading || !service}
          >
            {loading ? <CircularProgress size={24}/> : t('Add')}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

function VertOptions(props) {
  const { items, classes, color } = props;
  const anchorEl = useRef();
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = useCallback(() => {
    setIsOpen(false);
  }, [setIsOpen]);

  const handleOpen = useCallback(() => {
    setIsOpen(true);
  }, [setIsOpen]);

  const id = isOpen ? "scroll-playground" : null;
  return (
    <Fragment>
      <IconButton
        onClick={handleOpen}
        buttonRef={anchorEl}
        style={{ color: color ? color : null }}
        aria-describedby={id}
        aria-label="More Options"
        size="large">
        <MoreVertIcon style={{ color: color ? color : null }} />
      </IconButton>
      <Popover
        id={id}
        open={isOpen}
        anchorEl={anchorEl.current}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center",
        }}
        onClose={handleClose}
        disableScrollLock
      >
        <MenuList dense>
          {items.map((item) => (
            <MenuItem
              key={item.name}
              onClick={() => {
                handleClose();
                item.onClick();
              }}
            >
              <ListItemIcon>{item.icon}</ListItemIcon>
              <ListItemText className={classes.listItemtext}>
                {item.name}
              </ListItemText>
            </MenuItem>
          ))}
        </MenuList>
      </Popover>
    </Fragment>
  );
}