semantic-ui-react#Menu JavaScript Examples

render() {
    const { elementId, label, activeItem, setActiveLink, offset } = this.props;
    return (
      <Menu.Item
        name={elementId}
        active={activeItem === elementId}
        activeClass="active"
        as={ScrollLink}
        to={elementId}
        spy
        onSetActive={() => setActiveLink(elementId)}
        offset={offset}
      >
        {label}
      </Menu.Item>
    );
  }

render() {
    return (
      <Router>
        <Grid padded>
          <Grid.Column>
            <Route path="/" exact component={ScreenSharing}/>
            {this.state.isTeacher ? (
              <div>
                <Menu secondary>
                  <Menu.Item as={NavLink} to="/" name="ShareScreen" />
                  <Menu.Item as={NavLink} to="/AllScreenView" name="AllScreenView" />
                  <Menu.Item as={NavLink} to="/ClassRoom" name="ManageClassRoom" />
                </Menu>
                <Route path="/AllScreenView" exact component={AllScreenView}/>
                <Route path="/ClassRoom" exact component={ClassRoom}/>
              </div>
            ):""}
          </Grid.Column>
        </Grid>
      </Router>
    );
  }

Navbar = ({ pageId, data }) => {
  return (
    <Container>
      <Menu borderless className='navbar ui container new'>
        {NavMap[pageId].map(hash => (
          <Menu.Item>
            <span
              className='nav-text'
              onClick={() => {
                document.querySelector(`#${hash}`).scrollIntoView({
                  behavior: 'smooth'
                });
              }}
            >
              {hash}
            </span>
          </Menu.Item>
        ))}
      </Menu>
    </Container>
  );
}

function Desktop() {
  return (
    <Responsive minWidth={Responsive.onlyTablet.minWidth}>
      <Nav>
        <Menu.Menu position="right">
          {items.map((item, idx) => (
            <Menu.Item key={idx} {...item} />
          ))}
        </Menu.Menu>
      </Nav>
    </Responsive>
  );
}

function Mobile() {
  return (
    <Responsive {...Responsive.onlyMobile}>
      <Nav>
        <Menu.Menu position="right">
          <Dropdown item icon={null} trigger={<Icon name="bars" />}>
            <Dropdown.Menu items={items}>
              {items.map((item, idx) => (
                <Dropdown.Item key={idx} {...item} />
              ))}
            </Dropdown.Menu>
          </Dropdown>
        </Menu.Menu>
      </Nav>
    </Responsive>
  );
}

function Nav({ children }) {
  return (
    <NavBar secondary inverted fluid>
      <Menu.Item header fitted>
        {logo}
      </Menu.Item>
      {children}
    </NavBar>
  );
}

MenuItem = styled(Menu.Item).attrs(() => ({
  as: "a",
  className: "item"
}))`
  color: rgba(255, 255, 255, 0.7) !important;
  :hover {
    color: rgb(248, 248, 243) !important;
  }

  &&& {
    padding: 0 0.57142857em;
  }
`

Group = styled(Menu).attrs(() => ({
  borderless: true
}))`
  position: absolute;
  top: 14px;
  right: 14px;
  &&& {
    background: transparent;
  }
`

LicenseFilter = ({
  updateQueryFilters,
  userSelectionFilters,
  filterValue,
  label,
  title,
}) => {
  const _isChecked = (userSelectionFilters) => {
    const isFilterActive =
      userSelectionFilters.filter((filter) => filter[1] === filterValue[1])
        .length > 0;
    return isFilterActive;
  };

  const onToggleClicked = () => {
    updateQueryFilters(userSelectionFilters.concat([filterValue]));
  };

  const isChecked = _isChecked(userSelectionFilters);
  return isChecked ? (
    <Menu.Item
      name={label}
      active
      as={Button}
      primary
      onClick={onToggleClicked}
    >
      {title}
    </Menu.Item>
  ) : (
    <Menu.Item name={label} onClick={onToggleClicked}>
      {title}
    </Menu.Item>
  );
}

render() {
    const { children, offset } = this.props;
    const { activeItem } = this.state;
    const childrenWithProps = React.Children.map(children, (child) =>
      React.cloneElement(child, {
        setActiveLink: this.setActiveLink,
        activeItem: activeItem,
        offset: offset,
      })
    );

    return (
      <Menu pointing secondary vertical fluid className="left">
        {childrenWithProps}
      </Menu>
    );
  }

render() {
    return (
      <Overridable id="AdminMenu.layout">
        <>
          <Divider horizontal>Admin menu</Divider>
          <Menu text vertical className="bo-menu bo-menu-footer">
            <Menu.Item>
              <Menu.Menu>
                <Menu.Item
                  as="a"
                  href={`${invenioConfig.APP.INVENIO_UI_URL}/admin`}
                  target="_blank"
                >
                  Admin panel
                </Menu.Item>
                <Menu.Item
                  as="a"
                  href={`${invenioConfig.APP.INVENIO_UI_URL}/admin/page`}
                  target="_blank"
                >
                  Static pages
                </Menu.Item>
              </Menu.Menu>
            </Menu.Item>
          </Menu>
        </>
      </Overridable>
    );
  }

