react-bootstrap#Nav TypeScript Examples

// The 'tab-custom' role is used to override a default 'tab' role that resulted in tab links not being keyboard accessible.
function QueueSettingsEditor(props: QueueSettingsProps) {
    return (
        <Tab.Container id='add-queue-editor' defaultActiveKey='general'>
            <Row>
                <Col md={3} sm={3}>
                    <div className='mt-4'>
                        <Link to={`/manage/${props.queue.id}/`}>
                            <FontAwesomeIcon icon={faChevronLeft} /> Back to Queue
                        </Link>
                    </div>
                    <Nav variant='pills' className='flex-column mt-4'>
                        <Nav.Item>
                            <Nav.Link eventKey='general' role='tab-custom' tabIndex={0} aria-label='General Tab'>
                                General
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item>
                            <Nav.Link eventKey='hosts' role='tab-custom' tabIndex={0} aria-label='Manage Hosts Tab'>
                                Manage Hosts
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item>
                            <Nav.Link eventKey='delete' role='tab-custom' tabIndex={0} aria-label='Delete Queue Tab'>
                                Delete Queue
                            </Nav.Link>
                        </Nav.Item>
                    </Nav>
                </Col>
                <Col md={6} sm={9}>
                    <h1>Settings</h1>
                    <Tab.Content aria-live='polite'>
                        <Tab.Pane eventKey='general'>
                            <GeneralEditor {...props} />
                            <div className='mt-4'>
                                <Button
                                    variant='primary'
                                    className={buttonSpacing}
                                    disabled={props.disabled}
                                    aria-label='Save Changes'
                                    onClick={props.onSaveGeneralClick}
                                >
                                    Save Changes
                                </Button>
                                <Button
                                    variant='link'
                                    className={'text-danger ' + buttonSpacing}
                                    disabled={props.disabled}
                                    aria-label='Discard Changes'
                                    onClick={props.onDiscardGeneralClick}
                                >
                                    Discard Changes
                                </Button>
                            </div>
                        </Tab.Pane>
                        <Tab.Pane eventKey='hosts'>
                            <ManageHostsEditor {...props} />
                        </Tab.Pane>
                        <Tab.Pane eventKey='delete'>
                            <h2>Delete Queue</h2>
                            <p>Delete the entire queue, including all hosts and current meetings in queue. <strong>This cannot be undone.</strong></p>
                            <div className='mt-4'>
                                <Button variant='danger' disabled={props.disabled} aria-label='Delete Queue' onClick={props.onDeleteClick}>
                                    Delete Queue
                                </Button>
                            </div>
                        </Tab.Pane>
                    </Tab.Content>
                </Col>
            </Row>
        </Tab.Container>
    );
}

// The 'tab-custom' role is used to override a default 'tab' role that resulted in tab links not being keyboard accessible.
function AddQueueEditor(props: AddQueueEditorProps) {
    return (
        <Tab.Container id='add-queue-editor' defaultActiveKey='general' activeKey={props.activeKey} onSelect={props.onTabSelect}>
            <Row>
                <Col md={3} sm={3}>
                    <Nav variant='pills' className='flex-column mt-5'>
                        <Nav.Item>
                            <Nav.Link eventKey='general' role='tab-custom' tabIndex={0} aria-label='General Tab'>
                                General
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item>
                            <Nav.Link eventKey='hosts' role='tab-custom' tabIndex={0} aria-label='Manage Hosts Tab'>
                                Manage Hosts
                            </Nav.Link>
                        </Nav.Item>
                    </Nav>
                </Col>
                <Col md={6} sm={9}>
                    <h1>Add Queue</h1>
                    <Tab.Content aria-live='polite'>
                        <Tab.Pane eventKey='general'>
                            <GeneralEditor {...props} />
                            <div className='mt-4'>
                                <Button
                                    variant='primary'
                                    className={buttonSpacing}
                                    aria-label='Next'
                                    disabled={props.disabled}
                                    onClick={props.onGeneralNextClick}
                                >
                                    Next
                                </Button>
                                <CancelAddButton disabled={props.disabled} />
                            </div>
                        </Tab.Pane>
                        <Tab.Pane eventKey='hosts'>
                            <ManageHostsEditor {...props} />
                            <div className='mt-4'>
                                <Button
                                    variant='primary'
                                    className={buttonSpacing}
                                    aria-label='Back'
                                    disabled={props.disabled}
                                    onClick={props.onBackClick}
                                >
                                    Back
                                </Button>
                                <Button
                                    variant='primary'
                                    className={buttonSpacing}
                                    aria-label='Finish Adding Queue'
                                    disabled={props.disabled}
                                    onClick={props.onFinishClick}
                                >
                                    Finish Adding Queue
                                </Button>
                                <CancelAddButton disabled={props.disabled} />
                            </div>
                        </Tab.Pane>
                    </Tab.Content>
                </Col>
            </Row>
        </Tab.Container>
    );
}

export default function HeaderNavbar() {
    return (
        <Navbar expand="sm" className={styles.nav}>
            <section className="container">
                <Link href="/">
                    <a>
                        <img src="/images/logo1.png" alt="wtfresume logo (resume builder)" className={styles.logo} />
                    </a>
                </Link>

                <Navbar.Toggle aria-controls="basic-navbar-nav" className={styles.navbarNav}>
                    <i className="material-icons">menu</i>
                </Navbar.Toggle>

                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="ml-auto">
                        <div className={styles.navItem}>
                            <Link href="/resume-builder">
                                <a>Create My Resume</a>
                            </Link>
                        </div>

                        <div className={styles.navItem}>EN</div>

                        <div className={styles.navItem}>
                            <a href="https://github.com/sramezani/resume-builder" target="_blank" rel="noopener noreferrer">
                                github
                            </a>
                        </div>
                    </Nav>
                </Navbar.Collapse>
            </section>
        </Navbar>
    );
}

Header: React.FC = () => {

  const location = useLocation()
  const networkContext = useContext(NetworkContext)
  const { isIsolatedServer } = networkContext!

  const [showSearchbar, setShowSearchbar] = useState(false)

  useEffect(() => {
    if (location.pathname !== '/') {
      setShowSearchbar(true)
    }
    else {
      setShowSearchbar(false)
    }
  }, [location])

  return (
    <>
      <Navbar className="custom-navbar" fixed="top">
        <Nav>
          <QueryPreservingLink to={'/'} >
            <Navbar.Brand className="custom-navbar-brand">
              <img
                src={ZilLogo}
                alt=""
                width="30"
                height="30"
                className="d-inline-block align-top"
              />
              {' '}
              <span className='app-name'>DEVEX</span>
            </Navbar.Brand>
          </QueryPreservingLink>
          <QueryPreservingLink className='navbar-link' to={'/labels'}>Labels</QueryPreservingLink>
          <QueryPreservingLink className='navbar-link' to={'/networks'}>Networks</QueryPreservingLink>
        </Nav>
        {showSearchbar
          ? <div className="header-searchbar">
            <Searchbar isISSearchbar={isIsolatedServer!} isHeaderSearchbar={true} />
          </div>
          : null}
        <NetworkSwitcher />
      </Navbar>
    </>
  )
}

