react-bootstrap#NavDropdown JavaScript Examples

LanguageSelector = () => {
    const { i18n } = useTranslation();

    /**
     * @param {string} language
     */
    const onLanguageSelect = (language) => {
        i18n.changeLanguage(language);
    };

    useEffect(() => {
        let currentLanguage = languages.find((l) => l.value === i18n.language);

        if (!currentLanguage) {
            i18n.changeLanguage('en');
        }
    }, [i18n]);

    return (
        <NavDropdown
            title={i18n.language}
            id='nav-dropdown'
            drop='left'
            onSelect={onLanguageSelect}
        >
            {languages.map((language) => (
                <NavDropdown.Item key={language.value} eventKey={language.value}>
                    {language.name}
                </NavDropdown.Item>
            ))}
        </NavDropdown>
    );
}

/**
 *  Navbar Component using {Link}
 */
function NavigationBar() {
  const { isAuthenticated } = useAuth0();

  return (
    <Navbar bg="light" shadow="lg" expand="lg">
      <Navbar.Brand href="/">
        <Image src={logo} className="custom-img" />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="navbar-nav" />
      <Navbar.Collapse>
        {isAuthenticated ? (
          <Nav className="ml-auto color-link">
            <NavDropdown title="Events" id="basic-nav-dropdown">
              <NavDropdown.Item href="/events">
                Your Events
              </NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="/events/new">
                Create New
              </NavDropdown.Item>
            </NavDropdown>
            <ProfileLink />
            <LogoutLink />
          </Nav>
        ) : (
          <Nav className="ml-auto color-link">
            <LoginLink />
            <SignupLink />
          </Nav>
        )}
      </Navbar.Collapse>
    </Navbar>
  );
}

LanguageSelector = ({ defaultLang, langKey, langTextMap }) => {
  return (
    <NavDropdown
      title={<IconText iconName="LanguageIcon" text={langTextMap[langKey]} />}
      id="language-dropdown"
      className="language-selector"
    >
      {Object.keys(langTextMap).map((key) => {
        return (
          <Link
            key={key}
            to={getBaseUrl(defaultLang, key)}
            className={clsx("dropdown-item", { active: key === langKey })}
          >
            {langTextMap[key]}
          </Link>
        );
      })}
    </NavDropdown>
  );
}

render(){
        
        return (
            
            <Navbar  className="topheader"  expand="lg">
                <Navbar.Brand className="brandLogo" href="/"><img className="logo" alt="logo" src={logo}/></Navbar.Brand>
                <Navbar.Toggle bg="light" aria-controls="basic-navbar-nav" />
                <Navbar.Collapse bg="light" id="basic-navbar-nav">
                    <Nav className="mr-auto">
                    </Nav>
                    { (this.state.user === '') ?
                    <Nav className="ml-auto logintag">
                        <Nav.Link className="topheader unique white" href={`/login/${this.state.userid}`}>Login with Spotify</Nav.Link>
                    </Nav>
                    :
                    <Nav bg="light" className="ml-auto">
                        <NavDropdown alignRight className="myaccountTag" title="My Account" id="dropdown-menu-align-right">

                            <NavDropdown.Item className="white">Hello, {this.state.user}</NavDropdown.Item>
                            { this.state.devicename === null ? 
                                <div className="text-center"><NavDropdown.Item className="white">Device name: [No active device]</NavDropdown.Item>
                                <button onClick={this.handleScanDeviceClick} className="btn btn-success ">Scan devices</button></div>
                            :
                                <NavDropdown.Item className="white">Device name: {this.state.devicename}</NavDropdown.Item>
                            }
                            
                            <NavDropdown.Divider />
                            <NavDropdown.Item className="white" onClick={this.toggleLogOut} href="/">Log out</NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                    } 
                </Navbar.Collapse>
            </Navbar>
            
        );
    }

ExternalMenu = (props) => {
  const menu = [
    {
      title: 'Docs',
      link: 'https://plenty-defi.notion.site/Plenty-Docs-004ba25f40b641a3a276b84ebdc44971',
    },
    {
      title: 'Blog',
      link: 'https://plentydefi.medium.com/',
    },
    {
      title: 'GitHub',
      link: 'https://github.com/Plenty-DeFi',
    },
    {
      title: 'Node Selector',
    },
  ];
  return (
    <>
      {menu.map((menu, index) => {
        return menu.title !== 'Node Selector' ? (
          <NavDropdown.Item href={menu.link} key={index}>
            {menu.title}
          </NavDropdown.Item>
        ) : (
          <NavDropdown.Item key={index} onClick={props.toggleNodeSelectorHandler}>
            {menu.title}
          </NavDropdown.Item>
        );
      })}
    </>
  );
}

ProfileMenu = (props) => {
    const { t } = useTranslation();

    if (!props.user) {
        return null;
    }

    const title = (
        <span>
            <Avatar imgPath={props.user.avatar}></Avatar>
            {props.user.username}
        </span>
    );

    return (
        <NavDropdown title={title} id='nav-dropdown'>
            {props.menu.map((menuItem) => {
                if (!menuItem.path) {
                    return null;
                }

                return (
                    <Link key={menuItem.path} href={menuItem.path}>
                        <NavDropdown.Item>{t(menuItem.title)}</NavDropdown.Item>
                    </Link>
                );
            })}
        </NavDropdown>
    );
}

Header = ({ API, timetableState}) => {
  let {sessions, year, setYear, session, setSession, setSelectedModules, darkMode} = timetableState
  const selectYear = select(year, setYear, setSelectedModules, yr => {
    const s = sessions[yr]
    setSession(s?.[s.length-1] || '')
  })
  const selectSession = select(session, setSession, setSelectedModules)
  const years = useMemo(() => Object.keys(sessions).reverse(), [sessions])
  const mode = darkMode ? 'dark' : 'light'

  return <Navbar variant={mode} bg={mode} expand="lg" sticky="top">
    <Navbar.Brand style={{ fontSize: '1.135rem' }} className="mr-0 mr-sm-2 mr-lg-3">
      {/* eslint-disable-next-line react/jsx-no-target-blank */}
      <a href="https://cssa.club/" target="_blank"><img
        alt="CSSA logo"
        src="/cssa-mono.svg"
        
        width="28"
        height="28"
        style={darkMode ? {
          filter: 'invert(.75)'
        } : {
          filter: 'invert(.25)'
        }}
        className="d-inline-block align-top mr-1"
      /></a>&nbsp;
      ANU Timetable
    </Navbar.Brand>
    <Nav className="mr-auto flex-row">
      <NavDropdown title={year}>
        {/* reverse() - years (numerical keys) are in ascending order per ES2015 spec */}
        {years.map(k => <NavDropdown.Item key={k} onClick={selectYear}>{k}</NavDropdown.Item>)}
      </NavDropdown>
      <NavDropdown title={session} className="mr-0 mr-sm-2 mr-lg-3">
        {sessions[year]?.map(k => <NavDropdown.Item key={k} onClick={selectSession}>{k}</NavDropdown.Item>)}
      </NavDropdown>
      {/* <NavDropdown title="About">
        <NavDropdown.Item href="/contributors.html">
          Contributors
        </NavDropdown.Item>
        <NavDropdown.Item href="https://forms.office.com/r/sZnsxtsh2F" target="_blank" rel="noreferrer">
          Feedback
        </NavDropdown.Item>
      </NavDropdown> */}
    </Nav>
    <Navbar.Toggle className="mb-1"/>
    <Navbar.Collapse>
      <Toolbar API={API} timetableState={timetableState} />
    </Navbar.Collapse>
  </Navbar>
}