export default function Navbar() {
  const context = useContext(Context);
  const { user } = context;

  const path = "home";
  const [activeItem, setActiveItem] = useState(path);

  const handleItemClick = (e, { name }) => setActiveItem(name);

  const userInfo = user ? (
    <Menu.Menu position="right">
      <Menu.Item
        name="logout"
        active={activeItem === "logout"}
        onClick={handleItemClick}
        as={Link}
        to="/"
      />
    </Menu.Menu>
  ) : (
    <Menu.Menu position="right">
      <Menu.Item
        name="login"
        active={activeItem === "login"}
        onClick={handleItemClick}
        as={Link}
        to="/login"
      />
      <Menu.Item
        name="sign in"
        active={activeItem === "sign in"}
        onClick={handleItemClick}
        userState
        as={Link}
        to="/signin"
      />
    </Menu.Menu>
  );
  const menuBar = (
    <Menu pointing secondary size="massive" color="teal">
      <Menu.Item
        name="home"
        active={activeItem === "home"}
        onClick={handleItemClick}
        as={Link}
        to="/"
      />
      <Menu.Item
        name="categories"
        active={activeItem === "categories"}
        onClick={handleItemClick}
        as={Link}
        to="/categories"
      />
      <Menu.Item
        name="products"
        active={activeItem === "products"}
        onClick={handleItemClick}
        as={Link}
        to="/products"
      />
      {userInfo}
    </Menu>
  );
  return menuBar;
}

function MenuBar() {
  const { user, logout } = useContext(AuthContext);
  const pathname = window.location.pathname;

  const path = pathname === '/' ? 'home' : pathname.substr(1);
  const [activeItem, setActiveItem] = useState(path);

  const handleItemClick = (e, { name }) => setActiveItem(name);

  const menuBar = user ? (
    <Menu pointing secondary size="massive" color="red">
      <Menu.Item name={user.username} active as={Link} to="/" />

      <Menu.Menu position="right">
        <Menu.Item name="logout" onClick={logout} />
      </Menu.Menu>
    </Menu>
  ) : (
    <Menu pointing secondary size="massive" color="red">
      <Menu.Item
        name="home"
        active={activeItem === 'home'}
        onClick={handleItemClick}
        as={Link}
        to="/"
      />

      <Menu.Menu position="right">
        <Menu.Item
          name="login"
          active={activeItem === 'login'}
          onClick={handleItemClick}
          as={Link}
          to="/login"
        />
        <Menu.Item
          name="register"
          active={activeItem === 'register'}
          onClick={handleItemClick}
          as={Link}
          to="/register"
        />
      </Menu.Menu>
    </Menu>
  );

  return menuBar;
}

NavBar = styled(Menu)`
  &&& {
    height: 64px;
    margin: 0;

    border-bottom: 1px solid rgba(63, 157, 216, 0.25);

    .item.header {
      font-weight: bold;
      font-size: 1.4em;
    }

    .item,
    .item > a,
    .item > a:not(.ui) {
      color: white;
      font-weight: bold;
    }

    .item > a:hover {
      color: #ffc43c;
    }

    .item:last-child {
      padding-right: 0 !important;
      margin-right: 0 !important;
    }

    .ui.image {
      width: 100px;
    }

    span {
      color: #ffc43c;
    }

    .dropdown.item .menu {
      background: #005a8e;
      box-shadow: none;
    }
  }
`

function Header() {
  const [{ basket, user }] = useStateValue();

  const login = () => {
    if (user) {
      auth.signOut();
    }
  };

  return (
    <div className="header">
      <Menu stackable>
        <Menu.Menu position="left">
          <Menu.Item>
            <Link to="/" className="header__leftItem">
              <img
                className="header__logo"
                src="https://img.icons8.com/ios/100/000000/online-shop-favorite.png"
                alt="secondhand store logo"
              />
              <p className="header__companyName">Second-hand Store</p>
            </Link>
          </Menu.Item>
        </Menu.Menu>
        <Menu.Menu position="right">
          <Link to="/uploadImage">
            <Menu.Item>
              <Icon name="upload" /> Add product
            </Menu.Item>
          </Link>
          <Link to="/checkout">
            <Menu.Item>
              <Icon name="shop" /> {basket?.length}
            </Menu.Item>
          </Link>
          <Link to="/login">
            <Menu.Item>
              {user ? (
                <div onClick={login}>
                  <Icon name="sign-out" />
                  Logout
                </div>
              ) : (
                <>
                  <Icon name="sign-in" />
                  Sign in
                </>
              )}
            </Menu.Item>
          </Link>
        </Menu.Menu>
      </Menu>
    </div>
  );
}