NetworkSwitcher: React.FC = () => {

  const history = useHistory()
  const networkName = useNetworkName()
  const networkUrl = useNetworkUrl()

  const userPrefContext = useContext(UserPrefContext)
  const { networkMap } = userPrefContext!

  const [showDropdown, setShowDropdown] = useState(false)
  const [currentNetwork, setCurrentNetwork] = useState(networkName)

  useEffect(() => {
    setCurrentNetwork(networkName)
  }, [networkName])

  const changeNetwork = useCallback((k: string) => {
    history.push({
      pathname: '/',
      search: '?' + new URLSearchParams({ network: k }).toString()
    })
  }, [history])

  return (
    <Nav style={{ minWidth: '120px' }}>
      <OverlayTrigger placement='left'
        overlay={<Tooltip id={'network-tt'}> {networkUrl} </Tooltip>}>
        <FontAwesomeIcon className='info-icon' icon={faInfoCircle} />
      </OverlayTrigger>
      <NavDropdown onToggle={(e: boolean) => { setShowDropdown(e) }}
        show={showDropdown} title={currentNetwork} id="header-network-dropdown">
        {networkMap.size === 0
          ? <div className='text-center'>
            No networks
          </div>
          : Array.from(networkMap, ([k, v]) => (
            <div key={k} className='node-div'>
              <NavDropdown.Item className='node-item' onClick={() => {
                if (currentNetwork !== v) {
                  changeNetwork(k)
                }
              }}>
                {v}
              </NavDropdown.Item>
            </div>
          ))}
      </NavDropdown>
    </Nav>
  )
}

WalletConnectButton: React.FC<WalletConnectButtonProps> = props => {
  const { className, onClickHandler, buttonStyle } = props;
  return (
    <Nav.Link className={className} onClick={onClickHandler}>
      <NavBarButton buttonStyle={buttonStyle} buttonText={<Trans>Connect</Trans>} />
    </Nav.Link>
  );
}

NavPage = ({ path, description }: { path: string; description: string }) => {
    const route = `/${Manager.region()}/${path}`;
    return (
        <Nav.Link as={Link} to={route} eventKey={route}>
            {description}
        </Nav.Link>
    );
}

Header = (props: any) => {

    const navigation = useNavigation();
    const history = useHistory();
    const { t } = useTranslation();
    const { keycloak } = useKeycloak();

    const [userName, setUserName] = React.useState('');
    const [isInit, setIsInit] = React.useState(false)

    const [environmentName] = useLocalStorage('environmentName', '');

    React.useEffect(() => {
        if (navigation)
            setIsInit(true);
    }, [navigation])

    // set user name from keycloak
    React.useEffect(() => {

        if (keycloak.idTokenParsed) {
            setUserName((keycloak.idTokenParsed as any).name);
        }

    }, [keycloak])

    const handleLogout = () => {
        keycloak.logout({ redirectUri: window.location.origin + navigation!.calculatedRoutes.landing });
    }

    const changePasswordUrl = keycloak.authServerUrl + 'realms/' + keycloak.realm + '/account/password';

    return (!isInit ? <></> :
        <Container className='position-relative'>
            {/* simple header with logo */}

            {/* user icon and user name */}
            <Row id='qt-header'>
                <Image id='c19-logo' src={C19Logo} />
                <span className='header-font my-auto mx-1 pt-1'>
                    {t('translation:title')}
                    {!environmentName
                        ? <></>
                        : <span className='environment-font my-auto mx-1'>
                            {'\n' + environmentName}
                        </span>
                    }
                </span>
                {!(environmentName && history.location.pathname === navigation?.routes.root)
                    ? <></>
                    : < span className='environment-info-text py-3'>
                        <Trans>
                            {t('translation:environment-info1')}
                            {<a
                                href={t('translation:environment-info-link')}
                                target='blank'
                            >
                                {t('translation:environment-info-link')}
                            </a>}
                            {'.'}
                        </Trans>
                    </span>
                }

            </Row>
            {/* {!environmentName
                ? <></>
                : <Row id='qt-environment'>
                    <span className='header-font my-auto mx-1'>
                        {environmentName}
                    </span>
                </Row>
            } */}
            <Navbar id='user-container' >
                <NavDropdown
                    className="nav-dropdown-title"
                    title={userName}
                    id="responsive-navbar-nav"
                >
                    <Nav.Link
                        className='mx-0 dropdown-item'
                        onClick={handleLogout}
                    >
                        {t('translation:logout')}
                    </Nav.Link>
                    <NavDropdown.Divider className='m-0' />
                    <Nav.Link className='mx-0 dropdown-item' href={changePasswordUrl} target='passwordchange'>
                        {t('translation:change-password')}
                    </Nav.Link>
                </NavDropdown>
            </Navbar>
        </Container >
    )
}