function PlotTabs({
    active,
    onTabChange,
    data,
    plots,
    ...props
}) {

    const MAX_TABS = 3; // max number of tabs
    const getPlotTitle = (plot, index) => {
        return plot?.title ?? ("Selection " + (index + 1).toString());
    };
    return (
        <Tab.Container
            onSelect={onTabChange}
            activeKey={active}
            defaultActiveKey={active}>
            <Row className="clearfix">
                <Col sm={12}>
                    <Nav bsStyle="tabs">
                        {plots.slice(0, plots.length > MAX_TABS ? MAX_TABS - 1 : MAX_TABS).map((plot, index) => (
                            <NavItem role="tab" eventKey={index}>
                                {getPlotTitle(plot, index)}
                            </NavItem>
                        ))}
                        {plots.length > MAX_TABS
                            ? <NavDropdown title={active < MAX_TABS - 1 ? "More..." : getPlotTitle(plots[active], active)}>
                                {plots.slice(MAX_TABS - 1).map((plot, index) => (
                                    <MenuItem eventKey={index + MAX_TABS - 1}>
                                        {getPlotTitle(plot, index + MAX_TABS - 1)}
                                    </MenuItem>
                                ))}
                            </NavDropdown>
                            : null}
                        <PlotSelectionTabActionButtons {...props} data={data} />
                    </Nav>
                </Col>
                <PlotSelectionTabContent {...props} data={data} />
            </Row>
        </Tab.Container>
    );
}

Dashboard = ({ isLoggedIn, removeAuth }) => {
  const [navOption, setNavOption] = useState([]);
  // remove cookie w/ token when users sign out and update auth value in local storage
  const signOut = () => {
    Cookies.remove('token');
    removeAuth();
  };
  useEffect(() => {
    if (isLoggedIn == 'true') {
      //if logged in, show cluster option in dashboard
      setNavOption(
        <>
          <NavDropdown title='My Cluster' className='ml-auto navLink'>
            <Nav.Link href='/cluster'>Cluster</Nav.Link>
            <Nav.Link href='/visualizer'>Visualizer</Nav.Link>
            <Nav.Link href='/alerts'>Alerts</Nav.Link>
          </NavDropdown>
          <Nav.Link href='/login' className='navLink' onClick={signOut}>
            Sign Out
          </Nav.Link>
        </>
      );
    } else {
      setNavOption(
        //login option shows only if not logged in - for now, since no logout in backend
        <Nav.Link href='/login' className='ml-auto'>
          Login
        </Nav.Link>
      );
    }
  }, [isLoggedIn]);

  return (
    <div className='topNavbar'>
      <Nav
        defaultActiveKey=''
        className='justify-content-between'
        id='navbarHome'
      >
        <Nav.Item>
          <Nav.Link href='/' className='dashLogo'>
            <img src={white} alt='Logo' className='logoHome' />
          </Nav.Link>
        </Nav.Item>
        <Nav.Link href='/#features' className='navLink'>
          Features
        </Nav.Link>
        <Nav.Link href='/#contribute' className='navLink'>
          Contribute
        </Nav.Link>
        <Nav.Link href='/#team' className='navLink'>
          Team
        </Nav.Link>
        {navOption}
      </Nav>
    </div>
  );
}

export function TopShotNav() {
  const [error, setError] = useState(null)
  const [accountAddress, setAccountAddress] = useState("")
  const [seriesSets, setSeriesSets] = useState(null)
  useEffect(() => {
    getTopshotOverview()
      .then((d) => {
        console.log(d)
        setSeriesSets(splitSets(d.sets))
      })
      .catch(setError)
  }, [])
  return (
    <Navbar bg="dark" variant="dark" expand="md" sticky="top">
      <Navbar.Brand href="/">
        {error ? <Red>Topshot Explorer</Red> : "Topshot Explorer"}
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/plays">Plays</Nav.Link>
          {seriesSets && Object.entries(seriesSets).map(
            ([series, sets],i) => {
              return (
                <NavDropdown key={series} title={`s${series} sets`} id="basic-nav-dropdown">
                {sets.map((s) => {
                    return (
                      <NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
                        {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} 
                      </NavDropdown.Item>
                    )
                  })}
              </NavDropdown>
                  )
            }
          )
          }
          {/* <NavDropdown title="Sets" id="basic-nav-dropdown">
            {topshotOverview &&
              topshotOverview.sets.map((s) => {
                return (
                  <NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
                    {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} 
                  </NavDropdown.Item>
                )
              })}
          </NavDropdown> */}
        </Nav>
        <Form inline>
          <FormControl
            type="text"
            placeholder="0xAccountID"
            onChange={(event) => {
              setAccountAddress(event.target.value)
            }}
            className="mr-sm-2"
          />
          <Button variant="outline-success" href={"/account/" + accountAddress}>
            Get Account
          </Button>
        </Form>
      </Navbar.Collapse>
    </Navbar>
  )
}