render() {
        return (
            <Segment inverted color='blue'>
                <Menu inverted secondary color='blue'>
                    <Menu.Item
                        icon='home'
                        name='home'
                        as={NavLink} exact to='/dashboard'
                    />
                    <Menu.Item
                        name='Book An MRI'
                        as={NavLink} to='/dashboard/booking'
                    />
                    <Menu.Item
                        name='Rules'
                        as={NavLink} to='/dashboard/rules'
                    />
                    <Menu.Item
                        name='Results'
                        as={NavLink} to='/dashboard/results'
                    />
                    <Menu.Item
                        name='Spellchecker'
                        as={NavLink} to='/dashboard/spellcheck'
                    />
                    <Menu.Item
                        name='Word Weights'
                        as={NavLink} to='/dashboard/weights'
                    />
                    <Menu.Item
                        name='Conjunctions'
                        as={NavLink} to='/dashboard/conjunctions'
                    />
                    <Menu.Item
                        name='Synonyms'
                        as={NavLink} to='/dashboard/synonyms'
                    />
                    <Menu.Item
                        name="Specialty Exams"
                        as={NavLink} to='/dashboard/specialtyexams'
                    />
                    <Menu.Menu position='right'>
                        {/*<Menu.Item>*/}
                        {/*    <Input icon='search' placeholder='Search...' />*/}
                        {/*</Menu.Item>*/}
                        <Menu.Item
                            name='logout'
                            onClick={this.handleLogout}
                        />
                    </Menu.Menu>
                </Menu>
            </Segment>
        )
    }

App = ({ isOfficeInitialized }) => {
  const [activeNav, setActiveNav] = useState('library');
  const [openOnStartup, setOpenOnStartup] = useState(false);

  useEffect(() => {
    if (isOfficeInitialized) {
      const autoOpenSetting = Office.context.document.settings.get('Office.AutoShowTaskpaneWithDocument');
      setOpenOnStartup(autoOpenSetting);
    }
  }, [isOfficeInitialized]);

  /**
   * Sets the active nav item in the navbar.
   *
   * @param {MouseEvent} event    Mouse click event
   * @param {object}     obj      An object
   * @param {string}     obj.name Name of the event
   */
  const handleClick = (event, { name }) => {
    setActiveNav(name);
  };

  /**
   * Sets whether add-in should load by default on MS Word startup.
   *
   * @param {MouseEvent} event Mouseclick to see if checkbox is clicked
   */
  const handleStartupState = event => {
    Office.context.document.settings.set('Office.AutoShowTaskpaneWithDocument', event.target.checked);
    setOpenOnStartup(event.target.checked);
    Office.context.document.settings.saveAsync();
  };

  const navItems = [
    { name: 'document', content: 'Document', component: <p>Document component goes here.</p> },
    { name: 'library', content: 'Library', component: <TemplateLibrary /> },
  ];

  if (!isOfficeInitialized) {
    return (
      <p>Please sideload the extension.</p>
    );
  }

  return (
    <React.Fragment>
      <SemanticToastContainer position="top-center" />
      <Menu widths={navItems.length}>
        {navItems.map((item, index) => (
          <Menu.Item
            active={activeNav === item.name}
            key={index}
            name={item.name}
            onClick={handleClick}
            content={item.content}
          />
        ))}
      </Menu>
      <div className="menu-body">
        {navItems.map(item => (
          item.name === activeNav && item.component
        ))}
      </div>
      <footer className="startup-container">
        <label className="checkbox">
          <span>Auto open on startup:</span>
          <input type="checkbox" checked={openOnStartup} onChange={handleStartupState}></input>
        </label>
      </footer>
    </React.Fragment>
  );
}

render() {
    const { activeItem, redirect, activeItemPath } = this.state;

    if (redirect) {
      this.setState({ redirect: false });
      return <Redirect to={activeItemPath} />;
    }

    return (
      <Menu size="massive" stackable inverted>
        <Menu.Item href="https://adasteam.ca/" target="_blank">
          <img src={AdaBotHead} alt="Ada's Bot Head" />
        </Menu.Item>

        <Menu.Item
          name="home"
          active={activeItem === "home"}
          onClick={this.handleItemClick}
        >
          Home
        </Menu.Item>

        <Menu.Item
          name="candidates"
          active={activeItem === "candidates"}
          onClick={this.handleItemClick}
        >
          Candidates
        </Menu.Item>

        <Menu.Item
          name="results"
          active={activeItem === "results"}
          onClick={this.handleItemClick}
        >
          Results
        </Menu.Item>
        <Menu.Item
          position="right"
          href="https://github.com/adas-team/ElectionsApp"
          target="_blank"
        >
          {/* <img src={AdaBotHead} alt="Ada's Bot Head" /> */}
          <Icon name="github" size="large" />
        </Menu.Item>
      </Menu>
    );
  }