NavBar = () => {
  const activeAccount = useAppSelector(state => state.account.activeAccount);
  const stateBgColor = useAppSelector(state => state.application.stateBackgroundColor);
  const isCool = useAppSelector(state => state.application.isCoolBackground);
  const history = useHistory();
  const ethBalance = useEtherBalance(config.addresses.nounsDaoExecutor);
  const lidoBalanceAsETH = useLidoBalance();
  const treasuryBalance = ethBalance && lidoBalanceAsETH && ethBalance.add(lidoBalanceAsETH);
  const daoEtherscanLink = buildEtherscanHoldingsLink(config.addresses.nounsDaoExecutor);
  const [isNavExpanded, setIsNavExpanded] = useState(false);

  const useStateBg =
    history.location.pathname === '/' ||
    history.location.pathname.includes('/noun/') ||
    history.location.pathname.includes('/auction/');

  const nonWalletButtonStyle = !useStateBg
    ? NavBarButtonStyle.WHITE_INFO
    : isCool
    ? NavBarButtonStyle.COOL_INFO
    : NavBarButtonStyle.WARM_INFO;

  const closeNav = () => setIsNavExpanded(false);

  return (
    <>
      <Navbar
        expand="xl"
        style={{ backgroundColor: `${useStateBg ? stateBgColor : 'white'}` }}
        className={classes.navBarCustom}
        expanded={isNavExpanded}
      >
        <Container style={{ maxWidth: 'unset' }}>
          <div className={classes.brandAndTreasuryWrapper}>
            <Navbar.Brand as={Link} to="/" className={classes.navBarBrand}>
              <img src={logo} className={classes.navBarLogo} alt="Nouns DAO logo" />
            </Navbar.Brand>
            {Number(CHAIN_ID) !== 1 && (
              <Nav.Item>
                <img className={classes.testnetImg} src={testnetNoun} alt="testnet noun" />
                TESTNET
              </Nav.Item>
            )}
            <Nav.Item>
              {treasuryBalance && (
                <Nav.Link
                  href={daoEtherscanLink}
                  className={classes.nounsNavLink}
                  target="_blank"
                  rel="noreferrer"
                >
                  <NavBarTreasury
                    treasuryBalance={Number(utils.formatEther(treasuryBalance)).toFixed(0)}
                    treasuryStyle={nonWalletButtonStyle}
                  />
                </Nav.Link>
              )}
            </Nav.Item>
          </div>
          <Navbar.Toggle className={classes.navBarToggle} aria-controls="basic-navbar-nav" onClick={() => setIsNavExpanded(!isNavExpanded)} />
          <Navbar.Collapse className="justify-content-end">
            <Nav.Link as={Link} to="/vote" className={classes.nounsNavLink} onClick={closeNav} >
              <NavBarButton
                buttonText={<Trans>DAO</Trans>}
                buttonIcon={<FontAwesomeIcon icon={faUsers} />}
                buttonStyle={nonWalletButtonStyle}
              />
            </Nav.Link>
            <Nav.Link
              href={externalURL(ExternalURL.notion)}
              className={classes.nounsNavLink}
              target="_blank"
              rel="noreferrer"
              onClick={closeNav}
            >
              <NavBarButton
                buttonText={<Trans>Docs</Trans>}
                buttonIcon={<FontAwesomeIcon icon={faBookOpen} />}
                buttonStyle={nonWalletButtonStyle}
              />
            </Nav.Link>
            <Nav.Link
              href={externalURL(ExternalURL.discourse)}
              className={classes.nounsNavLink}
              target="_blank"
              rel="noreferrer"
              onClick={closeNav}
            >
              <NavBarButton
                buttonText={<Trans>Discourse</Trans>}
                buttonIcon={<FontAwesomeIcon icon={faComments} />}
                buttonStyle={nonWalletButtonStyle}
              />
            </Nav.Link>
            <Nav.Link as={Link} to="/playground" className={classes.nounsNavLink}  onClick={closeNav}>
              <NavBarButton
                buttonText={<Trans>Playground</Trans>}
                buttonIcon={<FontAwesomeIcon icon={faPlay} />}
                buttonStyle={nonWalletButtonStyle}
              />
            </Nav.Link>
            <NavLocaleSwitcher buttonStyle={nonWalletButtonStyle} />
            <NavWallet address={activeAccount || '0'} buttonStyle={nonWalletButtonStyle} />{' '}
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>
  );
}

Menu = (): JSX.Element => {
  const dispatch = useDispatch();

  const state: RootStateType = useSelector((state) => state) as RootStateType;

  const [handle, setHandle] = useState(
    state.userList.handles.length ? state.userList.handles.toString() : ""
  );
  console.log(state.userList.handles.toString());
  useEffect(() => {
    fetchProblemList(dispatch);
    fetchContestList(dispatch);
    fetchSharedProblemList(dispatch);
  }, []);

  // useEffect(() => {
  //   if (!state.contestList.loading && !state.problemList.loading) sync(true);
  // }, [state.userList]);

  useEffect(() => {
    if (!state.contestList.loading && !state.problemList.loading)
      sync(state.userList.handles.length > 2 ? true : false);
    // console.log(state.contestList.loading);
    // console.log(state.problemList.loading);
  }, [state.userList, state.contestList.loading, state.problemList.loading]);

  const sync = (wait = false) => {
    fetchUserSubmissions(dispatch, state.userList.handles, wait);
  };

  const submitUser = () => {
    // Notification.info({
    //   title: "User submitted!",
    //   duration: 200,
    //   description: "hh",
    // });
    // toast.error("? Wow so easy!", {
    //   position: "bottom-right",
    //   autoClose: 2001,
    //   hideProgressBar: false,
    //   closeOnClick: true,
    //   pauseOnHover: true,
    //   draggable: true,
    //   progress: undefined,
    // }); 
    fetchUsers(dispatch, handle);
  };

  return (
    <Navbar
      className={
        "navbar navbar-expand-lg p-2 ps-4 pe-4 " + state.appState.theme.navbar
      }
      expand="md"
    >
      <div className="container p-0">
        <Link to="/" className="navbar-brand" href="#">
          CFTracker
        </Link>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />

        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ms-auto mt-2 mt-lg-0">
            <li className="nav-item active">
              <Link to={Path.Issues} className="nav-link" href="#">
                {/* <span className="p-1">{<FontAwesomeIcon icon={faBars} />}</span> */}
                <span>Issues</span>
              </Link>
            </li>
            <li className="nav-item active">
              <Link to={Path.PROBLEMS} className="nav-link" href="#">
                {/* <span className="p-1">{<FontAwesomeIcon icon={faBars} />}</span> */}
                <span>Problems</span>
              </Link>
            </li>
            <li className="nav-item">
              <Link to={Path.CONTESTS} className="nav-link" href="#">
                {/*  <span className="p-1">  {<FontAwesomeIcon icon={faListAlt} />}  </span>*/}
                <span>Contests</span>
              </Link>
            </li>

            <li className="nav-item">
              <OverlayTrigger
                trigger="click"
                placement="bottom"
                key="bottom"
                overlay={
                  <Popover
                    id="popover-basic"
                    className={state.appState.theme.bgText}
                  >
                    <Popover.Header
                      as="h3"
                      className={state.appState.theme.bgText}
                    >
                      <div className="d-flex align-items-center">
                        <span className={state.appState.theme.bgText}>
                          CFTracker (Created by{" "}
                          <a
                            href="https://codeforces.com/profile/bashem"
                            className={" " + state.appState.theme.text}
                            target="__blank"
                          >
                            bashem
                          </a>
                          )
                        </span>
                      </div>
                    </Popover.Header>
                    <Popover.Body className={state.appState.theme.bgText}>
                      <ul className="list-group list-group-flush">
                        <li
                          className={
                            "list-group-item " + state.appState.theme.bgText
                          }
                        >
                          <span className="pe-2">Source Code</span>
                          <a
                            href="https://github.com/mbashem/cftracker"
                            className="text-secondary pt-1 fs-5"
                            target="__blank"
                          >
                            {<FontAwesomeIcon icon={faGithub} />}
                          </a>
                        </li>
                      </ul>
                    </Popover.Body>
                  </Popover>
                }
              >
                <a
                  href="#"
                  onClick={(e) => e.preventDefault()}
                  className="nav-link"
                  title="Created by Bashem"
                >
                  <FontAwesomeIcon icon={faInfo} />
                </a>
              </OverlayTrigger>
            </li>

            <li className="nav-item">
              <a
                className={"nav-link"}
                href="#"
                title="Change Theme"
                onClick={(e) => {
                  e.preventDefault();
                  if (state.appState.themeMod === ThemesType.DARK)
                    changeAppState(
                      dispatch,
                      AppReducerType.CHANGE_THEME,
                      ThemesType.LIGHT
                    );
                  else
                    changeAppState(
                      dispatch,
                      AppReducerType.CHANGE_THEME,
                      ThemesType.DARK
                    );
                }}
              >
                <FontAwesomeIcon
                  icon={
                    state.appState.themeMod === ThemesType.DARK ? faMoon : faSun
                  }
                />
              </a>
            </li>

            <li className="nav-item">
              <a
                className="nav-link"
                onClick={(e) => {
                  e.preventDefault();
                  sync();
                }}
                title="Refresh Submissions"
                href="#"
              >
                <FontAwesomeIcon icon={faSync} />
              </a>
            </li>

            <li className="nav-item">
              <form
                className="form-inline d-flex my-2 my-lg-0 nav-item"
                onSubmit={(e) => {
                  e.preventDefault();
                  submitUser();
                }}
              >
                <input
                  name="handle"
                  className={"form-control " + state.appState.theme.bgText}
                  type="text"
                  placeholder="handle1,handle2,.."
                  aria-label="handles"
                  value={handle}
                  onChange={(e) => setHandle(e.target.value)}
                />
              </form>
            </li>
          </Nav>
        </Navbar.Collapse>
      </div>
    </Navbar>
  );
}