function AppNav() {
    const { t, i18n } = useTranslation();

    return (
        <Navbar bg="light" expand="lg" className="mb-3 navbar-mobile-thin">
            <Navbar.Brand href="/" className="title">
                <img
                    src={MaskMapLogo}
                    width="24px"
                    alt="공적 마스크 지도 로고"
                    className="mr-2"
                />
                {t("appName")}
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav">
                <span></span>
                <span></span>
                <span></span>
            </Navbar.Toggle>
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                    <NavDropdown title="? Language">
                        <NavDropdown.Item
                            onClick={() => i18n.changeLanguage("ko")}>
                            한국어
                        </NavDropdown.Item>
                        <NavDropdown.Item
                            onClick={() => i18n.changeLanguage("en")}>
                            English
                        </NavDropdown.Item>
                        <NavDropdown.Item
                            onClick={() => i18n.changeLanguage("zh")}>
                            中文
                        </NavDropdown.Item>
                    </NavDropdown>
                    <Nav.Link href="https://livecorona.co.kr">
                        <FontAwesomeIcon icon={faChartArea} size="lg" />{" "}
                        {t("covid19Dashboard")}
                    </Nav.Link>
                    <Nav.Link href="https://github.com/LiveCoronaDetector/">
                        <FontAwesomeIcon icon={faGithub} size="lg" />{" "}
                        {t("github")}
                    </Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
}

export default function Menubar(props) {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <Container fluid className='border-bottom '>
      <Navbar expand='lg' className=' bg-white mx-4 my-2'>
        <BrandLogo 
          brandLink={'/'}
          logoLink={'https://global-uploads.webflow.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg'}
          imageTitle={'Rocket.Chat'}
          brandName={'Rocket.Chat Community'}
          height={21}
          width={124}
        />
        <Navbar.Toggle
          aria-controls='basic-navbar-nav'
          className={styles.default_toggler+" ms-auto"}
        >
          <button
            className={`${styles.navbar_toggler} navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around bg-white`}
            type='button'
            onClick={() => {
              setCollapsed(!collapsed);
            }}
          >
            <span
              className={`${styles.toggler_icon} ${
                collapsed ? styles.toggler_bar_collapsed : styles.toggler_bar
              }`}
            />
          </button>
        </Navbar.Toggle>
        <Navbar.Collapse id='basic-navbar-nav'>
          <Nav className='mx-auto'>
            {props.menu?.data?.attributes?.body?.map((item,index) => {
              return item.sub_menus && item?.sub_menus?.data?.length ? (
                <NavDropdown
                  key = {item.id || item._id || `NavDropDown_${index}`}
                  title={item.label}
                  className={`ml-4 fw-normal ${styles.navbarItem}`}
                >
                  {item.sub_menus.data.map((sub,index) => (
                    <NavDropdown.Item
                      key={sub.id || sub._id || `NavDropDownItem_${index}`}
                      href={sub.attributes.url}
                    >
                      {sub.attributes.label}
                    </NavDropdown.Item>
                  ))}
                </NavDropdown>
              ) : (
                <Nav.Link href={item.url} className='fw-normal' key={item.id || item._id || `NavLink_${index}`}>
                  {item.label}
                </Nav.Link>
              );
            })}
          </Nav>
          <RocketChatLinkButton className={`bg-danger bg-gradient p-2 text-white ${styles.chat}`}>
            Click to Chat
          </RocketChatLinkButton>
        </Navbar.Collapse>
        <div className="mx-3">
        {Cookies.get('user') ?
        <Dropdown
        align="end"
        className={styles.dropdown_menu}>
        <Dropdown.Toggle as={CustomToggle} />
        <Dropdown.Menu size="sm" title="">
          <Dropdown.Header>RC4Community Profile</Dropdown.Header>
          <Dropdown.Item><Link href={`/profile/${Cookies.get('user')}`}><a className={styles.dropdown_menu_item}>Profile</a></Link></Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
      :
      ""
      }
      </div>
        <div className="mx-2">
          <RocketChatAuthMenuButton/>
        </div>
      </Navbar>
    </Container>
  );
}

Header = ({
  algorithm,
  animationSpeed,
  device,
  fenceToggle,
  ready,
  resizeGrid,
  resetFences,
  resetVisited,
  run: propRun,
  setAlgorithm,
  speed: propsSpeed,
  setNodeSize: propsNodeSize,
}) => {
  const mobile = device === "mobile";

  const [nodeSize, setNodeSize] = useState(defaultNodeSize);

  const [screenWidth, screenHeight] = getDimensions();
  const defaultDimensions = [
    maxFill(window.innerWidth, nodeSize),
    mobile ? maxFill(window.innerHeight, nodeSize) : screenHeight,
  ];
  const [maxDimensions, setMaxDimensions] = useState(defaultDimensions);

  const [maxWidth, maxHeight] = maxDimensions;

  // form value display
  const [width, setWidth] = useState(Math.ceil(screenWidth));
  const [height, setHeight] = useState(Math.ceil(screenHeight));
  const [speed, setSpeed] = useState(propsSpeed);

  // bootstrap
  const [show, setShow] = useState();
  const [expanded, setExpanded] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const collapseNav = () => setExpanded(false);

  const run = () => {
    if (algorithm === "") alert("Please select an algorithm");

    if (!ready)
      alert(
        "Please choose a start and finish point before running by clicking on the desired squares"
      );

    if (ready && algorithm) {
      if (mobile) {
        setTimeout(() => propRun(), 200);
        collapseNav();
        scroll.scrollToBottom({
          duration: 1200,
          delay: 100,
          smooth: true,
        });
      } else setTimeout(() => propRun(), 200);
    }
  };

  const nodeSizeHandler = (e) => {
    // for display
    setNodeSize(e.target.value);
    // for visualizer to change node inline style
    propsNodeSize(e.target.value);

    let [width, height] = getDimensions(e.target.value);

    resizeGrid([width, height]);
    setMaxDimensions([
      maxFill(window.innerWidth, nodeSize),
      mobile ? maxFill(window.innerWidth, e.target.value) : height,
    ]);
    setWidth(width);
    setHeight(height);
  };

  const gitHubImage = (
    <Image
      src="/images/github.png"
      className={"github-img"}
      alt={"Github"}
      fluid
    />
  );

  const linkedInImage = (
    <Image
      src="/images/linkedin.png"
      alt={"LinkedIn"}
      className={"linkedin-img"}
      fluid
    />
  );

  const algorithmDropdowns = algorithmInfo.map((alg, i) => {
    return (
      <OverlayTrigger
        key={i}
        trigger={["hover", "focus"]}
        placement={mobile ? "bottom" : "right"}
        overlay={
          <Popover id={`${alg.id}-popover`}>
            <Popover.Title as="h2" children={`${alg.name}`} />
            <Popover.Content>
              <p>
                <strong>{`${alg.header}`}</strong>
              </p>
              <p style={{ whiteSpace: "pre-line" }}>{`${alg.content}`}</p>
              <p>{`${alg.footer}`}</p>
            </Popover.Content>
          </Popover>
        }
      >
        <NavDropdown.Item
          id={`set-${alg.id}`}
          onClick={() => setAlgorithm(`${alg.name}`)}
          children={`${alg.name}`}
          active={algorithm === `${alg.name}`}
        />
      </OverlayTrigger>
    );
  });

  const howToUse = (
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>How To Use</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Container>
          <Row>
            1. Place a start and end point by clicking on the grid! (You can
            remove them by clicking on them again)
          </Row>
          <Row>
            {" "}
            2. Then place fences by checking "Fence Mode" and clicking on the
            grid.{" "}
          </Row>
          <Row>3. Choose an algorithm via the "Algorithms" dropdown. </Row>
          <Row>4. Run it via pressing the green "Run Algorithm" button. </Row>
          <Row>5. Enjoy!</Row>
        </Container>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleClose}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
  );

  const settings = (
    <DropdownButton title="Settings" size="sm" variant="dark">
      <Container variant="dark">
        <Row>
          <Form variant="dark" inline>
            <Col>
              Node Size
              <FormControl
                size="sm"
                type="text"
                placeholder={`Currently ${nodeSize})`}
                onChange={(e) => {
                  setNodeSize(e.target.value);
                }}
              />
              <Form.Control
                type="range"
                size="sm"
                min="10"
                max="100"
                value={nodeSize}
                onChange={nodeSizeHandler}
                custom
              />
              Grid Size
              <FormControl
                size="sm"
                type="text"
                placeholder={`Width (Currently ${width})`}
                onChange={(e) => {
                  setWidth(e.target.value);
                }}
              />
              <Form.Control
                type="range"
                size="sm"
                min="1"
                max={maxWidth}
                value={width}
                onChange={(e) => {
                  setWidth(e.target.value);
                  resizeGrid([e.target.value, height]);
                }}
                custom
              />
              <NavDropdown.Divider />
              <FormControl
                type="text"
                size="sm"
                placeholder={`Height (Currently ${height})`}
                onChange={(e) => {
                  setHeight(e.target.value);
                }}
                className="Row-Input"
              />
              <Form.Control
                type="range"
                min="1"
                max={maxHeight}
                value={height}
                onChange={(e) => {
                  setHeight(e.target.value);
                  resizeGrid([width, e.target.value]);
                }}
                custom
              />
              <NavDropdown.Divider />
              <Form.Label children={"Draw Square"} />
              <Form.Control
                type="range"
                size="sm"
                min="1"
                max={mobile ? maxWidth : maxHeight}
                value={(height, width)}
                onChange={(e) => {
                  setWidth(e.target.value);
                  setHeight(e.target.value);
                  resizeGrid([e.target.value, e.target.value]);
                }}
                custom
              />
              <NavDropdown.Divider />
              <Form.Label children={"Animation Speed"} />
              <Form.Control
                type="range"
                min="1"
                max="5"
                value={speed}
                onChange={(e) => {
                  setSpeed(e.target.value);
                  animationSpeed(e.target.value);
                }}
                custom
              />
            </Col>
          </Form>
        </Row>
      </Container>
    </DropdownButton>
  );

  const contactInfo = (
    <DropdownButton title=" Contact The Creators" size="sm" id="contact-info">
      <Container>
        <Row>
          <NavDropdown.Item id={"bassel"} children={"Bassel"} />
          <a
            className={"image-link"}
            href="https://github.com/basselalsayed"
            children={gitHubImage}
          />
          <a
            className={"image-link"}
            href="https://www.linkedin.com/in/bsas/"
            children={linkedInImage}
          />
        </Row>
        <Row>
          <NavDropdown.Item id={"tom"} children={"Tom"} />
          <a
            className={"image-link"}
            href="https://github.com/Walker-TW"
            children={gitHubImage}
          />
          <a
            className={"image-link"}
            href="https://www.linkedin.com/in/thomas-w-walker"
            children={linkedInImage}
          />
        </Row>
      </Container>
    </DropdownButton>
  );

  return (
    <Navbar
      expanded={expanded}
      expand="lg"
      bg="dark"
      variant="dark"
      collapseOnSelect
    >
      <Navbar.Brand
        href="https://github.com/Walker-TW/Algorithm-Visualizer"
        children={"Algo-Visualiser"}
      />
      <Navbar.Toggle
        onClick={() => setExpanded(expanded ? false : "lg")}
        aria-controls="responsive-navbar-nav"
      />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Container fluid>
          <Col md={{ span: 2 }}>
            <Nav className="mr-auto">
              <NavDropdown title="Algorithms" id="collapsible-nav-dropdown">
                {algorithmDropdowns}
              </NavDropdown>
            </Nav>
          </Col>
          <Col md={{ span: 4 }}>
            <Nav>
              <Button
                id="info-btn"
                style={{ border: "2px solid cyan", color: "cyan" }}
                variant="dark"
                children={"How To Use"}
                onClick={handleShow}
              />
              {howToUse}
              <Button
                id="run-btn"
                style={{ border: "2px solid chartreuse", color: "chartreuse" }}
                variant="dark"
                onClick={run}
                children={
                  algorithm
                    ? `Let's Run ${algorithm}`
                    : "Please Select Algorithm"
                }
                disabled={!ready || algorithm === ""}
              />
              <Dropdown as={ButtonGroup}>
                <Button
                  id="reset-btn"
                  variant="dark"
                  style={{ border: "2px solid red", color: "red" }}
                  children={"Reset Visited"}
                  onClick={resetVisited}
                />
                <Dropdown.Toggle
                  split
                  variant="dark"
                  style={{ border: "2px solid red", color: "red" }}
                  id="dropdown-custom-2"
                />
                <Dropdown.Menu>
                  <Dropdown.Item
                    id="fence-reset-btn"
                    onClick={resetFences}
                    variant="dark"
                    children={"Reset Fences"}
                  />
                </Dropdown.Menu>
              </Dropdown>
            </Nav>
          </Col>
          <Col md={{ span: 4 }}>
            <Nav navbar="true">
              <Container>
                <Form inline>
                  <Form.Check
                    type="switch"
                    id="fence-check"
                    name="fences"
                    label="Fence mode"
                    style={{ color: "white" }}
                    onChange={fenceToggle}
                  />
                </Form>
              </Container>
              {settings}
              {contactInfo}
            </Nav>
          </Col>
        </Container>
      </Navbar.Collapse>
    </Navbar>
  );
}