LinkContainer = () => (
  <>
    <Menu.Item>
      <Banner>react-fluid-table</Banner>
    </Menu.Item>
    <Menu.Item as={Link} to="/">
      Basic Table
    </Menu.Item>
    <Menu.Item as={Link} to="/sort">
      Sortable Table
    </Menu.Item>
    <Menu.Item as={Link} to="/sub">
      Table w/Subcomponent
    </Menu.Item>
    <Menu.Item as={Link} to="/custom">
      Cell Content
    </Menu.Item>
    <Menu.Item as={Link} to="/variable">
      Variable Row Size
    </Menu.Item>
    <Menu.Item as={Link} to="/expanded">
      Expanded Row Height
    </Menu.Item>
    <Menu.Item as={Link} to="/controlled">
      Controlled Props
    </Menu.Item>
    <Menu.Item as={Link} to="/header">
      Custom Styling
    </Menu.Item>
    <Menu.Item as={Link} to="/scroll">
      Methods
    </Menu.Item>
    <Menu.Item as={Link} to="/props">
      Table Props
    </Menu.Item>
    <Menu.Item as="a" href="https://github.com/mckervinc/react-fluid-table">
      <GitHub />
      GitHub
    </Menu.Item>
  </>
)

MobileMenu = styled(Menu)`
  &&& {
    width: 100%;
  }
`

TableExamplePagination = () => (
  <Table celled>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Label ribbon>First</Label>
        </Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>

    <Table.Footer>
      <Table.Row>
        <Table.HeaderCell colSpan="3">
          <Menu floated="right" pagination>
            <Menu.Item as="a" icon>
              <Icon name="chevron left" />
            </Menu.Item>
            <Menu.Item as="a">1</Menu.Item>
            <Menu.Item as="a">2</Menu.Item>
            <Menu.Item as="a">3</Menu.Item>
            <Menu.Item as="a">4</Menu.Item>
            <Menu.Item as="a" icon>
              <Icon name="chevron right" />
            </Menu.Item>
          </Menu>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Footer>
  </Table>
)

SlashMenu = ({
  currentBlock,
  onMutateBlock,
  selected,
  availableBlocks,
}) => {
  const intl = useIntl();

  return (
    <div className="power-user-menu">
      <Menu vertical fluid borderless>
        {availableBlocks.map((block, index) => (
          <Menu.Item
            key={block.id}
            className={block.id}
            active={index === selected}
            onClick={(e) => {
              // onInsertBlock(currentBlock, { '@type': block.id });
              onMutateBlock(currentBlock, { '@type': block.id });
              e.stopPropagation();
            }}
          >
            <Icon name={block.icon} size="24px" />
            {intl.formatMessage({
              id: block.title,
              defaultMessage: block.title,
            })}
          </Menu.Item>
        ))}
        {availableBlocks.length === 0 && (
          <Menu.Item>
            <FormattedMessage
              id="No matching blocks"
              defaultMessage="No matching blocks"
            />
          </Menu.Item>
        )}
      </Menu>
    </div>
  );
}

render() {
    const { onExportClick, max } = this.props;
    const { currentFormat } = this.state;
    return (
      <Popup
        trigger={
          <Button primary icon size="small" labelPosition="left">
            <Icon name="download" />
            Export results to a file
          </Button>
        }
        flowing
        on="click"
        position="top right"
      >
        <div>
          <span>
            Format{' '}
            <Menu compact>
              <Dropdown
                simple
                item
                options={this.formatOptions}
                defaultValue={this.formatOptions[0].value}
                onChange={(e, { value }) => {
                  this.setState({
                    currentFormat: value,
                  });
                }}
              />
            </Menu>
          </span>
        </div>
        <br />
        <div>
          <span>Export is limited to the first {max} results.</span>
        </div>
        <br />
        <div style={{ textAlign: 'center' }}>
          <Button
            icon="download"
            primary
            content="Download"
            onClick={() => {
              onExportClick(currentFormat, max);
            }}
          />
        </div>
      </Popup>
    );
  }