Navigation: React.FC<IProps> = ({ history, changeMode, initialMode }) => {
  return (
    <div className="shadow-lg sticky-top navBar">
      <Navbar
        collapseOnSelect
        expand="lg"
        bg="info"
        variant="light"
        sticky="top"
      >
        <Link className="nav-link" to="/">
          <img style={{ height: 25, width: 25 }} src={LOGO} alt="LOGOf" />
        </Link>
        <span style={{ color: initialMode ? "grey" : "yellow" }}>☀︎</span>
        <span className="toggle">
          <input
            checked={initialMode}
            onChange={changeMode}
            type="checkbox"
            className="checkbox"
            id="checkbox"
          />
          <label htmlFor="checkbox"></label>
        </span>
        <span style={{ color: initialMode ? "black" : "grey" }}> ☾</span>

        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto">
            <Link style={currentTab(history, "/")} className="nav-link" to="/">
              Home
            </Link>
            <Link
              style={currentTab(history, "/cart")}
              className="nav-link"
              to="/cart"
            >
              Cart
            </Link>
            {isAuthenticated() && (isAuthenticated() as JWT).role === 0 && (
              <Link
                style={currentTab(history, "/user/dashboard")}
                className="nav-link"
                to="/user/dashboard"
              >
                U. Dashboard
              </Link>
            )}
            {isAuthenticated() && (isAuthenticated() as JWT).role === 1 && (
              <Link
                style={currentTab(history, "/admin/dashboard")}
                className="nav-link"
                to="/admin/dashboard"
              >
                A. Dashboard
              </Link>
            )}

            {!isAuthenticated() && (
              <Fragment>
                <Link
                  style={currentTab(history, "/signup")}
                  className="nav-link"
                  to="/signup"
                >
                  SignUp
                </Link>
                <Link
                  style={currentTab(history, "/signin")}
                  className="nav-link"
                  to="/signin"
                >
                  SignIn
                </Link>
              </Fragment>
            )}
            {isAuthenticated() && (
              <span
                className="nav-link signout"
                onClick={() =>
                  signout(() => {
                    history.push("/");
                  })
                }
              >
                Sign Out
              </span>
            )}
          </Nav>
          <Nav>
            <Link
              style={currentTab(history, "/contactus")}
              className="nav-link"
              to="/contactus"
            >
              Contact Us
            </Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  );
}