render() {
    return (
      <div>
        <LoginModal
          showModal={this.state.showLoginModal}
          handleClose={() => {
            this.setState(handleModal("login", "close"));
          }}
          handleShow={() => {
            this.setState(handleModal("login", "open"));
          }}
          handleSignupShow={() => {
            this.setState(handleModal("signup", "open"));
          }}
        />
        <SignUpModal
          showModal={this.state.showSignupModal}
          handleClose={() => {
            this.setState(handleModal("signup", "close"));
          }}
          handleShow={() => {
            this.setState(handleModal("signup", "open"));
          }}
        />
        {this.props.isLoggedIn && this.props.currentUser.isFirstAdmin && (
          <UpdateOrganizationModal
            showModal={this.state.showUpdateOrganizationModal}
            handleClose={() => {
              this.setState(handleModal("updateOrg", "close"));
            }}
            handleShow={() => {
              this.setState(handleModal("updateOrg", "open"));
            }}
          />
        )}
        {this.props.isLoggedIn && (
          <UpdateUserModal
            showModal={this.state.showUpdateUserModal}
            handleClose={() => {
              this.setState(handleModal("updateUser", "close"));
            }}
            handleShow={() => {
              this.setState(handleModal("updateUser", "open"));
            }}
            history={this.props.history}
          />
        )}
        <Navbar
          bg="light"
          variant="light"
          fixed="top"
          className="navbar-container"
        >
          {this.props.history.location.pathname === "/" ||
          this.props.history.location.pathname === "/admin" ? (
            <span className="navbar-brand">
              <MenuIcon onClick={this.props.toggleSidebar} />
              <Link to="" onClick={this.scrollToTop}>
                SPANSBERRY
              </Link>
            </span>
          ) : (
            <span className="navbar-brand">
              <Link to="" onClick={this.scrollToTop}>
                SPANSBERRY
              </Link>
            </span>
          )}
          <Nav className="ml-auto">
            {this.props.isLoggedIn ? (
              <React.Fragment>
                <PersonIcon className="navbar-user-image" />
                <NavDropdown
                  title={this.props.currentUser.name.firstName}
                  className="navbar-user-dropdown"
                >
                  <NavDropdown.Item>
                    <div
                      onClick={() => {
                        this.setState(handleModal("updateUser", "open"));
                      }}
                    >
                      Edit Profile
                    </div>
                  </NavDropdown.Item>
                  {this.props.currentUser.isAdmin && (
                    <React.Fragment>
                      <NavDropdown.Item>
                        <div
                          onClick={() => {
                            this.props.history.push("/admin");
                          }}
                        >
                          Admin Dashboard
                        </div>
                      </NavDropdown.Item>
                    </React.Fragment>
                  )}
                  {this.props.isLoggedIn &&
                    this.props.currentUser.isFirstAdmin && (
                      <NavDropdown.Item>
                        <div
                          onClick={() => {
                            this.setState(handleModal("updateOrg", "open"));
                          }}
                        >
                          Update Organization
                        </div>
                      </NavDropdown.Item>
                    )}
                  <NavDropdown.Item>
                    <div onClick={this.props.logout}>
                      <ExitToAppIcon />
                      Logout
                    </div>
                  </NavDropdown.Item>
                </NavDropdown>
              </React.Fragment>
            ) : (
              <Button
                variant=""
                className="primary-button navbar-button"
                onClick={() => {
                  this.setState(handleModal("login", "open"));
                }}
              >
                Login
              </Button>
            )}
          </Nav>
        </Navbar>
      </div>
    );
  }