export default function AccountSelector (props) {
  const { api, keyring } = useSubstrate();
  const { setAccountAddress } = props;
  const [accountSelected, setAccountSelected] = useState('');

  // Get the list of accounts we possess the private key for
  const keyringOptions = keyring.getPairs().map(account => ({
    key: account.address,
    value: account.address,
    text: account.meta.name.toUpperCase(),
    icon: 'user'
  }));

  const initialAddress =
    keyringOptions.length > 0 ? keyringOptions[0].value : '';

  // Set the initial address
  useEffect(() => {
    setAccountSelected(initialAddress);
    setAccountAddress(initialAddress);
  }, [setAccountAddress, initialAddress]);

  const onChange = address => {
    // Update state with new account address
    setAccountAddress(address);
    setAccountSelected(address);
  };

  return (
    <Menu
      attached='top'
      tabular
      style={{
        backgroundColor: '#fff',
        borderColor: '#fff',
        paddingTop: '1em',
        paddingBottom: '1em'
      }}
    >
      <Container>
        <Menu.Menu>
          <Image src='Substrate-Logo.png' size='mini' />
        </Menu.Menu>
        <Menu.Menu position='right'>
          <Icon
            name='users'
            size='large'
            circular
            color={accountSelected ? 'green' : 'red'}
          />
          <Dropdown
            search
            selection
            clearable
            placeholder='Select an account'
            options={keyringOptions}
            onChange={(_, dropdown) => { onChange(dropdown.value); }}
            value={accountSelected}
          />
          {api.query.balances && api.query.balances.freeBalance
            ? <BalanceAnnotation accountSelected={accountSelected} />
            : null}
        </Menu.Menu>
      </Container>
    </Menu>
  );
}

Header = () => {
  const { user, signOut, isReady } = useContext(UserContext);

  return (
    <Menu fixed="top" inverted borderless size="huge" className="scroll">
      <Container>
        <Menu.Item header key="menu-0">
          <Link href="/">
            <a>
              <Icon name="world" /> {process.env.NEXT_PUBLIC_SITE_NAME}
            </a>
          </Link>
        </Menu.Item>

        <Menu.Item key="menu-1a">
          <Link href="/blog">
            <a>Blog</a>
          </Link>
        </Menu.Item>

        <Menu.Item key="menu-1b">
          <Link href="/playground">
            <a>Playground</a>
          </Link>
        </Menu.Item>

        <Menu.Item key="menu-1d">
          <Link href="/about">
            <a>About Us</a>
          </Link>
        </Menu.Item>

        {isReady &&
          user && [
            <Menu.Item key="menu-2">
              <Link href="/dashboard">
                <a>Dashboard</a>
              </Link>
            </Menu.Item>,
            <Menu.Item position="right" key="menu-3">
              <Icon disabled name="user" />
              {user}
              <button
                type="button"
                className="link-button"
                style={{ paddingLeft: "10px", color: "#fff" }}
                onClick={signOut}
              >
                <Icon disabled name="sign out" />
              </button>
            </Menu.Item>,
          ]}
        {isReady && !user && (
          <Menu.Item position="right" key="menu-3">
            <Icon disabled name="user" />
            <Link href="/signin">
              <a>Login</a>
            </Link>
          </Menu.Item>
        )}
      </Container>
    </Menu>
  );
}

render() {
    const { stickyRef, modelName } = this.props;
    const searchConfig = getSearchConfig(modelName);
    return (
      <Container fluid className="mobile-search-controls">
        <Sticky context={stickyRef} offset={66}>
          <Container fluid className="fs-search-controls-mobile">
            <Menu fluid borderless>
              <SearchAggregationsMenu modelName={modelName} />
              {searchConfig.SORT_BY.length > 0 ? (
                <Sort values={searchConfig.SORT_BY} overridableId="mobile" />
              ) : null}
            </Menu>
            <Container>
              <Grid columns={2}>
                <Grid.Column width={8} className="vertical-align-content">
                  <div>
                    <Count
                      label={(cmp) => (
                        <div className="mobile-count">{cmp} results found</div>
                      )}
                    />
                  </div>
                </Grid.Column>
                <Grid.Column
                  width={8}
                  className="vertical-align-content"
                  textAlign="right"
                >
                  <div>
                    <SearchResultsPerPage
                      modelName={modelName}
                      label={(cmp) => (
                        <div className="mobile-results-page">
                          {cmp} results per page
                        </div>
                      )}
                    />
                  </div>
                </Grid.Column>
              </Grid>
            </Container>
          </Container>
        </Sticky>
      </Container>
    );
  }