Topbar = (props: TopbarProps): JSX.Element => {
  const {
    extensions,
    address,
    polkaBtcLoaded,
    balanceDOT,
    balancePolkaBTC,
    vaultClientLoaded,
    relayerLoaded,
    showAccountModal
  } = useSelector((state: StoreType) => state.general);
  const dispatch = useDispatch();
  const { t } = useTranslation();

  const [isRequestPending, setIsRequestPending] = React.useState(false);

  const [accounts, setAccounts] = React.useState<InjectedAccountWithMeta[]>([]);
  React.useEffect(() => {
    if (!extensions.length) return;

    (async () => {
      try {
        const theAccounts = await web3Accounts();
        setAccounts(theAccounts);
      } catch (error) {
        // TODO: should add error handling properly
        console.log('[Topbar] error.message => ', error.message);
      }
    })();
  }, [extensions.length]);

  React.useEffect(() => {
    const fetchData = async () => {
      if (!polkaBtcLoaded || address === '') return;

      updateBalances(dispatch, address, balanceDOT, balancePolkaBTC);
    };
    fetchData();
  }, [address, polkaBtcLoaded, dispatch, balanceDOT, balancePolkaBTC]);

  const requestDOT = async () => {
    if (!polkaBtcLoaded) return;
    setIsRequestPending(true);
    try {
      await props.requestDOT();
      const accountId = window.polkaBTC.api.createType(ACCOUNT_ID_TYPE_NAME, address);
      const balanceDOT = await window.polkaBTC.collateral.balance(accountId);
      dispatch(updateBalanceDOTAction(balanceDOT.toString()));
    } catch (error) {
      console.log(error);
    }
    setIsRequestPending(false);
  };

  const handleAccountModalOpen = () => {
    dispatch(showAccountModalAction(true));
  };

  const handleAccountModalClose = () => {
    dispatch(showAccountModalAction(false));
  };

  let accountLabel;
  if (!extensions.length) {
    accountLabel = 'Connect Wallet';
  } else if (address) {
    // TODO: could memoize
    const matchedAccount = accounts.find(account => account.address === address);
    accountLabel = matchedAccount?.meta.name || address;
  } else {
    accountLabel = 'Select Account';
  }

  return (
    <>
      <Navbar
        id='pbtc-topbar'
        expand='lg'
        className={clsx(
          'top-bar',
          'border-bottom',
          'shadow',
          'bg-default'
        )}>
        {polkaBtcLoaded && (
          <React.Fragment>
            <Navbar.Brand>
              <InterlayRouterLink
                // TODO: hardcoded
                style={{
                  textDecoration: 'none'
                }}
                to={PAGES.home}>
                <PolkabtcLogoIcon
                  fill='currentColor'
                  width={90}
                  height={53} />
              </InterlayRouterLink>
            </Navbar.Brand>
            <Navbar.Toggle aria-controls='basic-navbar-nav' />
            <Navbar.Collapse id='basic-navbar-nav'>
              <Nav className='mr-auto'>
                {polkaBtcLoaded && (
                  // TODO: should use https://reactrouter.com/web/api/NavLink with `activeClassName`
                  <InterlayRouterLink
                    style={{
                      textDecoration: 'none'
                    }}
                    className='nav-link'
                    to={{
                      pathname: PAGES.application,
                      search: queryString.stringify({
                        [QUERY_PARAMETERS.tab]: TAB_IDS.issue
                      })
                    }}>
                    {t('app')}
                  </InterlayRouterLink>
                )}
                {polkaBtcLoaded && (
                  <InterlayRouterLink
                    style={{
                      textDecoration: 'none'
                    }}
                    className='nav-link'
                    to={PAGES.dashboard}>
                    {t('nav_dashboard')}
                  </InterlayRouterLink>
                )}
                {vaultClientLoaded && (
                  <InterlayRouterLink
                    style={{
                      textDecoration: 'none'
                    }}
                    className='nav-link'
                    to={PAGES.vault}>
                    {t('nav_vault')}
                  </InterlayRouterLink>
                )}
                {relayerLoaded && (
                  <InterlayRouterLink
                    style={{
                      textDecoration: 'none'
                    }}
                    className='nav-link'
                    to={PAGES.stakedRelayer}>
                    {t('nav_relayer')}
                  </InterlayRouterLink>
                )}
                {polkaBtcLoaded && (
                  <InterlayRouterLink
                    style={{
                      textDecoration: 'none'
                    }}
                    className='nav-link'
                    to={PAGES.challenges}>
                    {t('nav_challenges')}
                    <NewMarkIcon
                      className='inline-block'
                      width={20}
                      height={20} />
                  </InterlayRouterLink>
                )}
                <InterlayRouterLink
                  style={{
                    textDecoration: 'none'
                  }}
                  className='nav-link'
                  to={PAGES.feedback}>
                  {t('feedback.feedback')}
                </InterlayRouterLink>
                <InterlayLink
                  style={{
                    textDecoration: 'none'
                  }}
                  className='nav-link'
                  href='https://docs.polkabtc.io/#/'
                  target='_blank'
                  rel='noopener noreferrer'>
                  {t('nav_docs')}
                </InterlayLink>
              </Nav>
              {props.address !== undefined && (
                <>
                  {address === '' ? (
                    <Nav
                      id='account-button'
                      className='d-inline'>
                      <Button
                        variant='outline-account-not-connected'
                        className='nav-bar-button'
                        onClick={handleAccountModalOpen}>
                        {accountLabel}
                      </Button>
                    </Nav>
                  ) : (
                    <>
                      <Nav className='d-inline'>
                        <InterlayLink
                          target='_blank'
                          rel='noopener noreferrer'
                          href='https://testnet-faucet.mempool.co/'
                          style={{ textDecoration: 'none' }}>
                          <Button
                            variant='outline-bitcoin'
                            className='nav-bar-button'>
                            {t('request_btc')}
                          </Button>
                        </InterlayLink>
                        <ButtonMaybePending
                          variant='outline-polkadot'
                          className='nav-bar-button'
                          isPending={isRequestPending}
                          onClick={requestDOT}>
                          {t('request_dot')}
                        </ButtonMaybePending>
                      </Nav>
                      <Balances
                        balanceDOT={balanceDOT}
                        balancePolkaBTC={balancePolkaBTC} />
                      <Nav
                        id='account-button'
                        className='d-inline'>
                        <Button
                          variant='outline-account'
                          className='nav-bar-button'
                          onClick={handleAccountModalOpen}>
                          {accountLabel}
                        </Button>
                      </Nav>
                    </>
                  )}
                </>
              )}
            </Navbar.Collapse>
          </React.Fragment>
        )}
      </Navbar>
      <AccountModal
        open={showAccountModal}
        onClose={handleAccountModalClose} />
    </>
  );
}