CustomNavbar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [searchOpen, setSearchOpen] = useState(false);
    const [visible, setVisible] = React.useState(false);
    const data = useStaticQuery(query);
    return (
        <Navbar collapseOnSelect expand="md" sticky="top" id="navbar" className={isOpen ? 'open' : ''}>
            {visible
            && (
                <div className="backdrop" onClick={() => setVisible(false)} />
            )}
            <Container fluid className="position-relative">
                {visible
                && (
                    <div className="features-tab-dropdown-menu d-none d-md-block">
                        <div className="row">
                            <div className="col-6 col-xl-4">
                                {data.allFeatures.nodes.map((feature, index) => (index < 5 ? (
                                    <a
                                        href={`https://flotiq.com/features?feature=${index}`}
                                        className="dropdown-item"
                                        key={feature.id}
                                        target="_blank"
                                        rel="noreferrer"
                                    >
                                        <span className="dropdown-item__icon">
                                            <img src={feature.menu_icon[0].localFile.publicURL} alt={feature.name} />
                                        </span>
                                        {feature.name}
                                    </a>
                                ) : null))}
                            </div>
                            <div className="col-6 col-xl-4">
                                {data.allFeatures.nodes.map((feature, index) => (index > 4 && index < 10 ? (
                                    <a
                                        href={`https://flotiq.com/features?feature=${index}`}
                                        className="dropdown-item"
                                        key={feature.id}
                                        target="_blank"
                                        rel="noreferrer"
                                    >
                                        <span className="dropdown-item__icon">
                                            <img src={feature.menu_icon[0].localFile.publicURL} alt={feature.name} />
                                        </span>
                                        {feature.name}
                                    </a>
                                ) : null))}
                                <div className="dropdown-item dropdown-item__missing-feature d-flex d-xl-none">
                                    <p>Missing a feature?</p>
                                    <a href="mailto:[email protected]" className="link-with-arrow">
                                        Request new feature
                                    </a>
                                </div>
                            </div>
                            <div className="col-6 col-xl-4 d-none d-xl-block">
                                {data.allFeatures.nodes.map((feature, index) => (index > 9 ? (
                                    <a
                                        href={`https://flotiq.com/features?feature=${index}`}
                                        className="dropdown-item"
                                        key={feature.id}
                                        target="_blank"
                                        rel="noreferrer"
                                    >
                                        <span className="dropdown-item__icon">
                                            <img src={feature.menu_icon[0].localFile.publicURL} alt={feature.name} />
                                        </span>
                                        {feature.name}
                                    </a>
                                ) : null))}
                                <div className="dropdown-item dropdown-item__missing-feature">
                                    <p>Missing a feature?</p>
                                    <a href="mailto:[email protected]" className="link-with-arrow">
                                        Request new feature
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
                <Navbar.Brand href={`${data.site.siteMetadata.pathPrefix}/`}>
                    <img src={Logo} alt="Flotiq" className="d-none d-lg-inline" />
                    <img src={Logo2} alt="Flotiq" className="d-inline d-lg-none" />
                </Navbar.Brand>
                <div className="mobile-header-right">
                    <Nav className="d-inline d-md-none">
                        <Button click={() => window.open('https://editor.flotiq.com/register.html')}>
                            <Nav.Item>
                                Go to Flotiq
                            </Nav.Item>
                        </Button>
                        <Nav.Item>
                            <form
                                action={`${data.site.siteMetadata.pathPrefix}/search/`}
                                className={`search ${searchOpen ? 'open' : ''}`}
                            >
                                <div className="position-relative">
                                    <input
                                        name="q"
                                        placeholder="Type to search..."
                                        required
                                        className="search-input"
                                        autoComplete="off"
                                        onFocus={() => setSearchOpen(true)}
                                        onBlur={() => setSearchOpen(false)}
                                    />
                                    <Button additionalClasses={['btn--icon', 'search-button']} click={() => {}}>
                                        <img src={Search} alt="search" />
                                    </Button>
                                </div>
                            </form>

                        </Nav.Item>
                    </Nav>
                    <Button
                        additionalClasses={['btn--icon', 'search-open-button']}
                        click={() => setSearchOpen(!searchOpen)}
                    >
                        <span />
                    </Button>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" onClick={() => setIsOpen(!isOpen)} />
                </div>
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="mr-3">
                        <Nav.Item
                            role="button"
                            className="dropdown-toggle nav-link nav-link__features-dropdown d-none d-md-block"
                            onClick={() => setVisible(!visible)}
                        >
                            {visible ? <span className="nav-link__opened">Features</span>
                                : <span className="nav-link__closed">Features</span>}
                        </Nav.Item>
                        <NavDropdown title="Features" id="basic-nav-dropdown" className=" d-block d-md-none">
                            {data.allFeatures.nodes.map((feature, index) => (
                                <a
                                    href={`/features?feature=${index}`}
                                    className="dropdown-item"
                                    key={feature.id}
                                >
                                    {feature.name}
                                </a>
                            ))}
                        </NavDropdown>
                        <Nav.Link
                            href="https://flotiq.com/solutions"
                            onClick={() => { setIsOpen(false); setVisible(false); }}
                        >
                            Solutions
                        </Nav.Link>
                        <Nav.Link
                            href="https://flotiq.com/pricing"
                            onClick={() => { setIsOpen(false); setVisible(false); }}
                        >
                            Pricing
                        </Nav.Link>
                        <NavDropdown title="Resources" id="basic-nav-dropdown" onClick={() => setVisible(false)}>
                            <a
                                href="https://flotiq.com/"
                                className="dropdown-item"
                                target="_blank"
                                rel="noreferrer"
                            >
                                Main page
                            </a>
                            <a
                                href="https://flotiq.com/docs/"
                                className="dropdown-item"
                                target="_blank"
                                rel="noreferrer"
                            >
                                Docs
                            </a>
                            <a
                                href="https://flotiq.com/docs/faq/"
                                className="dropdown-item"
                                target="_blank"
                                rel="noreferrer"
                            >
                                FAQ
                            </a>
                            <a
                                href="https://flotiq.productlift.dev"
                                className="dropdown-item"
                                target="_blank"
                                rel="noreferrer"
                            >
                                Roadmap
                            </a>
                        </NavDropdown>
                    </Nav>
                    <Nav className="d-none d-md-flex d-lg-flex">
                        <Nav.Item>
                            <form
                                action={`${data.site.siteMetadata.pathPrefix}/search/`}
                                className={`search ${searchOpen ? 'open' : ''}`}
                            >
                                <input
                                    name="q"
                                    placeholder="Type to search..."
                                    required
                                    className="search-input"
                                    autoComplete="off"
                                    onFocus={() => setSearchOpen(true)}
                                    onBlur={() => setSearchOpen(false)}
                                />
                                <Button additionalClasses={['btn--icon', 'search-button']} click={() => {}}>
                                    <img src={Search} alt="search" />
                                </Button>
                            </form>
                        </Nav.Item>
                        <Button click={() => window.open('https://editor.flotiq.com/register.html')}>
                            <Nav.Item>
                                Go to Flotiq
                            </Nav.Item>
                        </Button>
                    </Nav>
                    <div className="d-md-none d-lg-none bottom-mobile-nav">
                        <div>
                            <Button
                                click={() => window.open('https://editor.flotiq.com/register.html')}
                                additionalClasses={['btn-mobile-big']}
                            >
                                <Nav.Item>
                                    Go to Flotiq
                                </Nav.Item>
                            </Button>
                        </div>
                    </div>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
}

render() {
        const { history, location } = this.props;
        const { pushPermission, commands, runningTasks, updateAvailable, latestVersion, lastUpdate } = this.state;
        const signedInName = auth.user ? auth.user.username : '?';
        const showCommands = commands.length > 0;
        const workspace = Workspaces.findByPath(location.pathname);
        const updateMsg = i18n._('A new version of {{name}} is available', { name: settings.productName }) + '. ' +
            i18n._('Version {{version}}', { version: latestVersion.readable }) +
            ` (${moment(lastUpdate).format('LLL')})`;
        const title = workspace ? workspace.name : 'Makerverse';

        return (
            <Navbar
                fixedTop
                fluid
                style={{
                    margin: 0,
                }}
            >
                <Navbar.Header style={{ display: 'flex', alignItems: 'center' }}>
                    <img
                        style={{
                            margin: '4px auto 0 auto',
                            width: '42px'
                        }}
                        src="images/logo-badge-32x32.png"
                        alt=""
                    />
                    <h1 style={{ color: '#222', marginLeft: '15px', marginTop: 0, marginBottom: 0, fontSize: '30px', fontWeight: '600' }}>
                        {title}
                    </h1>
                    {updateAvailable && (
                        <Tooltip
                            placement="bottom"
                            id="navbarBrandTooltip"
                            style={{ color: '#fff' }}
                            content={updateMsg}
                        >
                            <button
                                type="button"
                                className="btn btn-warning"
                                style={{ marginLeft: '10px' }}
                                onClick={() => {
                                    window.location = '/#/settings/about';
                                }}
                                title={i18n._('New update available')}
                            >
                                <i className="fa fa-warning" />
                                <Space width="8" />
                                {i18n._('New update available')}
                            </button>
                        </Tooltip>
                    )}
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav pullRight>
                        <NavDropdown
                            id="nav-dropdown-user"
                            title={(
                                <div title={i18n._('My Account')}>
                                    <i className="fa fa-fw fa-user" />
                                </div>
                            )}
                            noCaret
                        >
                            <MenuItem header>
                                {i18n._('Signed in as {{name}}', { name: signedInName })}
                            </MenuItem>
                            <MenuItem divider />
                            <MenuItem
                                href="https://openwork.shop/account/manage"
                            >
                                <i className="fa fa-fw fa-user" />
                                <Space width="8" />
                                {i18n._('Account')}
                            </MenuItem>
                            <MenuItem
                                onClick={() => {
                                    log.debug('Destroy and cleanup the WebSocket connection');
                                    Workspaces.disconnect();
                                    deleteCookie(auth.GUEST_COOKIE_NAME);

                                    if (auth.isGuest()) {
                                        window.location.replace('/#/login');
                                    } else {
                                        auth.signout();

                                        // Remember current location
                                        history.replace(location.pathname);
                                    }
                                }}
                            >
                                <i className="fa fa-fw fa-sign-out" />
                                <Space width="8" />
                                {i18n._('Sign Out')}
                            </MenuItem>
                        </NavDropdown>
                        <NavDropdown
                            id="nav-dropdown-menu"
                            title={(
                                <div title={i18n._('Options')}>
                                    <i className="fa fa-fw fa-ellipsis-v" />
                                    {this.state.runningTasks.length > 0 && (
                                        <span
                                            className="label label-primary"
                                            style={{
                                                position: 'absolute',
                                                top: 4,
                                                right: 4
                                            }}
                                        >
                                        N
                                        </span>
                                    )}
                                </div>
                            )}
                            noCaret
                        >
                            {showCommands && (
                                <MenuItem header>
                                    {i18n._('Command')}
                                    {pushPermission === Push.Permission.GRANTED && (
                                        <span className="pull-right">
                                            <i className="fa fa-fw fa-bell-o" />
                                        </span>
                                    )}
                                    {pushPermission === Push.Permission.DENIED && (
                                        <span className="pull-right">
                                            <i className="fa fa-fw fa-bell-slash-o" />
                                        </span>
                                    )}
                                    {pushPermission === Push.Permission.DEFAULT && (
                                        <span className="pull-right">
                                            <Anchor
                                                className={styles.btnIcon}
                                                onClick={this.actions.requestPushPermission}
                                                title={i18n._('Show notifications')}
                                            >
                                                <i className="fa fa-fw fa-bell" />
                                            </Anchor>
                                        </span>
                                    )}
                                </MenuItem>
                            )}
                            {showCommands && commands.map((cmd) => {
                                const isTaskRunning = runningTasks.indexOf(cmd.taskId) >= 0;

                                return (
                                    <MenuItem
                                        key={cmd.id}
                                        disabled={cmd.disabled}
                                        onSelect={() => {
                                            this.actions.runCommand(cmd);
                                        }}
                                    >
                                        <span title={cmd.command}>{cmd.title || cmd.command}</span>
                                        <span className="pull-right">
                                            <i
                                                className={classNames(
                                                    'fa',
                                                    'fa-fw',
                                                    { 'fa-circle-o-notch': isTaskRunning },
                                                    { 'fa-spin': isTaskRunning },
                                                    { 'fa-exclamation-circle': cmd.err },
                                                    { 'text-error': cmd.err }
                                                )}
                                                title={cmd.err}
                                            />
                                        </span>
                                    </MenuItem>
                                );
                            })}
                            {showCommands &&
                            <MenuItem divider />
                            }
                            <MenuItem
                                href="https:/makerverse.com/"
                                target="_blank"
                            >
                                {i18n._('Help')}
                            </MenuItem>
                            {/* <MenuItem
                                href="https://github.com/cncjs/cncjs/issues"
                                target="_blank"
                            >
                                {i18n._('Report an issue')}
                            </MenuItem> */}
                        </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }

export default function Header ({ sub }) {
  const router = useRouter()
  const path = router.asPath.split('?')[0]
  const [fired, setFired] = useState()
  const me = useMe()
  const prefix = sub ? `/~${sub}` : ''
  const { data: subLatestPost } = useQuery(gql`
    query subLatestPost($name: ID!) {
      subLatestPost(name: $name)
    }
  `, { variables: { name: 'jobs' }, pollInterval: 600000, fetchPolicy: 'network-only' })

  const [lastCheckedJobs, setLastCheckedJobs] = useState(new Date().getTime())
  useEffect(() => {
    if (me) {
      setLastCheckedJobs(me.lastCheckedJobs)
    } else {
      if (sub === 'jobs') {
        localStorage.setItem('lastCheckedJobs', new Date().getTime())
      }
      setLastCheckedJobs(localStorage.getItem('lastCheckedJobs'))
    }
  })

  const Corner = () => {
    if (me) {
      return (
        <div className='d-flex align-items-center'>
          <Head>
            <link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
          </Head>
          <Link href='/notifications' passHref>
            <Nav.Link className='pl-0 position-relative'>
              <NoteIcon />
              {me?.hasNewNotes &&
                <span className={styles.notification}>
                  <span className='invisible'>{' '}</span>
                </span>}
            </Nav.Link>
          </Link>
          <div className='position-relative'>
            <NavDropdown
              className={styles.dropdown} title={
                <Link href={`/${me?.name}`} passHref>
                  <Nav.Link className='p-0' onClick={e => e.preventDefault()}>{`@${me?.name}`}</Nav.Link>
                </Link>
              } alignRight
            >
              <Link href={'/' + me?.name} passHref>
                <NavDropdown.Item>
                  profile
                  {me && !me.bioId &&
                    <div className='p-1 d-inline-block bg-secondary ml-1'>
                      <span className='invisible'>{' '}</span>
                    </div>}
                </NavDropdown.Item>
              </Link>
              <Link href='/wallet' passHref>
                <NavDropdown.Item>wallet</NavDropdown.Item>
              </Link>
              <Link href='/satistics?inc=invoice,withdrawal,stacked,spent' passHref>
                <NavDropdown.Item>satistics</NavDropdown.Item>
              </Link>
              <NavDropdown.Divider />
              <Link href='/invites' passHref>
                <NavDropdown.Item>invites
                  {me && !me.hasInvites &&
                    <div className='p-1 d-inline-block bg-success ml-1'>
                      <span className='invisible'>{' '}</span>
                    </div>}
                </NavDropdown.Item>
              </Link>
              <NavDropdown.Divider />
              <div className='d-flex align-items-center'>
                <Link href='/settings' passHref>
                  <NavDropdown.Item>settings</NavDropdown.Item>
                </Link>
              </div>
              <NavDropdown.Divider />
              <NavDropdown.Item onClick={() => signOut({ callbackUrl: '/' })}>logout</NavDropdown.Item>
            </NavDropdown>
            {me && !me.bioId &&
              <span className='position-absolute p-1 bg-secondary' style={{ top: '5px', right: '0px' }}>
                <span className='invisible'>{' '}</span>
              </span>}
          </div>
          {me &&
            <Nav.Item>
              <Link href='/wallet' passHref>
                <Nav.Link className='text-success px-0 text-nowrap'><WalletSummary me={me} /></Nav.Link>
              </Link>
            </Nav.Item>}
        </div>
      )
    } else {
      if (!fired) {
        const strike = useLightning()
        useEffect(() => {
          setTimeout(strike, randInRange(3000, 10000))
          setFired(true)
        }, [router.asPath])
      }
      return path !== '/login' && !path.startsWith('/invites') && <Button id='login' onClick={signIn}>login</Button>
    }
  }

  const NavItems = ({ className }) => {
    return (
      <>
        <Nav.Item className={className}>
          <Link href={prefix + '/recent'} passHref>
            <Nav.Link className={styles.navLink}>recent</Nav.Link>
          </Link>
        </Nav.Item>
        {!prefix &&
          <Nav.Item className={className}>
            <Link href='/top/posts/week' passHref>
              <Nav.Link className={styles.navLink}>top</Nav.Link>
            </Link>
          </Nav.Item>}
        <Nav.Item className={className}>
          <div className='position-relative'>
            <Link href='/~jobs' passHref>
              <Nav.Link active={sub === 'jobs'} className={styles.navLink}>
                jobs
              </Nav.Link>
            </Link>
            {sub !== 'jobs' && (!me || me.noteJobIndicator) && (!lastCheckedJobs || lastCheckedJobs < subLatestPost?.subLatestPost) &&
              <span className={styles.jobIndicator}>
                <span className='invisible'>{' '}</span>
              </span>}
          </div>
        </Nav.Item>
        {me &&
          <Nav.Item className={className}>
            <Link href={prefix + '/post'} passHref>
              <Nav.Link className={styles.navLinkButton}>post</Nav.Link>
            </Link>
          </Nav.Item>}
      </>
    )
  }

  return (
    <>
      <Container className='px-sm-0'>
        <Navbar className='pb-0 pb-md-1'>
          <Nav
            className={styles.navbarNav}
            activeKey={path}
          >
            <div className='d-flex'>
              <Link href='/' passHref>
                <Navbar.Brand className={`${styles.brand} d-none d-md-block`}>
                  STACKER NEWS
                </Navbar.Brand>
              </Link>
              <Link href='/' passHref>
                <Navbar.Brand className={`${styles.brand} d-block d-md-none`}>
                  SN
                </Navbar.Brand>
              </Link>
            </div>
            <NavItems className='d-none d-md-flex' />
            <Nav.Item className={`text-monospace nav-link px-0 ${me?.name.length > 6 ? 'd-none d-lg-flex' : ''}`}>
              <Price />
            </Nav.Item>
            <Corner />
          </Nav>
        </Navbar>
        <Navbar className='pt-0 pb-1 d-md-none'>
          <Nav
            className={`${styles.navbarNav} justify-content-around`}
            activeKey={path}
          >
            <NavItems />
          </Nav>
        </Navbar>
      </Container>
    </>
  )
}

Navigation = (props) => {
    const { t } = useTranslation();
    const {
        games,
        currentGame,
        lobbyResponse,
        lobbySocketConnected,
        lobbySocketConnecting
    } = useSelector((state) => ({
        games: state.lobby.games,
        currentGame: state.lobby.currentGame,
        lobbyResponse: state.lobby.responseTime,
        lobbySocketConnected: state.lobby.connected,
        lobbySocketConnecting: state.lobby.connecting
    }));
    const { gameConnected, gameConnecting, gameResponse } = useSelector((state) => ({
        gameConnected: state.games.connected,
        gameConnecting: state.games.connecting,
        gameResponse: state.games.responseTime
    }));

    /**
     * @param {MenuItem} menuItem The menu item
     * @param {User} user The logged in user
     * @returns {boolean} Whether or not the user can see this menu item
     */
    const userCanSeeMenu = (menuItem, user) => {
        return !menuItem.permission || (!!user && user.permissions[menuItem.permission]);
    };

    /**
     * Filter a list of menu items to what the logged in user can see
     * @param {MenuItem[]} menuItems The list of menu items
     * @param {User} user The logged in user
     * @returns {MenuItem[]} The filtered menu items
     */
    const filterMenuItems = (menuItems, user) => {
        const returnedItems = [];

        for (const menuItem of menuItems) {
            if (user && menuItem.showOnlyWhenLoggedOut) {
                continue;
            }

            if (!user && menuItem.showOnlyWhenLoggedIn) {
                continue;
            }

            if (!userCanSeeMenu(menuItem, user)) {
                continue;
            }

            returnedItems.push(menuItem);
        }

        return returnedItems;
    };

    /**
     * Render a list of menu items to react components
     * @param {MenuItem[]} menuItems The menu items
     * @returns {JSX.Element[]} The list of rendered menu items
     */
    const renderMenuItems = (menuItems) => {
        return filterMenuItems(menuItems, props.user).map((menuItem) => {
            const children =
                menuItem.childItems && filterMenuItems(menuItem.childItems, props.user);
            if (children && children.length > 0) {
                return (
                    <NavDropdown
                        key={menuItem.title}
                        title={t(menuItem.title)}
                        id={`nav-${menuItem.title}`}
                    >
                        {children.map((menuItem) => {
                            if (!menuItem.path) {
                                return <></>;
                            }

                            return (
                                <Link key={menuItem.path} href={menuItem.path}>
                                    <NavDropdown.Item>{t(menuItem.title)}</NavDropdown.Item>
                                </Link>
                            );
                        })}
                    </NavDropdown>
                );
            }

            if (!menuItem.path) {
                return <></>;
            }

            return (
                <Link key={menuItem.path || menuItem.title} href={menuItem.path}>
                    <Nav.Link>{t(menuItem.title)}</Nav.Link>
                </Link>
            );
        });
    };

    let numGames = (
        <li>
            <span>{t('{{gameLength}} Games', { gameLength: games?.length })}</span>
        </li>
    );

    return (
        <Navbar bg='dark' variant='dark' className='navbar-sm' fixed='top'>
            <Nav>
                <Link href='/'>
                    <Nav.Link>{t('Home')}</Nav.Link>
                </Link>
                {renderMenuItems(LeftMenu)}
            </Nav>
            <Navbar.Collapse id='navbar' className='justify-content-end'>
                <Nav className='ml-auto pr-md-6'>
                    <GameContextMenu />
                    {numGames}
                    {!currentGame && (
                        <ServerStatus
                            connected={lobbySocketConnected}
                            connecting={lobbySocketConnecting}
                            serverType='Lobby'
                            responseTime={lobbyResponse}
                        />
                    )}
                    {currentGame?.started && (
                        <ServerStatus
                            connected={gameConnected}
                            connecting={gameConnecting}
                            serverType='Game server'
                            responseTime={gameResponse}
                        />
                    )}
                    {renderMenuItems(RightMenu)}
                    <ProfileDropdown menu={ProfileMenu} user={props.user} />

                    <Nav.Link
                        target='_blank'
                        rel='noopener noreferrer'
                        href='https://www.patreon.com/ashteki'>
                        <span className='patreon-link'>Patreon</span>
                    </Nav.Link>
                </Nav>

            </Navbar.Collapse>
        </Navbar>
    );
}

MyNavBar = (props) => {
  const links = [
    {
      id: 0,
      text: "Dashboard",
      href: "/dashboard",
      icon: <BsCompass className="icon"></BsCompass>,
      testId: "navbar-dashboard",
    },
    {
      id: 1,
      text: "MyRoutes",
      href: "/routes/MyRoutes",
      icon: <BsMap className="icon"></BsMap>,
      testId: "navbar-my-routes",
    },
    {
      id: 2,
      text: "UploadRoute",
      href: "/routes/upload",
      icon: <BsArrowBarUp className="icon"></BsArrowBarUp>,
      testId: "navbar-upload-route",
    },
    {
      id: 3,
      text: "Notifications",
      href: "/notifications",
      icon: <BsBell className="icon"></BsBell>,
      testId: "navbar-notifications",
    },
  ];

  const forTestingPurposes = "http://testing.inrupt.net/profile/card#me";

  if (!props.loaded) {
    getWebId().then((id) => {
      props.updateWebId(id);
      props.loadFriendsRequest();
      props.loadEmailRequest();
      if (id === null) {
        //just for testing is needed, fucking travis
        createBaseStructure(forTestingPurposes).then((response) => {
          //checkInboxForSharedRoutes(forTestingPurposes);
        });
      } else {
        createBaseStructure(id).then((response) => {
          //checkInboxForSharedRoutes(id);
        });
      }
      props.loadRoutesRequest();
      props.contentLoaded();
    });
  }

  const dropDownElements = [
    {
      id: 0,
      text: <FormattedMessage id="MyProfile" />,
      href: "/profile",
      testId: "navbar-my-profile",
    },
    {
      id: 1,
      text: <FormattedMessage id="Settings" />,
      href: "/settings",
      testId: "navbar-settings",
    },
    {
      id: 2,
      text: <FormattedMessage id="MyGroups" />,
      href: "/profile/groups",
      testId: "navbar-groups",
    },
    {
      id: 3,
      text: <FormattedMessage id="LogOut" />,
      href: "#/",
      testId: "navbar-logout",
    },
  ];

  return (
    <Navbar className="bg-light" fixed="top" bg="light" expand="lg">
      <LinkContainer to="/dashboard">
        <Navbar.Brand data-testid="navbar-brand" href="/dashboard">
          <img
            alt="Viade logo"
            src={process.env.PUBLIC_URL + "/viade-logo.svg"}
          ></img>
          <span>{props.brandName}</span>
        </Navbar.Brand>
      </LinkContainer>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse className="justify-content-end" id="basic-navbar-nav">
        <Nav className="justify-content-end" activeKey="/home">
          {<ThemePicker></ThemePicker>}
          {links.map((link) => {
            return (
              <span key={link.id}>
                <LinkContainer to={link.href}>
                  <Nav.Link
                    data-testid={link.testId}
                    to={link.href}
                    key={link.id}
                    href={link.href}
                    className="nav-link"
                    onClick={props.clearRoute}
                  >
                    {link.icon}
                    <FormattedMessage id={link.text} />
                  </Nav.Link>
                </LinkContainer>
              </span>
            );
          })}

          <NavDropdown
            variant="secondary"
            drop="left"
            title={<BsPerson className="icon"></BsPerson>}
          >
            {dropDownElements.map((element) => {
              return (
                <NavDropdown.Item
                  data-testid={element.testId}
                  key={element.id}
                  href={element.href}
                  onClick={props.clearRoute}
                >
                  {element.id === 3 ? (
                    <LogoutButton>{element.text}</LogoutButton>
                  ) : (
                    <LinkContainer to={element.href}>
                      <Nav.Link>{element.text}</Nav.Link>
                    </LinkContainer>
                  )}
                </NavDropdown.Item>
              );
            })}
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}