render() {
    const { location, user } = this.props;
    const isAdmin = authenticationService.hasRoles(user, ['admin']);
    const activePath = this.removeTrailingSlashes(location.pathname);
    const overviewActive = activePath === BackOfficeRoutes.home;
    const borrowingRequestsActive = activePath.includes(
      ILLRoutes.borrowingRequestList
    );
    const itemsActive = activePath.includes(BackOfficeRoutes.itemsList);
    const eitemsActive = activePath.includes(BackOfficeRoutes.eitemsList);
    const loansActive = activePath.includes(BackOfficeRoutes.loansList);
    const locationsActive = activePath.includes(BackOfficeRoutes.locationsList);
    const documentsActive = activePath.includes(BackOfficeRoutes.documentsList);
    const documentRequestsActive = activePath.includes(
      BackOfficeRoutes.documentRequestsList
    );
    const ordersActive = activePath.includes(AcquisitionRoutes.ordersList);
    const providersActive = activePath.includes(ProviderRoutes.providersList);
    const patronsActive = activePath.includes(BackOfficeRoutes.patronsList);
    const seriesActive = activePath.includes(BackOfficeRoutes.seriesList);
    const statsActive = activePath.includes(BackOfficeRoutes.stats.home);
    const checkInActive = activePath.includes(BackOfficeRoutes.checkIn);
    const checkOutActive = activePath.includes(BackOfficeRoutes.checkOut);

    return (
      <Overridable id="Sidebar.layout">
        <>
          <Container textAlign="center">
            <EnvironmentLabel pointing="below" classContext="backoffice" />
          </Container>
          <Header as="h3" className="bo-menu-header">
            <Icon name="user circle" color="grey" />
            <Header.Content>
              {user.fullName}
              <Header.Subheader>
                {isAdmin ? 'Admin' : 'Librarian'}
              </Header.Subheader>
            </Header.Content>
          </Header>
          <Overridable id="Sidebar.Menu">
            <>
              <Menu text vertical className="bo-menu bo-menu-subheader">
                <Menu.Item>
                  <Menu.Menu>
                    <Menu.Item onClick={this.logout}>Sign out</Menu.Item>
                    <Menu.Item as={Link} to={FrontSiteRoutes.home}>
                      Go to Frontsite
                    </Menu.Item>
                  </Menu.Menu>
                </Menu.Item>
              </Menu>
              <Divider />
              <Menu text vertical className="bo-menu">
                <Menu.Item>
                  <Menu.Header>Actions</Menu.Header>
                  <Menu.Menu>
                    <Menu.Item
                      as={Link}
                      active={checkInActive}
                      to={BackOfficeRoutes.checkIn}
                    >
                      Check-in
                      <div className="menu-item-description">Return copies</div>
                    </Menu.Item>
                    <Menu.Item
                      as={Link}
                      active={checkOutActive}
                      to={BackOfficeRoutes.checkOut}
                    >
                      Check-out
                      <div className="menu-item-description">Create loan</div>
                    </Menu.Item>
                  </Menu.Menu>
                </Menu.Item>
                <Menu.Item>
                  <Menu.Header>Library</Menu.Header>
                  <Menu.Menu>
                    <Menu.Item
                      as={Link}
                      active={overviewActive}
                      to={BackOfficeRoutes.home}
                    >
                      Overview
                    </Menu.Item>
                    <Menu.Item
                      as={Link}
                      active={loansActive}
                      to={BackOfficeRoutes.loansList}
                    >
                      Loans
                    </Menu.Item>
                    <Menu.Item
                      as={Link}
                      active={documentRequestsActive}
                      to={BackOfficeRoutes.documentRequestsList}
                    >
                      Requests for new literature
                    </Menu.Item>
                    <Menu.Item
                      as={Link}
                      active={locationsActive}
                      to={BackOfficeRoutes.locationsList}
                    >
                      Locations
                    </Menu.Item>
                  </Menu.Menu>
                </Menu.Item>

                <Menu.Item>
                  <Menu.Header>Catalogue</Menu.Header>
                  <Menu.Menu>
                    <Menu.Item
                      as={Link}
                      active={documentsActive}
                      to={BackOfficeRoutes.documentsList}
                    >
                      Books / Articles
                    </Menu.Item>
                    <Menu.Item
                      as={Link}
                      active={seriesActive}
                      to={BackOfficeRoutes.seriesList}
                    >
                      Series / Monographs
                    </Menu.Item>
                    <Menu.Item
                      as={Link}
                      active={itemsActive}
                      to={BackOfficeRoutes.itemsList}
                    >
                      Physical Copies
                    </Menu.Item>
                    <Menu.Item
                      as={Link}
                      active={eitemsActive}
                      to={BackOfficeRoutes.eitemsList}
                    >
                      E-Items
                    </Menu.Item>
                  </Menu.Menu>
                </Menu.Item>

                <Menu.Item>
                  <Menu.Header>Acquisition</Menu.Header>
                  <Menu.Menu>
                    <Menu.Item
                      as={Link}
                      active={ordersActive}
                      to={AcquisitionRoutes.ordersList}
                    >
                      Purchase Orders
                    </Menu.Item>
                  </Menu.Menu>
                </Menu.Item>

                <Menu.Item>
                  <Menu.Header>InterLibrary Loans</Menu.Header>
                  <Menu.Menu>
                    <Menu.Item
                      as={Link}
                      active={borrowingRequestsActive}
                      to={ILLRoutes.borrowingRequestList}
                    >
                      Borrowing Requests
                    </Menu.Item>
                  </Menu.Menu>
                </Menu.Item>

                <Menu.Item>
                  <Menu.Header>Providers</Menu.Header>
                  <Menu.Menu>
                    <Menu.Item
                      as={Link}
                      active={providersActive}
                      to={ProviderRoutes.providersList}
                    >
                      Providers
                    </Menu.Item>
                  </Menu.Menu>
                </Menu.Item>

                <Menu.Item>
                  <Menu.Header>Patrons</Menu.Header>
                  <Menu.Menu>
                    <Menu.Item
                      as={Link}
                      active={patronsActive}
                      to={BackOfficeRoutes.patronsList}
                    >
                      Patrons
                    </Menu.Item>
                  </Menu.Menu>
                </Menu.Item>

                <Menu.Item>
                  <Menu.Header>Statistics</Menu.Header>
                  <Menu.Menu>
                    <Menu.Item
                      as={Link}
                      active={statsActive}
                      to={BackOfficeRoutes.stats.home}
                    >
                      Most Loaned
                    </Menu.Item>
                  </Menu.Menu>
                </Menu.Item>

                <Overridable
                  activePath={activePath}
                  id="Backoffice.Sidebar.CustomMenuItem"
                />
              </Menu>
            </>
          </Overridable>
          <AuthenticationGuard
            silent
            authorizedComponent={() => <AdminMenu />}
            roles={['admin']}
            loginComponent={() => null}
          />
          <Overridable id="Sidebar.versions">
            <List divided selection>
              <List.Item>
                <Label color="blue">
                  react-ils
                  <Label.Detail>
                    {process.env.REACT_APP_UI_ILS_VERSION}
                  </Label.Detail>
                </Label>
              </List.Item>
              <List.Item>
                <Label color="blue">
                  invenio-ils
                  <Label.Detail>
                    {process.env.REACT_APP_INVENIO_VERSION}
                  </Label.Detail>
                </Label>
              </List.Item>
              {process.env.REACT_APP_OVERLAY_VERSION && (
                <List.Item>
                  <Label color="blue">
                    overlay
                    <Label.Detail>
                      {process.env.REACT_APP_OVERLAY_VERSION}
                    </Label.Detail>
                  </Label>
                </List.Item>
              )}
              <Overridable id="Sidebar.otherVersions" />
            </List>
          </Overridable>
        </>
      </Overridable>
    );
  }