export function SideNavbar(props: any) {
  const [login, setLogin] = useState('')
  const [myChannelLink, setMyChannelLink] = useState('')

  useEffect(() => {
    const load = async () => {
      const login = localStorage.getItem('SNProfileID')

      if (login) {
        const user = (await AccountService.getAccount(login)) as any

        const ringItem = user.keyring[0]
        setLogin(user.nickname)
        setMyChannelLink(`${ringItem.type}:${ringItem.username}`)
      }
    }

    void load()
  }, [])

  const logOut = async () => {
    //TODO: logout logic

    const profileID = localStorage.getItem('SNProfileID')

    const user = await AccountService.logout(profileID)
    const accountsInit = (await AccountService.getAccounts()) as any
    localStorage.removeItem('SNProfileID')
    console.log(accountsInit)
    if (accountsInit.length > 0) {
      localStorage.setItem('SNProfileID', accountsInit[0]._id)
    }
    window.location.reload()
  }

  return (
    <Navbar bg="white" expand="lg" id="layoutNav" className="bg_white fixed-left">
      <Navbar.Brand>
        <img src={SpeakLogo} />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav">
        <span className="navbar-toggler-icon"></span>
      </Navbar.Toggle>
      <Navbar.Collapse>
        <Nav className="mr-auto nav_dist">
          {login && (
            <NavDropdown
              id="nav-dropdown"
              title={
                <>
                  <div className="nav_icons">
                    <VscKey size="21px" />
                  </div>
                  <span>@{login}</span>
                </>
              }
            >
              <NavDropdown.Item href="#/accounts">Switch account</NavDropdown.Item>
              <NavDropdown.Item href={`#/user/${myChannelLink}`}>Go to my channel</NavDropdown.Item>
              <NavDropdown.Item href="#/login">Add account</NavDropdown.Item>
              {login && (
                <NavDropdown.Item
                  onClick={() => {
                    logOut()
                  }}
                >
                  Log out
                </NavDropdown.Item>
              )}
            </NavDropdown>
          )}
          {!login && (
            <Nav.Link href="#/login" className="display-mobile">
              <button className="btn btn-dark text-white btn-sm">Add account</button>
            </Nav.Link>
          )}
          <hr />
          <Nav.Link href="#/">
            <div className="nav_icons">
              <img src={iconHome} height="14px" />
            </div>
            Home
          </Nav.Link>
          <Nav.Item></Nav.Item>
          <Nav.Link href="#/trends">
            <div className="nav_icons">
              <img src={iconTrend} height="21px" />
            </div>
            Trending Content
          </Nav.Link>
          <Nav.Link href="#/new">
            <div className="nav_icons">
              <img src={iconNewContent} height="17px" />
            </div>
            New Content
          </Nav.Link>

          <NavDropdown
            id="nav-dropdown"
            title={
              <>
                <div className="nav_icons">
                  <img src={shakeHands} style={{ height: '21px' }} />
                </div>
                Communities
              </>
            }
          >
            <Nav.Link href="#/communities">
              <FaGlobe /> All Communities...
            </Nav.Link>
            <NavDropdown.Item href="#/community/hive:hive-181335">
              <FaUsers /> Threespeak
            </NavDropdown.Item>
            <NavDropdown.Item href="#/community/hive:hive-153014">
              <FaUsers /> Citizen Journalists
            </NavDropdown.Item>

            <NavDropdown.Item href="#/community/hive:hive-112355">
              <FaUsers /> Threeshorts
            </NavDropdown.Item>
            <NavDropdown.Item href="#/community/hive:hive-129768">
              <FaUsers />
              &nbsp;Coronavirus Pandemic
            </NavDropdown.Item>
            <NavDropdown.Item href="#/community/hive:hive-196427">
              <FaUsers /> &nbsp;COVID-19
            </NavDropdown.Item>
          </NavDropdown>
          <Nav.Link href="#/leaderboard">
            <div className="nav_icons">
              <img src={iconLeaderboard} height="12px" />
            </div>
            Leaderboard
          </Nav.Link>
          <Nav.Link href="#/newcomers">
            <div className="nav_icons">
              <img src={iconNewcomer} height="19px" />
            </div>
            First Uploads
          </Nav.Link>
          <Nav.Link href="#/uploader">
            <div className="nav_icons">
              <FaToolbox />
            </div>
            Uploader
          </Nav.Link>
          <Nav.Link href="#/creatorstudio">
            <div className="nav_icons">
              <FaToolbox />
            </div>
            Creator Studio
          </Nav.Link>
          <NavDropdown
            id="nav-dropdown"
            title={
              <>
                <div className="nav_icons">
                  <BsFillGearFill style={{ height: '21px' }} />
                </div>
                Settings
              </>
            }
          >
            <Nav.Link href="#/blocklist">
              <FaGlobe /> Blocklist
            </Nav.Link>
            <Nav.Link href="#/pins">
              <FaGlobe /> Pins
            </Nav.Link>
            <Nav.Link href="#/ipfsconsole">
              <FaGlobe /> Ipfs Console
            </Nav.Link>
          </NavDropdown>
        </Nav>

        <Nav>
          <li className="nav-item">
            <div className="pad_l">
              <h5>3Speak</h5>
            </div>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://3speak.co/intl/about_us">
              About us
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://3speak.co/intl/about_us">
              FAQ
            </a>
          </li>

          <li className="nav-item text-center">
            <a
              className=""
              target="_blank"
              href="https://twitter.com/3speakonline?utm_source=3speak.co"
            >
              <FaTwitter size={28} />
            </a>
            <a className="ml-2" target="_blank" href="https://t.me/threespeak?utm_source=3speak.co">
              <FaTelegram size={28} />
            </a>
            <a
              className="ml-2"
              target="_blank"
              href="https://discord.me/3speak?utm_source=3speak.co"
            >
              <i className="fab fa-discord text-muted fa-2x"></i>
              <FaDiscord size={28} />
            </a>
            <a
              className="ml-2"
              target="_blank"
              title="Visit Our Blog"
              href="https://hive.blog/@threespeak"
            >
              <img
                style={{ width: '32px', marginTop: '-15px', color: 'black' }}
                src={iconBlog}
                alt=""
              />
            </a>
          </li>

          <Dropdown title="Find us" className="nav-item dropdown mt-2 display-mobile">
            <Dropdown.Toggle
              className="btn btn-secondary btn-sm dropdown-toggle"
              variant="secondary"
              data-toggle="dropdown"
              aria-haspopup="true"
            >
              Find us
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <a className="dropdown-item" href="https://t.me/threespeak?utm_source=3speak.co">
                Telegram
              </a>
              <a className="dropdown-item" href="https://discord.me/3speak?utm_source=3speak.co">
                Discord
              </a>
              <a
                className="dropdown-item"
                target="_blank"
                href="https://twitter.com/3speakonline?utm_source=3speak.co"
              >
                Twitter
              </a>
            </Dropdown.Menu>
          </Dropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

render() {
        return (
            <>
                <Navbar id={"navigation"} bg={"dark"} variant={"dark"} expand={"lg"}>
                    <Container fluid>
                        <Navbar.Brand as={Link} to="/" title="Atlas Academy Database">
                            Atlas Academy DB
                        </Navbar.Brand>
                        <Navbar.Toggle />

                        <Navbar.Collapse>
                            <Nav activeKey={this.props.location.pathname}>
                                <NavPage path="servants" description="Servants" />
                                <NavPage path="craft-essences" description="Craft Essences" />
                                <NavPage path="wars" description="Wars" />
                                <NavDropdown title="Other" id="dropdown-other">
                                    <NavDropdownPage path="command-codes" description="Command Codes" />
                                    <NavDropdownPage path="mystic-codes" description="Mystic Codes" />
                                    <NavDropdownPage path="items" description="Materials" />
                                    <NavDropdownPage path="events" description="Events" />
                                    <NavDropdownPage path="bgms" description="BGMs" />
                                    <NavDropdownPage path="master-missions" description="Master Missions" />
                                </NavDropdown>
                                <NavDropdown title="Search" id="dropdown-search">
                                    <NavDropdownPage path="entities" description="Entities" />
                                    <NavDropdownPage path="skills" description="Skills" />
                                    <NavDropdownPage path="noble-phantasms" description="Noble Phantasms" />
                                    <NavDropdownPage path="funcs" description="Functions" />
                                    <NavDropdownPage path="buffs" description="Buffs" />
                                    <NavDropdownPage path="quests" description="Quests" />
                                    <NavDropdownPage path="scripts" description="Scripts" />
                                </NavDropdown>
                                <NavDropdown title="Changelog" id="dropdown-search">
                                    <NavDropdownPage path="changes" description="Master Data" />
                                    <NavDropdownPage path="enemy-changes" description="Enemy Data" />
                                </NavDropdown>
                            </Nav>
                            <Nav className={"ml-auto icons"} activeKey="">
                                <Row>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.JP)}
                                            className={`nav-link ${this.regionClass(Region.JP)}`}
                                        >
                                            <JPFlag title="View data from the JP version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.NA)}
                                            className={`nav-link ${this.regionClass(Region.NA)}`}
                                        >
                                            <USFlag title="View data from the NA version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.CN)}
                                            className={`nav-link ${this.regionClass(Region.CN)}`}
                                        >
                                            <CNFlag title="View data from the CN version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.KR)}
                                            className={`nav-link ${this.regionClass(Region.KR)}`}
                                        >
                                            <KRFlag title="View data from the KR version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.TW)}
                                            className={`nav-link ${this.regionClass(Region.TW)}`}
                                        >
                                            <TWFlag title="View data from the TW version" />
                                        </Link>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col>
                                        <Nav.Link
                                            href="https://atlasacademy.io/discord"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            <FontAwesomeIcon icon={faDiscord} title="Atlas Academy Discord" />
                                        </Nav.Link>
                                    </Col>
                                    <Col>
                                        <Nav.Link
                                            href="https://twitter.com/aacademy_fgo"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            <FontAwesomeIcon icon={faTwitter} title="Atlas Academy Twitter" />
                                        </Nav.Link>
                                    </Col>
                                    <Col>
                                        <Nav.Link
                                            href="https://github.com/atlasacademy/apps"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            <FontAwesomeIcon icon={faGithub} title="Atlas Academy DB Github" />
                                        </Nav.Link>
                                    </Col>
                                </Row>
                                <Button variant={"primary"} onClick={() => this.showSettings()}>
                                    <FontAwesomeIcon icon={faCog} title="Settings" />
                                </Button>
                            </Nav>
                        </Navbar.Collapse>
                    </Container>
                </Navbar>

                <Modal show={this.state.showSettings} onHide={() => this.hideSettings()}>
                    <Modal.Header>
                        <Modal.Title>Settings</Modal.Title>
                        <button className="modal-close" onClick={() => this.hideSettings()}>
                            <FontAwesomeIcon icon={faXmark} title="Close Settings" />
                        </button>
                    </Modal.Header>
                    <Modal.Body>
                        <SettingForm language={this.props.language} theme={this.props.theme} />
                    </Modal.Body>
                </Modal>
            </>
        );
    }

