react-bootstrap#NavDropdown JavaScript Examples

The following examples show how to use react-bootstrap#NavDropdown. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: LanguageSelector.jsx    From ashteki with GNU Affero General Public License v3.0 6 votes vote down vote up
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>
    );
}
Example #2
Source File: index.js    From wedding-planner with MIT License 6 votes vote down vote up
/**
 *  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>
  );
}
Example #3
Source File: LanguageSelector.jsx    From gatsby-startbootstrap-agency with MIT License 6 votes vote down vote up
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>
  );
}
Example #4
Source File: topheader.js    From SpotifyParty with MIT License 6 votes vote down vote up
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>
            
        );
    }
Example #5
Source File: Menu.js    From plenty-interface with GNU General Public License v3.0 6 votes vote down vote up
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>
        );
      })}
    </>
  );
}
Example #6
Source File: ProfileDropdown.jsx    From ashteki with GNU Affero General Public License v3.0 6 votes vote down vote up
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>
    );
}
Example #7
Source File: Header.js    From anutimetable with Creative Commons Attribution Share Alike 4.0 International 5 votes vote down vote up
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>
}
Example #8
Source File: PlotSelection.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 5 votes vote down vote up
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>
    );
}
Example #9
Source File: Dashboard.jsx    From ThermaKube with MIT License 5 votes vote down vote up
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>
  );
}
Example #10
Source File: nav.comp.js    From topshot-explorer with MIT License 5 votes vote down vote up
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>
  )
}
Example #11
Source File: AppNav.js    From covid-19-mask-map with MIT License 5 votes vote down vote up
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>
    );
}
Example #12
Source File: menubar.js    From RC4Community with Apache License 2.0 4 votes vote down vote up
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>
  );
}
Example #13
Source File: index.js    From Algorithm-Visualizer with MIT License 4 votes vote down vote up
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>
  );
}
Example #14
Source File: navbar.js    From community-forum-frontend with GNU General Public License v3.0 4 votes vote down vote up
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>
    );
  }
Example #15
Source File: Navbar.js    From flotiq-blog with MIT License 4 votes vote down vote up
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>
    );
}
Example #16
Source File: Header.jsx    From makerverse with GNU General Public License v3.0 4 votes vote down vote up
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>
        );
    }
Example #17
Source File: header.js    From stacker.news with MIT License 4 votes vote down vote up
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>
    </>
  )
}
Example #18
Source File: Navigation.jsx    From ashteki with GNU Affero General Public License v3.0 4 votes vote down vote up
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>
    );
}
Example #19
Source File: NavBar.js    From viade_en1b with MIT License 4 votes vote down vote up
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>
  );
}