render() {

    let isCompliant = HACCHui.canCreateTeams;
    const isAdmin = this.props.currentUser && Roles.userIsInRole(Meteor.userId(), ROLE.ADMIN);
    const isParticipant = this.props.currentUser && Roles.userIsInRole(Meteor.userId(), ROLE.PARTICIPANT);
    if (isParticipant) {
      const participant = Participants.findDoc({ userID: Meteor.userId() });
      isCompliant = isCompliant && participant.isCompliant;
    }

    const numParticipants = Participants.count();
    const numTeams = Teams.find({ open: true }).count();
    const teamCount = Teams.count();
    const suggestionCount = Suggestions.count();
    const minors = MinorParticipants.find({}).fetch();
    const uncompliantMinors = _.filter(minors, (m) => Participants.findDoc(m.participantID).isCompliant).length;

    const setVisible = (state) => {
      this.setState({ visible: state });
    };

    return (
        <div>
          <Menu borderless inverted fixed={'top'} className={'mobileBar'}>
            <Menu.Item position={'left'}>
              <div onClick={() => setVisible(!this.state.visible)} style={{ padding: '5px' }}>
                <Icon name='bars'/>
              </div>
            </Menu.Item>
          </Menu>
          <Sidebar.Pushable as={Segment} className={'sideBar'}>
            <Sidebar
                style={{ paddingTop: '4rem', backgroundColor: 'rgb(18, 72, 132)' }}
                as={Menu}
                animation='overlay'
                icon='labeled'
                inverted
                vertical
                onHide={() => setVisible(false)}
                visible={this.state.visible}
                width='thin'
            >
              <Menu.Item as={NavLink} activeClassName="" exact to={ROUTES.LANDING}
                         onClick={() => setVisible(!this.state.visible)}>
                <Header inverted as='h1'>HACC-Hui</Header>
              </Menu.Item>
              {isParticipant ? (
                  [
                      <Menu.Item as={NavLink}
                               activeClassName="active"
                               disabled={!isCompliant}
                               exact
                               to={ROUTES.CREATE_TEAM}
                               key='team-creation'>Create a Team</Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact
                               to={ROUTES.YOUR_PROFILE}
                               key='edit-profile'>Your Profile</Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact
                               to={ROUTES.BEST_FIT}
                               key='list-teams'>List the Teams ({numTeams})</Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               disabled={!isCompliant}
                               exact
                               to={ROUTES.YOUR_TEAMS}
                               key='your-teams'>Your
                      Teams</Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact to={ROUTES.LIST_PARTICIPANTS}
                               key='list-participants'>List the Participants ({numParticipants})</Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact
                               to={ROUTES.SUGGEST_TOOL_SKILL}
                               key='suggest-tool-skill'>Suggest Tool/Skill</Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact
                               to={ROUTES.TEAM_INVITATIONS}
                               key='team-invitations'>Your Invitations</Menu.Item>,
                  ]
              ) : ''}
              {isAdmin ? (
                  [
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact
                               to={ROUTES.CONFIGURE_HACC}
                               key={ROUTES.CONFIGURE_HACC}>Configure HACC</Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact
                               to={ROUTES.UPDATE_MP}
                               key={ROUTES.UPDATE_MP}>
                      Update Minor Participants Status ({uncompliantMinors})
                    </Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact
                               to={ROUTES.LIST_SUGGESTIONS}
                               key={ROUTES.LIST_SUGGESTIONS}>Suggestions List ({suggestionCount})</Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact
                               to={ROUTES.VIEW_TEAMS}
                               key={ROUTES.VIEW_TEAMS}>View Team ({teamCount})</Menu.Item>,
                    <Menu.Item as={NavLink}
                               activeClassName="active"
                               exact
                               to={ROUTES.DUMP_DATABASE}
                               key={ROUTES.DUMP_DATABASE}>Dump Database</Menu.Item>,
                  ]
              ) : ''}
              <Menu.Item>
                {this.props.currentUser === '' ? (
                    <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.SIGN_IN}
                               key={ROUTES.SIGN_IN}
                               onClick={() => setVisible(!this.state.visible)}>Sign In</Menu.Item>
                ) : (
                    [<Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.SIGN_OUT}
                               key={ROUTES.SIGN_OUT}
                               onClick={() => setVisible(!this.state.visible)}>Sign Out</Menu.Item>,
                      <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.DELETE_ACCOUNT}
                                 key={ROUTES.DELETE_ACCOUNT}
                                 onClick={() => setVisible(!this.state.visible)}>Delete Account</Menu.Item>,
                    ]
                )}
              </Menu.Item>
            </Sidebar>
            <Sidebar.Pusher style={{ paddingTop: '5rem' }}>
              {this.props.children}
            </Sidebar.Pusher>
          </Sidebar.Pushable>
        </div>

    );
  }