render() {
    const childProps = {
      isAuthenticated: this.state.isAuthenticated,
      userHasAuthenticated: this.userHasAuthenticated,
      showNetworkLatency: this.state.showNetworkLatency,
    };

    return (
      !this.state.isAuthenticating && (
        <div className="App container">
          <Navbar
            fluid
            collapseOnSelect
            style={{
              paddingBottom: "40px",
              paddingLeft: "5px",
              paddingRight: "5px",
              width: "auto",
            }}
          >
            <Navbar.Header>
              <Navbar.Brand>
                <Link to="/">
                  <span className="orange" style={{ fontSize: "19px" }}>
                    <img src={bookstore} alt="bookstore" /> EDGE COMMERCE DEMO
                  </span>
                </Link>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            {this.state.isAuthenticated ? (
              <>
                <Navbar.Text style={{ marginTop: "10px" }}>
                  <button
                    className="btn btn-orange no-radius"
                    onClick={this.renderNetworkLatency}
                    style={{ marginRight: "5px" }}
                  >
                    <div
                      style={{
                        fontSize: "16px",
                        color: "#ffffff",
                        fontWeight: "bold",
                      }}
                      ref={this.performanceButton}
                    >
                      View Latency Stats
                    </div>
                  </button>
                  {/* <span
                    className="navbar-items-font-style"
                    style={{ marginLeft: "3vw", fontSize: "24px" }}
                  >
                    Latency :
                  </span>
                  <span
                    className="input navbar-items-font-style"
                    role="textbox"
                    style={{ fontSize: "24px" }}
                  >
                    {this.state.showLatestNetworkLatencyValue}
                  </span> */}
                </Navbar.Text>
              </>
            ) : null}
            <Navbar.Collapse>
              <Nav pullRight style={{ paddingTop: "2px" }}>
                {this.state.isAuthenticated
                  ? this.showLoggedInBar()
                  : this.showLoggedOutBar()}
              </Nav>
            </Navbar.Collapse>
          </Navbar>
          <Routes
            isAuthenticated={childProps.isAuthenticated}
            userHasAuthenticated={childProps.userHasAuthenticated}
            showNetworkLatency={childProps.showNetworkLatency}
          />
        </div>
      )
    );
  }

/**
 * User about page with all the public information a casual and power user would need to see about another user.
 */
export function UserView(props: any) {
  const [profileAbout, setProfileAbout] = useState('')
  const [hiveBalance, setHiveBalance] = useState<number>()
  const [hbdBalance, setHbdBalance] = useState<number>()
  const [coverUrl, setCoverUrl] = useState('')
  const [profileUrl, setProfileUrl] = useState('')

  const reflink = useMemo(() => {
    return RefLink.parse(props.match.params.reflink)
  }, [props.match])

  const username = useMemo(() => {
    return reflink.root
  }, [reflink])

  useEffect(() => {
    const load = async () => {
      const accountBalances = await AccountService.getAccountBalances(reflink)

      setProfileUrl(await AccountService.getProfilePictureURL(reflink))
      setProfileAbout(await AccountService.getProfileAbout(reflink))
      setHiveBalance(accountBalances.hive)
      setHbdBalance(accountBalances.hbd)
      setCoverUrl(await AccountService.getProfileBackgroundImageUrl(reflink))
    }

    void load()
  }, [reflink])

  return (
    <div>
      <div className="single-channel-image">
        <img
          className="img-fluid mh-20"
          style={{
            objectFit: 'cover',
            objectPosition: 'center',
            maxHeight: '500px',
          }}
          alt=""
          src={coverUrl}
        />
        <div className="channel-profile" style={{ position: profileUrl ? 'absolute' : 'unset' }}>
          <img className="channel-profile-img" alt="" src={profileUrl} />
        </div>
      </div>
      <div className="single-channel-nav">
        <Navbar expand="lg" bg="light">
          <a className="channel-brand">{username}</a>
          <Navbar.Toggle
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </Navbar.Toggle>
          <Navbar.Collapse id="navbarSupportedContent">
            <Nav className="mr-auto">
              <Nav.Link href={`#/user/${reflink.toString()}/`}>
                Videos <span className="sr-only">(current)</span>
              </Nav.Link>
              <Nav.Link href={`#/user/${reflink.toString()}/earning`}>Earnings</Nav.Link>
              <Nav.Link href={`#/user/${reflink.toString()}/about`}>About</Nav.Link>
            </Nav>
            <div className="form-inline my-2 my-lg-0">
              <FollowWidget reflink={reflink.toString()} />
            </div>
          </Navbar.Collapse>
        </Navbar>
      </div>
      <Switch>
        <Route exact path={`/user/${reflink.toString()}`}>
          <section className="content_home" style={{ height: 'auto !important' }}>
            <GridFeedView type={'@' + username} awaitingMoreData={true} />
          </section>
        </Route>
        <Route path={`/user/${reflink.toString()}/earning`}>
          <Row>
            <Col md={6}>
              <Card className="bg-steem status">
                <Card.Header>
                  <Card.Title className="text-center">{hiveBalance}</Card.Title>
                </Card.Header>
                <Card.Body className="bg-white text-center">
                  <strong>Available HIVE Balance</strong>
                </Card.Body>
              </Card>
            </Col>
            <Col md={6}>
              <Card className="bg-sbd status">
                <Card.Header>
                  <Card.Title className="text-center">{hbdBalance}</Card.Title>
                </Card.Header>
                <Card.Body className="bg-white text-center">
                  <strong>Available HBD Balance</strong>
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </Route>
        <Route path={`/user/${reflink.toString()}/about`}>
          <ReactMarkdown className={'p-3'} source={profileAbout} />
        </Route>
      </Switch>
    </div>
  )
}

export function TopNavbar() {
  const [inEdit, setInEdit] = useState(false)
  const urlForm = useRef<any>()
  const [urlSplit, setUrlSplit] = useState([])

  const startEdit = () => {
    setInEdit(true)
  }

  useEffect(() => {
    if (inEdit) {
      urlForm.current?.focus()
    }
  }, [inEdit])

  const exitEdit = () => {
    setInEdit(false)
  }

  const finishEdit = (e) => {
    if (e.keyCode === 13) {
      if (location.hash !== `#${e.target.value}`) {
        location.replace(`#${e.target.value}`)
        location.reload()
      }
      setInEdit(false)
    } else if (e.keyCode === 27) {
      exitEdit()
    }
  }

  const updateUrlSplit = () => {
    const hash = window.location.hash
    const theUrlSplit = hash.split('/')
    theUrlSplit.splice(0, 1)

    if (theUrlSplit[0] === 'watch') {
      const pagePerm = theUrlSplit[1]
      const pagePermSpliced = pagePerm.split(':')
      pagePermSpliced.splice(0, 1)
      theUrlSplit.pop()
      pagePermSpliced.forEach((onePagePerm) => {
        theUrlSplit.push(onePagePerm)
      })

      setUrlSplit(theUrlSplit)
    } else {
      setUrlSplit(theUrlSplit)
    }
  }

  useEffect(() => {
    updateUrlSplit()
  }, [])

  useEffect(() => {
    window.addEventListener('hashchange', function (event) {
      updateUrlSplit()
    })
  }, [])

  const userProfileUrl = useMemo(() => {
    const windowLocationHash = window.location.hash
    const windowLocationSearch = windowLocationHash.search('#')
    const windowLocationHref = windowLocationHash.slice(windowLocationSearch)
    const hrefSegments = windowLocationHref.split('/')
    hrefSegments.splice(0, 1)

    let userProfileUrl = '#/user/'

    if (hrefSegments[0] === 'watch') {
      const userProfileUrlInit = hrefSegments[1]
      const userProfileUrlSpliced = userProfileUrlInit.split(':')
      userProfileUrlSpliced.pop()

      userProfileUrlSpliced.forEach((one) => {
        if (one === userProfileUrlSpliced[0]) {
          userProfileUrl = userProfileUrl + one + ':'
        } else {
          userProfileUrl = userProfileUrl + one
        }
      })
    }

    return userProfileUrl
  }, [])

  return (
    <div>
      <Navbar bg="light" expand="lg">
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            {!inEdit ? (
              <>
                <Breadcrumb>
                  <Breadcrumb.Item href="#/">Home</Breadcrumb.Item>
                  {urlSplit.map((el) =>
                    el === updateUrlSplit[1] && updateUrlSplit[0] === 'watch' ? (
                      <Breadcrumb.Item href={userProfileUrl} key={el} id={el}>
                        {el}
                      </Breadcrumb.Item>
                    ) : (
                      <Breadcrumb.Item href={'#'} key={el} id={el}>
                        {el}
                      </Breadcrumb.Item>
                    ),
                  )}
                </Breadcrumb>
                <Button
                  className="btn btn-light btn-sm"
                  style={{
                    marginLeft: '5px',
                    width: '40px',
                    height: '40px',
                    padding: '3.5%',
                    verticalAlign: 'baseline',
                  }}
                  onClick={startEdit}
                >
                  <FaEdit style={{ textAlign: 'center', verticalAlign: 'initial' }} />
                </Button>
              </>
            ) : (
              <FormControl
                ref={urlForm}
                defaultValue={(() => {
                  return location.hash.slice(1)
                })()}
                onKeyDown={finishEdit}
                onBlur={exitEdit}
              />
            )}
          </Nav>
          <Dropdown>
            <Dropdown.Toggle variant="secondary" size="lg">
              Options
            </Dropdown.Toggle>

            <Dropdown.Menu>
              <Dropdown.Item onClick={() => copyToClip(window.location.hash)}>
                Copy Current URL{' '}
                <FaCopy size={28} onClick={() => copyToClip(window.location.hash)} />
              </Dropdown.Item>
              <Dropdown.Item onClick={goToClip}>
                Go to Copied URL <FaArrowRight size={28} />
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
          <Nav>
            <Nav.Link>
              <FaAngleLeft size={28} onClick={goBack} />
            </Nav.Link>
            <Nav.Link>
              <FaAngleRight size={28} onClick={goForth} />
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  )
}