render() {
    const { user } = this.props;
    return (
      <Overridable id="ILSMenu.layout" {...this.props}>
        <>
          <Media greaterThanOrEqual="computer">
            <Menu
              stackable
              borderless
              inverted
              fixed="top"
              className="header-menu"
            >
              <Container>
                <Menu.Item header>
                  <div>
                    <Overridable id="ILSMenu.Logo">
                      {invenioConfig.APP.LOGO_SRC && (
                        <Link to="/">
                          <Image
                            src={invenioConfig.APP.LOGO_SRC}
                            size="tiny"
                            centered
                            alt="Logo"
                          />
                        </Link>
                      )}
                    </Overridable>
                  </div>
                  <div>
                    <EnvironmentLabel
                      pointing="left"
                      classContext="frontsite-computer"
                    />
                  </div>
                </Menu.Item>
                <Menu.Menu position="right">
                  <Menu.Item>
                    <Link to={FrontSiteRoutes.documentsListWithQuery('')}>
                      Search
                    </Link>
                  </Menu.Item>
                  <Overridable id="ILSMenu.RightMenuItems" />
                  <Menu.Item>
                    {this.renderRightMenuItem(user.fullName)}
                  </Menu.Item>
                </Menu.Menu>
              </Container>
            </Menu>
          </Media>
          <Media lessThan="computer">
            <Menu
              borderless
              inverted
              fixed="top"
              className="mobile-header-menu"
            >
              <Container>
                <Menu.Item header>
                  <div>
                    <Overridable id="ILSMenu.LogoMobile">
                      {invenioConfig.APP.LOGO_SRC && (
                        <Link to="/">
                          <Image
                            src={invenioConfig.APP.LOGO_SRC}
                            size="tiny"
                            centered
                            alt="Logo"
                          />
                        </Link>
                      )}
                    </Overridable>
                  </div>
                  <div>
                    <EnvironmentLabel
                      pointing="left"
                      small
                      classContext="frontsite-mobile"
                    />
                  </div>
                </Menu.Item>
                <Menu.Menu position="right">
                  <Menu.Item
                    as={Link}
                    to={FrontSiteRoutes.documentsListWithQuery('')}
                  >
                    <Icon name="search" />
                  </Menu.Item>
                  <Overridable id="ILSMenu.RightMenuItemsMobile" />
                  {this.renderRightMenuItem()}
                </Menu.Menu>
              </Container>
            </Menu>
          </Media>
        </>
      </Overridable>
    );
  }