reactstrap#NavItem JavaScript Examples

Sidebar = ({ menu }) => (
  <Col className="ui-sidebar"  sm={2}>    
    <h4 className="ui-sidebar-section-title">Navegación</h4>
    <Nav className="ui-sidebar-section-nav" vertical>
      {menu.map(({ to, icon, title }, i) => (
        <NavItem
          key={i}
          tag={() => (
            <Link to={to}>
              <i className={icon} />
              <p>{title}</p>
            </Link>
          )}
        />
      ))}
    </Nav>    
  </Col>
)

NavItems = ({redirect}) => (
    <Nav className="mr-auto" navbar>
        <NavItem>
            <NavLink onClick={() => redirect('/app')}>
                <FontAwesomeIcon icon={faHome}/>
                &nbsp;Inicio
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink onClick={() => redirect('/contacts')}>
                <FontAwesomeIcon icon={faUserFriends}/>
                &nbsp;Contactos
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink onClick={() => redirect('/departments')}>
                <FontAwesomeIcon icon={faBriefcase}/>
                &nbsp;Departamentos
            </NavLink>
        </NavItem>
        <NavItem>
            <NavLink onClick={() => redirect('/assignments')}>
                <FontAwesomeIcon icon={faBriefcase}/>
                &nbsp;Asignaciones
            </NavLink>
        </NavItem>
    </Nav>
)

Example = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div id="topNav">
      <Navbar color="light" className="topNav" light expand="md">
        <Link to="banner" smooth="true" duration={1000}>
          <img alt="Palembang Digital" src={"/logo.jpg"} width="50px" />
        </Link>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <NavItem>
              <Link to={`/`} smooth="true" duration={1000} className="NavLink">
                Acara
              </Link>
              <Link to={`/`} smooth="true" duration={1000} className="NavLink">
                Tentang
              </Link>
              <Link to={`/`} smooth="true" duration={1000} className="NavLink">
                Kontak
              </Link>
              <NavLink href="/patal-team" className="NavLink">
                Team
              </NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

navItems = {
  auth: [
    <NavItem key="mmaps">
      <Link href={'/mmaps'} passHref>
        <NavLink>Mind Maps</NavLink>
      </Link>
    </NavItem>,
  ],
  anon: [],
  unknown: [
    <NavItem key={'loading'}>
      <Spinner />
    </NavItem>,
  ],
}

MyNav = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Navbar color="primary" light expand="md">
        <NavbarBrand href="/" id="navItem">
          <b>?하부리?</b>
        </NavbarBrand>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="mr-auto" navbar>
            <NavItem>
              <NavLink href="/components/">Components</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="http://49.50.160.6:8080/">Chat</NavLink>
            </NavItem>
            <UncontrolledDropdown nav inNavbar>
              <DropdownToggle nav caret>
                Options
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem>하부리란?</DropdownItem>
                <DropdownItem>하부리 기능</DropdownItem>
                <DropdownItem divider />
                <DropdownItem>Reset</DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
          <NavbarText id="navItem">Latta is horse</NavbarText>
        </Collapse>
      </Navbar>
    </div>
  );
}

Header = (props) => {
    const [isOpen, setIsOpen] = useState(false);

    const toggle = () => setIsOpen(!isOpen);

    return (
        <div>
            <Navbar className={styles.header} color="light" light expand="md">
                <NavbarBrand href="https://ifto-palmas.github.io/aglomerou/">
                    <img className={styles.image} src={logoImage} alt="Logo aglomerou"></img>
                </NavbarBrand>
                <NavbarToggler onClick={toggle} />
                <Collapse isOpen={isOpen} navbar>
                    <Nav className="mr-auto" navbar>
                        <NavItem>
                            <NavLink href="#">Notificações</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="https://coronavirus.palmas.to.gov.br/">COVID-19</NavLink>
                        </NavItem>
                    </Nav>
                    <NavbarText>IFTO</NavbarText>
                </Collapse>
            </Navbar>
        </div>
    );
}

TopNav = () => {
    const { isLoggedIn, setIsloggedIn } = useContext(UserContext);

    const [collapsed, setCollapsed] = useState(true);
    const toggleNavbar = () => setCollapsed(!collapsed);

    const logoutHandler = () => {
        localStorage.removeItem('user')
        localStorage.removeItem('user_id')
        setIsloggedIn(false)
    }

    return isLoggedIn ? 
        <div>
            <Navbar color="faded" light>
                <NavbarToggler onClick={toggleNavbar} />
                <Link to="/login" onClick={logoutHandler}>Logout</Link>
                <Collapse isOpen={!collapsed} navbar>
                    <Nav navbar>
                        <NavItem>
                            <Link to="/events">Events</Link>
                        </NavItem>
                        <NavItem>
                            <Link to="/">Dashboard</Link>
                        </NavItem>
                    </Nav>
                </Collapse>
            </Navbar>
        </div>
    : ""
}

export default function DemoHeader() {
  return (
    <Navbar className='main-header navbar-white navbar-light' expand>
      <Nav navbar>
        <LteToggler />
        <NavItem className='d-none d-sm-inline-block'>
          <NavLink tag={Link} to='/'>
            Home
          </NavLink>
        </NavItem>
        <NavItem className='d-none d-sm-inline-block'>
          <NavLink href='#'>Contact</NavLink>
        </NavItem>
      </Nav>

      <NavSearch />

      <Nav navbar className='ml-auto'>
        <MessageMenu href='/message' data={messageNavData} />
        <NotificationMenu href='/notification' />
        <NavItem>
          <NavLink tag='button' className='btn' data-widget='control-sidebar' data-slide='true'>
            <FontAwesomeIcon icon={faThLarge} />
          </NavLink>
        </NavItem>
      </Nav>
    </Navbar>
  );
}

render() {
    return (
        <>
          <Navbar className="navbar-top navbar-dark" expand="md" id="navbar-main">
            <Container fluid>
              <NavItem className="no-list-style mb-0 d-none d-md-flex ml-auto d-lg-inline-block">
                <NavLink href="/how-it-works" title="How it works?">
                  <Media className="align-items-center">
                    <i className="fas fa-info text-white text-lg avatar avatar-sm bg-red"/>
                    <Media className="ml-2 d-none d-lg-block">
                      <span className="mb-0 text-sm font-weight-bold text-white">
                        How it works?
                      </span>
                    </Media>
                  </Media>
                </NavLink>
              </NavItem>
              <UserDropDown className="mb-0 d-none d-md-flex d-lg-inline-block"
                            dropDownToggleClassName="pr-0"/>
            </Container>
          </Navbar>
        </>
    );
  }

Header = (props)=>{
    const [isOpen, setIsOpen] = useState(false);
  
    const toggle = () => setIsOpen(!isOpen);
  
    return (
      <div className="ContainerNav">
        <Navbar light expand="md" className="md-5 portalImg">
          <Collapse navbar>
            <Nav navbar> 
            <NavItem>
                <NavLink href="https://www.furg.br/">
                  <img class="furg" src={logoFurg} alt="Logo Furg"/>
                </NavLink>              
              </NavItem>
            <NavItem>
              <NavLink href="http://www.c3.furg.br/">
                <img class="c3" src={logoC3} alt="Logo C3"/>
              </NavLink>   
            </NavItem>  
            </Nav>
          </Collapse>
            
          <NavbarBrand className=" mx-auto logo-title">
            <Link to="/" className="Headerlinks"><FontAwesomeIcon  icon={faVirus} />             
            ITeCCorona  
            </Link> 
          </NavbarBrand>

          <NavbarToggler onClick={toggle} className="mr-2"/>
            <Collapse isOpen={isOpen} navbar>    

              <Nav className="navPortal ml-auto"> 
                <NavItem className="portal">
                    <NavLink className="LinkTitle" href="http://www.riogrande.rs.gov.br/corona/">
                        Portal
                    </NavLink>
                </NavItem>
                
                <NavItem className="portal">
                  <NavLink className="LinkTitle" >
                    <Link to="/about" className="LinkTitle " >
                      Sobre nós                            
                    </Link>
                  </NavLink>
                </NavItem>

                <NavItem className="portal">
                  <NavLink className="LinkTitle"  href="https://github.com/Gabriellavoura/covidAnalytics">
                    Github
                  </NavLink>
                </NavItem>
            </Nav>
          </Collapse>
        </Navbar>

      </div>
    );
}

NavBar = () => {
    const context = useContext(UserContext)
    const [isToggled, setIsToggled] = useState(false)

    const toggle = () => setIsToggled(!isToggled)

    return (
        <Navbar
            color="danger"
            light
            expand="md"
        >
            <NavbarBrand>
                <Link to="/" className='text-white'>Github Repo Search App</Link>
            </NavbarBrand>
            <NavbarText className='text-white'>
                Welcome, {context.user?.email ? context.user?.email : ""}
            </NavbarText>
            <NavbarToggler onClick={toggle} />
            <Collapse isOpen={isToggled} navbar>
                <Nav navbar style={{ marginLeft: "auto" }}>
                    {
                        context.user ?
                            (
                                <NavItem>
                                    <NavLink onClick={() => { context.setUser(null) }} className='text-white'>
                                        Logout
                                    </NavLink>
                                </NavItem>
                            ) :
                            (
                                <>
                                    <NavItem>
                                        <NavLink tag={Link} to="/signup" className='text-white'>
                                            Signup
                                        </NavLink>
                                    </NavItem>
                                    <NavItem>
                                        <NavLink tag={Link} to="/signin" className='text-white'>
                                            Signin
                                        </NavLink>
                                    </NavItem>
                                </>
                            )
                    }
                </Nav>
            </Collapse>
        </Navbar>
    )
}

NavbarDefault = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [currentPath, setCurrentPath] = useState("");

  const toggle = () => setIsOpen(!isOpen);

  useEffect(() => {
    if (typeof window !== "undefined") {
      setCurrentPath(window.location.pathname);
    }
  }, [currentPath]);

  return (
    <div id="topNav">
      <Navbar color="light" className="topNav" light expand="md">
        <GatsbyLink to="/">
          <img alt="Palembang Digital" src={"/logo.png"} width="50px" />
        </GatsbyLink>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <NavItem>
              {!currentPath.startsWith("/patal-team") ? (
                <Link
                  to={`event`}
                  smooth={true}
                  duration={1000}
                  className="NavLink">
                  Acara
                </Link>
              ) : (
                <GatsbyLink to="/#event" className="NavLink">
                  Acara
                </GatsbyLink>
              )}
            </NavItem>
            <NavItem>
              {!currentPath.startsWith("/patal-team") ? (
                <Link
                  to={`tentang`}
                  smooth={true}
                  duration={1000}
                  className="NavLink">
                  Tentang
                </Link>
              ) : (
                <GatsbyLink to="/#tentang" className="NavLink">
                  Tentang
                </GatsbyLink>
              )}
            </NavItem>
            <NavItem>
              {!currentPath.startsWith("/patal-team") ? (
                <Link
                  to={`footer`}
                  smooth={true}
                  duration={1000}
                  className="NavLink">
                  Kontak
                </Link>
              ) : (
                <GatsbyLink to="/#footer" className="NavLink">
                  Kontak
                </GatsbyLink>
              )}
            </NavItem>
            <NavItem
              className={currentPath.startsWith("/patal-team") ? "active" : ""}>
              <GatsbyLink to="/patal-team" className="NavLink">
                Tim
              </GatsbyLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

NavBar = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const H = useHistory();
  const toggle = () => setIsOpen(!isOpen);
  const logout = () => {
    const token = localStorage.getItem("token");
    localStorage.removeItem("token");
    axios.get(`${Baseurl}/logout/${token}`).then((res)=>{
    }).catch(()=>{
    });
    H.push("/");  
  }
  return (
    <div>
      <Navbar
        light
        expand="md"
        style={{
          backgroundColor: "#161616",
        }}
      >
        <NavbarBrand href="/">
          <img src={portfolyo} className="navbarBrand"></img>
        </NavbarBrand>
        <NavbarToggler
          onClick={toggle}
          style={{
            backgroundColor: "#ffffff",
          }}
        />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="ml-auto navbarNav" navbar>
            <NavItem className="mx-auto navitemNavBar">
              <NavLink className="navItemNavLink" href="/#/mywebsites/">
                Your Websites
              </NavLink>
            </NavItem>
            <NavItem className="mx-auto">
              <NavLink
                className="navItemNavLink"
                style={{
                  color: "#ffffff",
                  cursor:"pointer"
                }}
                onClick={logout}
              >
                Logout
              </NavLink>
            </NavItem>
            {/* <UncontrolledDropdown nav inNavbar>
              <DropdownToggle
                nav
                caret
                style={{
                  color: "#ffffff",
                }}
              >
                Options
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem>Option 1</DropdownItem>
                <DropdownItem>Option 2</DropdownItem>
                <DropdownItem divider />
                <DropdownItem>Reset</DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown> */}
          </Nav>
          {/* <NavbarText
            style={{
              color: "#ffffff",
            }}
          >
            Simple Text
          </NavbarText> */}
        </Collapse>
      </Navbar>
    </div>
  );
}

render() {
        return (
            <Navbar color='dark' dark expand='lg'>
                <Link
                    to='/'
                    className='navbar-brand'
                    style={{ fontFamily: "Monoton", fontWeight: "100" }}>
                    <img
                        src={logo}
                        style={{ maxWidth: "40px" }}
                        className='mx-2'
                    />
                    BlogApp
                </Link>
                <NavbarToggler onClick={this.toggle} />{" "}
                <Collapse isOpen={this.state.isOpen} navbar>
                    {this.state.user ? (
                        <Nav className='ml-auto mr-2' navbar>
                            <NavItem className='navbar-item'>
                                <ButtonDropdown
                                    isOpen={this.state.isDropdownOpen}
                                    toggle={this.dropdownToggle}>
                                    <Button id='caret' color='primary'>
                                        <FontAwesomeIcon
                                            icon={faUser}
                                            className='mr-2'
                                        />
                                        {this.state.user.username}
                                    </Button>
                                    <DropdownToggle caret color='primary' />
                                    <DropdownMenu right>
                                        <Link
                                            to='/myblogs/'
                                            className='dropdown-item'>
                                            My Blogs
                                        </Link>

                                        <DropdownItem divider />
                                        <DropdownItem onClick={this.logout}>
                                            logout
                                            <FontAwesomeIcon
                                                icon={faSignOutAlt}
                                                className='ml-3'
                                            />
                                        </DropdownItem>
                                    </DropdownMenu>
                                </ButtonDropdown>
                            </NavItem>
                        </Nav>
                    ) : (
                        <Nav className='ml-auto' navbar>
                            <NavItem className='navbar-item'>
                                <Link className='nav-link' to='/login'>
                                    Login
                                </Link>
                            </NavItem>
                        </Nav>
                    )}
                </Collapse>
            </Navbar>
        );
    }

Header = () => {
    const { isAuthenticated, user, loginUrl } = React.useContext(authContext);
    const { authUrl, logoutRedirectUrl } = React.useContext(configContext);

    const [isOpen, setIsOpen] = React.useState(false);

    const toggle = () => setIsOpen(!isOpen);

    const logoutUrl = `${authUrl}/logout?returnUrl=${logoutRedirectUrl}`;

    return (
        <div>
            <Navbar color="light" light expand="md">
                <NavbarBrand tag={Link} to="/">
                    EdLib Admin
                </NavbarBrand>
                <NavbarToggler onClick={toggle} />
                <Collapse isOpen={isOpen} navbar>
                    <Nav className="ml-auto" navbar>
                        {!isAuthenticated && (
                            <NavItem>
                                <NavLink href={loginUrl}>Login</NavLink>
                            </NavItem>
                        )}
                        {user && (
                            <>
                                <NavItem>
                                    <NavLink tag={Link} to="/system-status">
                                        System status
                                    </NavLink>
                                </NavItem>
                                <UncontrolledDropdown nav inNavbar>
                                    <DropdownToggle nav caret>
                                        {user.firstName} {user.lastName}
                                    </DropdownToggle>
                                    <DropdownMenu right>
                                        <DropdownItem tag="a" href={logoutUrl}>
                                            Logg ut
                                        </DropdownItem>
                                    </DropdownMenu>
                                </UncontrolledDropdown>
                            </>
                        )}
                    </Nav>
                </Collapse>
            </Navbar>
        </div>
    );
}

render() {
    return (
      <div>
        <h5 className="mb-4">
          <strong>Based Navs</strong>
        </h5>
        <div className="mb-5">
          <Nav>
            <NavItem>
              <NavLink>Link</NavLink>
            </NavItem>
            <NavItem>
              <NavLink>Link</NavLink>
            </NavItem>
            <NavItem>
              <NavLink>Another Link</NavLink>
            </NavItem>
            <NavItem>
              <NavLink disabled>Disabled Link</NavLink>
            </NavItem>
          </Nav>
        </div>
        <h5 className="mb-4">
          <strong>Centered Navs</strong>
        </h5>
        <div className="mb-5">
          <Nav className="justify-content-center">
            <NavLink>Link</NavLink> <NavLink>Link</NavLink> <NavLink>Another Link</NavLink>{' '}
            <NavLink disabled>Disabled Link</NavLink>
          </Nav>
        </div>
        <h5 className="mb-4">
          <strong>Right Aligned Navs</strong>
        </h5>
        <div className="mb-5">
          <Nav className="justify-content-end">
            <NavLink>Link</NavLink> <NavLink>Link</NavLink> <NavLink>Another Link</NavLink>{' '}
            <NavLink disabled>Disabled Link</NavLink>
          </Nav>
        </div>
        <h5 className="mb-4">
          <strong>Vertical Navs</strong>
        </h5>
        <div className="mb-5">
          <Nav vertical>
            <NavLink>Link</NavLink> <NavLink>Link</NavLink> <NavLink>Another Link</NavLink>{' '}
            <NavLink disabled>Disabled Link</NavLink>
          </Nav>
        </div>
      </div>
    )
  }

Menu = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  let brandName = useRef(null);
  let pageLink1 = useRef(null);
  let pageLink2 = useRef(null);
  let pageLink3 = useRef(null);

  let tl = new TimelineLite();
  useEffect(() => {
    tl.from(brandName, 4, { x: -500, ease: Power3.easeOut }, 0)
      .from(pageLink1, 3, { x: 1000, ease: Power3.easeOut }, 0)
      .from(pageLink2, 3, { x: 1100, ease: Power3.easeOut }, 0)
      .from(pageLink3, 3, { x: 1200, ease: Power3.easeOut }, 0);
  });
  return (
    <Navbar light expand="md" className="background-blue sticky-top">
      <div className="container">
        <NavbarBrand href="/" style={{ fontWeight: "bold", color: "#eee" }}>
          <div ref={(el) => (brandName = el)}>
            <img src="/img/logowhite.png" alt="" style={{ width: "30px" }} />{" "}
            KJSCE CodeCell
          </div>
        </NavbarBrand>
        <NavbarToggler onClick={toggle} style={{ background: "#666" }} />
        <Collapse
          isOpen={isOpen}
          navbar
          style={{
            justifyContent: "space-between",
          }}
        >
          <Nav className="ml-auto" navbar>
            <div ref={(el) => (pageLink1 = el)}>
              <NavItem className="mr-3">
                <Link to="/" className="links mr-2">
                  <HouseFill size={20} /> Home
                </Link>
              </NavItem>
            </div>
            <div ref={(el) => (pageLink2 = el)}>
              <NavItem className="mr-3">
                <Link to="/blog" className="links mr-2">
                  <Grid1x2Fill /> All Articles
                </Link>
              </NavItem>
            </div>
            <div ref={(el) => (pageLink3 = el)}>
              <NavItem>
                <Link to="/about" className="links">
                  <CodeSlash size={20} /> About
                </Link>
              </NavItem>
            </div>
          </Nav>
        </Collapse>
      </div>
    </Navbar>
  );
}

render() {
    return (
      <div className="animated fadeIn">
        <Card>
          <CardHeader>
            <i className="fa fa-align-justify"></i><strong>Navbar</strong>
            <div className="card-header-actions">
              <a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                <small className="text-muted">docs</small>
              </a>
            </div>
          </CardHeader>
          <CardBody>
            <Navbar color="info" light expand="md">
              <NavbarBrand href="/">Bootstrap</NavbarBrand>
              <NavbarToggler onClick={this.toggle} />
              <Collapse isOpen={this.state.isOpen} navbar>
                <Nav className="ml-auto" navbar>
                  <NavItem>
                    <NavLink href="#/components/navbars">Components</NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink href="https://github.com/reactstrap/reactstrap" target="_blank">Github</NavLink>
                  </NavItem>
                  <UncontrolledDropdown nav inNavbar>
                    {/*Warning: React does not recognize the `inNavbar` prop on a DOM element.*/}
                    {/*waiting for [email protected]*/}
                    <DropdownToggle nav caret>
                      Options
                    </DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem>
                        Option 1
                      </DropdownItem>
                      <DropdownItem>
                        Option 2
                      </DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem>
                        Reset
                      </DropdownItem>
                    </DropdownMenu>
                  </UncontrolledDropdown>
                </Nav>
              </Collapse>
            </Navbar>
          </CardBody>
        </Card>
        <Card>
          <CardHeader>
            <i className="fa fa-align-justify"></i><strong>Navbar Toggler</strong>
          </CardHeader>
          <CardBody>
            <Navbar color="success" light>
              <NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand>
              <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
              <Collapse isOpen={!this.state.collapsed} navbar>
                <Nav navbar>
                  <NavItem>
                    <NavLink href="#/components/navbars">Components</NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
                  </NavItem>
                </Nav>
              </Collapse>
            </Navbar>
          </CardBody>
        </Card>
      </div>
    );
  }

render() {
    return (
        <footer className="footer">
          <Row className="align-items-center justify-content-md-center">
            <Col md="8">
              <Nav className="nav-footer justify-content-center">
                <NavItem>
                  <NavLink href="/how-it-works">How it Works</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/faq">FAQ</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/disclaimer">Disclaimer</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/terms-of-use">Terms of Use</NavLink>
                </NavItem>
              </Nav>
            </Col>
          </Row>
          <Nav pills className="bottomright">
            <NavItem className="pl-2 pr-2 mb-0">
              <a
                  className="media-icon-link"
                  href={"https://www.facebook.com/covidsos.org/"}
                  target="_blank" rel="noopener noreferrer">
                <img alt={'Facebook'} src={require("assets/img/icons/facebook.svg")}/>
              </a>
            </NavItem>

            <NavItem className="pl-2 pr-2 mb-0">
              <a
                  className="media-icon-link"
                  href={"https://twitter.com/covid_sos_org"}
                  target="_blank" rel="noopener noreferrer">
                <img alt={'Twitter'} src={require("assets/img/icons/twitter.svg")}/>
              </a>
            </NavItem>

            <NavItem className="pl-2 pr-2 mb-0">
              <a
                  className="media-icon-link"
                  href={"https://www.instagram.com/covid_sos_org/"}
                  target="_blank" rel="noopener noreferrer">
                <img alt={'Instagram'} src={require("assets/img/icons/instagram.svg")}/>
              </a>
            </NavItem>

          </Nav>
        </footer>
    );
  }

render() {
    const { activeTab } = this.state;
    const {
      blockPerHour,
      blockPerMin,
      transactionPerHour,
      transactionPerMin,
      classes
    } = this.props;

    return (
      <div className={classes.chart}>
        <Nav tabs>
          <NavItem>
            <NavLink
              className={classnames({
                active: activeTab === '1'
              })}
              onClick={() => {
                this.toggle('1');
              }}
            >
              BLOCKS / HOUR
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({
                active: activeTab === '2'
              })}
              onClick={() => {
                this.toggle('2');
              }}
            >
              BLOCKS / MIN
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({
                active: activeTab === '3'
              })}
              onClick={() => {
                this.toggle('3');
              }}
            >
              TX / HOUR
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({
                active: activeTab === '4'
              })}
              onClick={() => {
                this.toggle('4');
              }}
            >
              TX / MIN
            </NavLink>
          </NavItem>
        </Nav>
        <TabContent activeTab={activeTab}>
          <TabPane tabId="1">
            <TimeChart chartData={this.timeDataSetup(blockPerHour)} />
          </TabPane>
          <TabPane tabId="2">
            <TimeChart chartData={this.timeDataSetup(blockPerMin)} />
          </TabPane>
          <TabPane tabId="3">
            <TimeChart chartData={this.timeDataSetup(transactionPerHour)} />
          </TabPane>
          <TabPane tabId="4">
            <TimeChart chartData={this.timeDataSetup(transactionPerMin)} />
          </TabPane>
        </TabContent>
      </div>
    );
  }

render() {
    return (
      <>
        <Col lg="5">
          <h3 className="h4 text-success font-weight-bold mb-5">
            Navigation Pills
          </h3>
          <Nav className="nav-pills-circle" id="tabs_2" pills role="tablist">
            <NavItem>
              <NavLink
                aria-selected={this.state.circledNavPills === 1}
                className={classnames("rounded-circle", {
                  active: this.state.circledNavPills === 1
                })}
                onClick={e => this.toggleNavs(e, "circledNavPills", 1)}
                href="#pablo"
                role="tab"
              >
                <span className="nav-link-icon d-block">
                  <i className="ni ni-atom" />
                </span>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                aria-selected={this.state.circledNavPills === 2}
                className={classnames("rounded-circle", {
                  active: this.state.circledNavPills === 2
                })}
                onClick={e => this.toggleNavs(e, "circledNavPills", 2)}
                href="#pablo"
                role="tab"
              >
                <span className="nav-link-icon d-block">
                  <i className="ni ni-chat-round" />
                </span>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                aria-selected={this.state.circledNavPills === 3}
                className={classnames("rounded-circle", {
                  active: this.state.circledNavPills === 3
                })}
                onClick={e => this.toggleNavs(e, "circledNavPills", 3)}
                href="#pablo"
                role="tab"
              >
                <span className="nav-link-icon d-block">
                  <i className="ni ni-cloud-download-95" />
                </span>
              </NavLink>
            </NavItem>
          </Nav>
        </Col>
      </>
    );
  }

HomeLink = ({ viewer }) => (
  <NavItem>
    <Link className="nav-link" to="/">
      <i className="fa fa-home" /> Home
    </Link>
  </NavItem>
)

Navigation = () => {
	const [collapseClasses, setCollapseClasses] = useState("");
	const onExiting = () => setCollapseClasses("collapsing-out");

	const onExited = () => setCollapseClasses("");

	useEffect(() => {
		let headroom = new Headroom(document.getElementById("navbar-main"));
		// initialise
		headroom.init();
	});

	return (
		<>
			<header className="header-global">
				<Navbar
					className="navbar-main navbar-transparent navbar-light headroom"
					expand="lg"
					id="navbar-main"
				>
					<Container>
						<NavbarBrand href="/" className="mr-lg-5">
							<h2 className="text-white" id="nav-title">
								{greetings.name}
							</h2>
						</NavbarBrand>
						<button
							className="navbar-toggler"
							aria-label="navbar_toggle"
							id="navbar_global"
						>
							<span className="navbar-toggler-icon" />
						</button>
						<UncontrolledCollapse
							toggler="#navbar_global"
							navbar
							className={collapseClasses}
							onExiting={onExiting}
							onExited={onExited}
						>
							<div className="navbar-collapse-header">
								<Row>
									<Col className="collapse-brand" xs="6">
										<h3
											className="text-black"
											id="nav-title"
										>
											{greetings.name}
										</h3>
									</Col>
									<Col className="collapse-close" xs="6">
										<button
											className="navbar-toggler"
											id="navbar_global"
										>
											<span />
											<span />
										</button>
									</Col>
								</Row>
							</div>
							<Nav
								className="align-items-lg-center ml-lg-auto"
								navbar
							>
								{socialLinks.facebook && (
									<NavItem>
										<NavLink
											rel="noopener"
											aria-label="Facebook"
											className="nav-link-icon"
											href={socialLinks.facebook}
											target="_blank"
										>
											<i className="fa fa-facebook-square" />
											<span className="nav-link-inner--text d-lg-none ml-2">
												Facebook
											</span>
										</NavLink>
									</NavItem>
								)}
								{socialLinks.instagram && (
									<NavItem>
										<NavLink
											rel="noopener"
											aria-label="Instagram"
											className="nav-link-icon"
											href={socialLinks.instagram}
											target="_blank"
										>
											<i className="fa fa-instagram" />
											<span className="nav-link-inner--text d-lg-none ml-2">
												Instagram
											</span>
										</NavLink>
									</NavItem>
								)}
								{socialLinks.github && (
									<NavItem>
										<NavLink
											rel="noopener"
											aria-label="Github"
											className="nav-link-icon"
											href={socialLinks.github}
											target="_blank"
										>
											<i className="fa fa-github" />
											<span className="nav-link-inner--text d-lg-none ml-2">
												Github
											</span>
										</NavLink>
									</NavItem>
								)}
								{socialLinks.linkedin && (
									<NavItem>
										<NavLink
											rel="noopener"
											aria-label="Linkedin"
											className="nav-link-icon"
											href={socialLinks.linkedin}
											target="_blank"
										>
											<i className="fa fa-linkedin" />
											<span className="nav-link-inner--text d-lg-none ml-2">
												Linkedin
											</span>
										</NavLink>
									</NavItem>
								)}
								{socialLinks.twitter && (
									<NavItem>
										<NavLink
											rel="noopener"
											aria-label="Twitter"
											className="nav-link-icon"
											href={socialLinks.twitter}
											target="_blank"
										>
											<i className="fa fa-twitter-square" />
											<span className="nav-link-inner--text d-lg-none ml-2">
												Twitter
											</span>
										</NavLink>
									</NavItem>
								)}
							</Nav>
						</UncontrolledCollapse>
					</Container>
				</Navbar>
			</header>
		</>
	);
}

function ExamplesNavbar(props) {

  const [navbarColor, setNavbarColor] = React.useState("navbar-transparent");
  const [navbarCollapse, setNavbarCollapse] = React.useState(false);

  const toggleNavbarCollapse = () => {
    setNavbarCollapse(!navbarCollapse);
    document.documentElement.classList.toggle("nav-open");
  };
  const [scrolled, setScrolled] = React.useState(false);

  const handleScroll = () => {
    const offset = window.scrollY;
    if (offset > 850) {
      setScrolled(true);
    }
    else {
      setScrolled(false);
    }
  }
  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll)
  })

  let x = ['navbar', 'custom-navbar-auv'];
  if (props.page == "landing-page") {
    if (scrolled) {
      x.push('scrolled');
    }
  }
  else x.push('scrolled');

  return (
    <div className={x.join(" ")} >
      <Navbar
        color-on-scroll="300"
        expand="lg"
        className="custom-navbar-auv"
      >
        <Container className="navbar-container">
          <div className="navbar-translate">
            <NavbarBrand
              data-placement="bottom"
              to="/index"
              title="Coded by Creative Tim"
              tag={Link}
              style={{ marginLeft: "20px", padding: "0 0" }}
            >
              <img className="minilogo w-100" src={auvlogomini} alt="logo" />
            </NavbarBrand>
            <button
              aria-expanded={navbarCollapse}
              className={classnames("navbar-toggler navbar-toggler u-margin-zero", {
                toggled: navbarCollapse,
              })}
              onClick={toggleNavbarCollapse}

            >
              <span className="navbar-toggler-bar bar1" />
              <span className="navbar-toggler-bar bar2" />
              <span className="navbar-toggler-bar bar3" />
            </button>
          </div>
          <Collapse
            className=" justify-content-end"
            navbar
            isOpen={navbarCollapse}
          >
            <Nav navbar className=" mr-5 navigation">
              <NavItem>
                <NavLink className={props.activePage === "/landing-page" ? "navbar-content active" : "navbar-content"} to="/landing-page" tag={Link} onClick={toggleNavbarCollapse}>Home
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink className={props.activePage === "/about-us" ? "navbar-content active" : "navbar-content"} to="/about-us" tag={Link} onClick={toggleNavbarCollapse}>
                  About Us
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink className={props.activePage === "/team" ? "navbar-content active" : "navbar-content"} to="/team" tag={Link} onClick={toggleNavbarCollapse}>
                  Team
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink className={props.activePage === "/events" ? "navbar-content active" : "navbar-content"} to="/events" tag={Link} onClick={toggleNavbarCollapse} onClick={toggleNavbarCollapse}>
                  Events
                </NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle
                  aria-expanded={false}
                  aria-haspopup={true}
                  caret
                  color="black"
                  data-toggle="dropdown"
                  href="#pablo"
                  id="dropdownMenuButton"
                  nav
                  onClick={e => e.preventDefault()}
                  role="button"
                  style={{ textAlign: 'center' }}
                  className={props.activePage === "/vehicles/anahita" || props.activePage === "/vehicles/varun" ? "navbar-content active" : "navbar-content"}
                >
                  Vehicles
                </DropdownToggle>
                <DropdownMenu

                  aria-labelledby="dropdownMenuButton"
                  className="dropdown-info ml-auto mr-auto"
                  style={{ borderRadius: "0", textAlign: "center" }}
                >

                  <Link to='/vehicles/tarang'>
                    <DropdownItem
                      style={{ textAlign: "center" }}
                      className="auv-dropdown"
                      onClick={toggleNavbarCollapse}
                    >
                      Tarang
                    </DropdownItem>
                  </Link>
                  <Link to='/vehicles/anahita'>
                    <DropdownItem
                      style={{ textAlign: "center" }}
                      className=" auv-dropdown"
                      onClick={toggleNavbarCollapse}
                    >
                      Anahita
                    </DropdownItem>
                  </Link>
                  <Link to='/vehicles/varun'>
                    <DropdownItem
                      style={{ textAlign: "center" }}
                      className="auv-dropdown"
                      onClick={toggleNavbarCollapse}
                    >
                      Varun
                    </DropdownItem>
                  </Link>
                </DropdownMenu>
              </UncontrolledDropdown>
              <NavItem>
                <NavLink className={props.activePage === "/blogs" ? "navbar-content active" : "navbar-content"} to="/blogs" tag={Link}>
                  Blogs
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink className={props.activePage === "/contact-us" ? "navbar-content active" : "navbar-content"} to="/contact-us" tag={Link}>
                  Contact Us
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  data-placement="bottom"
                  href="https://www.facebook.com/auviitk"
                  target="_blank"
                  title="Like us on Facebook"
                  style={{ textAlign: "center", color: "white" }}
                >
                  <i className="fa fa-facebook-square nav-social" />
                  <p className="d-lg-none" style={{ color: "white" }}>Facebook</p>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  data-placement="bottom"
                  href="https://github.com/AUV-IITK"
                  target="_blank"
                  title="Star on GitHub"
                  style={{ textAlign: "center", color: "white" }}
                >
                  <i className="fa fa-github nav-social" />
                  <p className="d-lg-none" style={{ color: "white" }} >GitHub</p>
                </NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Container>
      </Navbar>
    </div>
  );
}

IndexNavbar = (props) => {
  const [isOpen, setIsOpen] = useState(false)

  const toggle = () => setIsOpen(!isOpen)
  const deleteCred = () => {
    localStorage.removeItem('creds')
    window.location.assign('/')
  }

  var prevScrollpos = window.pageYOffset
  window.onscroll = function () {
    var currentScrollPos = window.pageYOffset
    if (prevScrollpos > currentScrollPos) {
      document.getElementById('navbar').style.top = '0'
    } else {
      document.getElementById('navbar').style.top = '-70px'
    }
    prevScrollpos = currentScrollPos
  }

  const creds = JSON.parse(localStorage.getItem('creds'))
  const [uu, setuu] = useState()

  // console.log(uu);

  const handle = '/profile/' + uu

  useEffect(() => {
    if (creds) {
      setuu(creds.username)
    }
  }, [])

  if (creds) {
    return (
      <div>
        <Navbar
          id="navbar"
          color="dark"
          light
          expand="md"
          style={{ background: 'transparent !important', paddingRight: '3% ' }}
        >
          <NavbarBrand href="/" light>
            <img src={logo1} id="BrandLogo" />
            CODEDIGGER
          </NavbarBrand>
          <NavbarToggler onClick={toggle} />
          <Collapse isOpen={isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem style={{ color: 'white' }}>
                <NavLink style={{ color: 'white' }} href="/problems">
                  Problems
                </NavLink>
              </NavItem>

              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret style={{ color: 'white' }}>
                  Practice
                </DropdownToggle>
                <DropdownMenu left className="dropdown_background">
                  <DropdownItem>
                    <NavLink
                      className="dropdown_link"
                      href="/topicwise/practice"
                    >
                      Topicwise
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink
                      className="dropdown_link"
                      href="/levelwise/practice"
                    >
                      Levelwise
                    </NavLink>
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret style={{ color: 'white' }}>
                  Ladders
                </DropdownToggle>
                <DropdownMenu left className="dropdown_background">
                  <DropdownItem>
                    <NavLink className="dropdown_link" href="/topicwise/ladder">
                      Topicwise
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink className="dropdown_link" href="/levelwise/ladder">
                      Levelwise
                    </NavLink>
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

              <NavItem style={{ color: 'white' }}>
                <NavLink style={{ color: 'white' }} href="/contest">
                  Contests
                </NavLink>
              </NavItem>

              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret style={{ color: 'white' }}>
                  Upsolve
                </DropdownToggle>
                <DropdownMenu left className="dropdown_background">
                  <DropdownItem>
                    <NavLink
                      className="dropdown_link"
                      href="/upsolve/codeforces"
                    >
                      Codeforces
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink className="dropdown_link" href="/upsolve/codechef">
                      Codechef
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink className="dropdown_link" href="/upsolve/atcoder">
                      Atcoder
                    </NavLink>
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

              {/* <NavItem>
              <NavLink href="/profile">Hello, {creds.username}</NavLink>
            </NavItem> */}
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret style={{ color: 'white' }}>
                  Hello, {creds.username}
                </DropdownToggle>
                <DropdownMenu left className="dropdown_background">
                  <DropdownItem>
                    <NavLink className="dropdown_link" href={handle}>
                      Profile
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink className="dropdown_link" href="/updateProfile">
                      Edit Profile
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink
                      className="dropdown_link"
                      href={`/change_password_request`}
                    >
                      Edit Password
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink className="dropdown_link" href={`/list/${uu}`}>
                      Problem Lists
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavItem>
                      <NavLink className="dropdown_link" onClick={deleteCred}>
                        Log Out
                      </NavLink>
                    </NavItem>
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    )
  } else
    return (
      <div>
        <Navbar
          id="navbar"
          color="dark"
          light
          expand="md"
          style={{
            background: 'transparent !important',
            paddingLeft: '3%',
            paddingRight: '4% ',
          }}
        >
          <NavbarBrand href="/" light>
            <img src={logo1} id="BrandLogo" />
            CODEDIGGER
          </NavbarBrand>
          <NavbarToggler onClick={toggle} />
          <Collapse isOpen={isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem style={{ color: 'white' }}>
                <NavLink style={{ color: 'white' }} href="/problems">
                  Problems
                </NavLink>
              </NavItem>

              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret style={{ color: 'white' }}>
                  Practice
                </DropdownToggle>
                <DropdownMenu left className="dropdown_background">
                  <DropdownItem>
                    <NavLink
                      className="dropdown_link"
                      href="/topicwise/practice"
                    >
                      Topicwise
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink
                      className="dropdown_link"
                      href="/levelwise/practice"
                    >
                      Levelwise
                    </NavLink>
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret style={{ color: 'white' }}>
                  Ladders
                </DropdownToggle>
                <DropdownMenu left className="dropdown_background">
                  <DropdownItem>
                    <NavLink className="dropdown_link" href="/topicwise/ladder">
                      Topicwise
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink className="dropdown_link" href="/levelwise/ladder">
                      Levelwise
                    </NavLink>
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret style={{ color: 'white' }}>
                  Upsolve
                </DropdownToggle>
                <DropdownMenu left className="dropdown_background">
                  <DropdownItem>
                    <NavLink
                      className="dropdown_link"
                      href="/upsolve/codeforces"
                    >
                      Codeforces
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink className="dropdown_link" href="/upsolve/codechef">
                      Codechef
                    </NavLink>
                  </DropdownItem>
                  <DropdownItem>
                    <NavLink className="dropdown_link" href="/upsolve/atcoder">
                      Atcoder
                    </NavLink>
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

              {/* <NavItem>
              <NavLink href="/profile">Hello, {creds.username}</NavLink>
            </NavItem> */}
              <NavItem>
                <NavLink style={{ color: 'white' }} href="/login">
                  Login/Register
                </NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
        {/* <br/>
      <br/>
      <br/>  */}
      </div>
    )
}

NavbarComponent = () => {
  const [isOpen, setIsOpen] = useState(false);
  const { isAuthenticated, user, loginWithRedirect, logout } = useAuth0();

  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen((prevState) => !prevState);
  const openNav = () => {
    console.log("clicked");
    setIsOpen(!isOpen);
  };

  return (
    <Navbar light expand="md">
      <NavbarBrand href="/">
        <img src={logo} width="30" height="30" alt="" />
        <span className="ml-2 title">Hiring Job System</span>
      </NavbarBrand>
      <NavbarToggler onClick={openNav} />
      <Collapse isOpen={isOpen} navbar>
        <Nav navbar className="navbar-nav w-100 d-flex justify-content-end">
          <NavItem>
            <NavLink href="https://github.com/GitCodeCareer/hacktoberfest--hiring-system">
              <FontAwesomeIcon icon={["fab", "github"]} />
            </NavLink>
          </NavItem>

          {isAuthenticated || (
            <>
              <NavItem>
                <NavLink>
                  <button
                    onClick={loginWithRedirect}
                    className="btn btn-signin p-0 text-primary"
                  >
                    Sign in
                  </button>
                </NavLink>
              </NavItem>
            </>
          )}

          {isAuthenticated && (
            <Media className="d-flex align-items-center">
              <Media left href="#">
                <Media
                  object
                  width="20px"
                  src={user.picture}
                  alt={user.name}
                  className="rounded-circle mr-2"
                />
              </Media>
              <Media body>
                <Media heading className="h6 mb-0 mr-1">
                  <Dropdown isOpen={dropdownOpen} toggle={toggle}>
                    <DropdownToggle caret className="btn-signin">
                      {user.name}
                    </DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem header>Admin</DropdownItem>
                      <DropdownItem>
                        <Link to="/admin">Admin page</Link>
                      </DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem header>Jobs</DropdownItem>
                      <DropdownItem>
                        <Link to="/hire/new">Create Jobs</Link>
                      </DropdownItem>

                      <DropdownItem divider />

                      <DropdownItem
                        onClick={() =>
                          logout({ returnTo: window.location.origin })
                        }
                      >
                        Logout
                      </DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </Media>
                {/* {user.email} */}
              </Media>
            </Media>
          )}
        </Nav>
      </Collapse>
    </Navbar>
  );
}

Layout = ({ children }) => {
  const [isOpen, setOpen] = useState(false)
  const [dropdownOpen, setDropdownOpen] = useState(false)
  const { pageVars } = useContext(GlobalContext)
  const notifyRef = useCallback((node) => {
    if (typeof window !== 'undefined') {
      if (node) {
        window.notify = node.notificationAlert.bind(node)
      } else {
        window.notify = null
      }
    }
  }, [])

  function toggleCollapse() {
    setOpen(!isOpen)
  }

  function toggleDropdown() {
    setDropdownOpen(!dropdownOpen)
  }

  return (
    <Container fluid>
      <Head>
        <script type="text/javascript" src="/js/pace.min.js" async />
        <title>{pageVars.title}</title>
        <link
          rel="apple-touch-icon"
          sizes="57x57"
          href="/img/logo/apple-icon-57x57.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="60x60"
          href="/img/logo/apple-icon-60x60.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="72x72"
          href="/img/logo/apple-icon-72x72.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="76x76"
          href="/img/logo/apple-icon-76x76.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="114x114"
          href="/img/logo/apple-icon-114x114.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="120x120"
          href="/img/logo/apple-icon-120x120.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="144x144"
          href="/img/logo/apple-icon-144x144.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="152x152"
          href="/img/logo/apple-icon-152x152.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/img/logo/apple-icon-180x180.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="192x192"
          href="/img/logo/android-icon-192x192.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/img/logo/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="96x96"
          href="/img/logo/favicon-96x96.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/img/logo/favicon-16x16.png"
        />
        <link rel="manifest" href="/img/logo/manifest.json" />
        <meta name="msapplication-TileColor" content="#ffffff" />
        <meta
          name="msapplication-TileImage"
          content="/img/logo/ms-icon-144x144.png"
        />
        <meta name="theme-color" content="#ffffff" />
      </Head>
      <Navbar color="inverse" light expand="md" className="border-bottom mb-2">
        <Link href="/" passHref>
          <ForwardedNavbarBrand className="text-wrap">
            <img
              src="/img/logo/Logo.svg"
              style={{ height: '35px' }}
              alt="Logo"
            />
            &nbsp;
          </ForwardedNavbarBrand>
        </Link>
        <NavbarToggler onClick={toggleCollapse} />
        <Collapse isOpen={isOpen} navbar>
          <MainNav />
          <Nav className="ml-auto" navbar>
            <NavItem>
              <NavbarText>
                <Spinner
                  type="grow"
                  color="dark"
                  id={'loading'}
                  className={'invisible mx-2'}
                />
              </NavbarText>
            </NavItem>
            <NavItemUser />
            <Dropdown
              nav
              inNavbar
              isOpen={dropdownOpen}
              toggle={toggleDropdown}
            >
              <DropdownToggle nav caret>
                <HelpCircle /> Help
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem>
                  <Link href={'/help'} passHref>
                    <NavLink>
                      <Info /> User Guide
                    </NavLink>
                  </Link>
                </DropdownItem>
                <DropdownItem divider />
                <DropdownItem>
                  <NavLink
                    href={'https://github.com/adityamukho/hivemind/discussions'}
                    target="_blank"
                  >
                    <MessageCircle /> Ask a Question (Hivemind)
                  </NavLink>
                </DropdownItem>
                <DropdownItem>
                  <NavLink
                    href={'https://gitter.im/recallgraph/community'}
                    target="_blank"
                  >
                    <MessageCircle /> Ask a Question (RecallGraph)
                  </NavLink>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <NavItem>
              <NavLink
                href="https://github.com/adityamukho/hivemind"
                target="_blank"
              >
                <GitHub />
              </NavLink>
            </NavItem>
            <NavItemLogin />
          </Nav>
        </Collapse>
      </Navbar>
      <Container fluid>
        <NotificationAlert ref={notifyRef} />
        <Row>
          <Col>{children}</Col>
        </Row>
      </Container>
    </Container>
  )
}

render() {
        let box = this.props.box;
        return (
            <Col key={box.id} xs="12" md="6" lg="6" xl="4">
                <PlaceBidModal
                    isOpen={this.state.bidModal}
                    box={this.props.box}
                    close={this.openBid}
                    assemblerModal={this.props.assemblerModal}
                />
                <MyBidsModal
                    isOpen={this.state.myBidsModal}
                    box={this.props.box}
                    close={this.openMyBids}
                    highText="current active bid"
                />
                <BidHistory
                    close={this.openDetails}
                    box={this.props.box}
                    isOpen={this.state.detailsModal}
                />
                <div className="card mb-3 bg-white widget-chart" style={
                    {
                        'opacity': this.props.box.isFinished || this.state.loading ? 0.6 : 1
                    }
                }>

                    <Row style={{marginTop: 8}}>
                        <Col className="text-truncate">
                            <b data-tip={this.props.box.tokenName}>{this.props.box.tokenName}</b>
                        </Col>

                        {(this.props.box.royalty > 0 || this.props.box.totalIssued > 1) &&
                        <Col className="text-truncate">
                            {this.props.box.royalty > 0 &&
                            <i data-tip={`Includes ${this.props.box.royalty / 10}% royalty on secondary sales`} style={{fontSize: '12px'}}
                               className="font-weight-light">{`${this.props.box.royalty / 10}% royalty`}</i>}
                            {this.props.box.totalIssued > 1 &&
                            <i data-tip={`This is a Fungible Token with total issuance of ${this.props.box.totalIssued}`}
                               style={{fontSize: '12px'}}
                               className="font-weight-light">{` - ${this.props.box.assets[0].amount} out of ${this.props.box.totalIssued}`}</i>}</Col>
                        }

                    </Row>

                    <div className="widget-chart-actions">
                        <UncontrolledButtonDropdown direction="left">
                            <DropdownToggle color="link">
                                <FontAwesomeIcon icon={faEllipsisH}/>
                            </DropdownToggle>
                            <DropdownMenu className="dropdown-menu-md-left">
                                <Nav vertical>
                                    <NavItem className="nav-item-header">
                                        General
                                    </NavItem>
                                    <NavItem>
                                        <NavLink
                                            href={
                                                '#/auction/specific/' +
                                                    // this.props.box.boxId
                                                (this.props.box.stableId? this.props.box.stableId : this.props.box.boxId)
                                            }
                                        >
                                            Link to Auction
                                        </NavLink>
                                        <NavLink
                                            onClick={() => this.openMyBids()}
                                        >
                                            My Bids
                                        </NavLink>
                                        <NavLink
                                            onClick={() =>
                                                this.setState({
                                                    detailsModal: true,
                                                })
                                            }
                                        >
                                            Details
                                        </NavLink>
                                    </NavItem>
                                </Nav>
                            </DropdownMenu>
                        </UncontrolledButtonDropdown>
                    </div>
                    <div className="widget-chart-content">
                        <ResponsiveContainer height={10}>
                            <SyncLoader
                                css={override}
                                size={8}
                                color={'#0086d3'}
                                loading={this.state.loading}
                            />
                        </ResponsiveContainer>
                        <ReactTooltip effect="solid" place="bottom"/>
                        <ArtworkMedia preload={this.props.preload} box={this.props.box}/>

                        <div className="widget-chart-wrapper chart-wrapper-relative">
                            <div
                                style={{
                                    flex: 1,
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    overflowY: 'hidden',
                                    overflowX: 'hidden',
                                    fontSize: '12px',
                                }}
                            >
                                <p className="text-primary mr-2 ml-2">
                                    <div style={textStyle}>{this.props.box.description}</div>
                                    <b
                                        style={{cursor: "pointer"}}
                                        onClick={() => this.props.updateParams('artist', this.props.box.artist)}
                                    >
                                        {' '}- By {friendlyAddress(this.props.box.artist, 5)}
                                    </b>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div className='mb-2'>
                        <div
                            style={{
                                display: 'flex',
                                justifyContent: 'center',
                                fontSize: '13px'
                            }}
                            className="widget-subheading m-1"
                        >
                            <span data-tip={this.props.box.seller}>
                                Seller{' '}
                                {friendlyAddress(this.props.box.seller, 5)}
                            </span>
                            <i
                                onClick={() =>
                                    this.showAddress(this.props.box.seller)
                                }
                                data-tip="see seller's address"
                                style={{
                                    fontSize: '1rem',
                                    marginLeft: '5px',
                                }}
                                className="pe-7s-help1 icon-gradient bg-night-sky"
                            />
                        </div>
                        <div
                            style={{
                                display: 'flex',
                                justifyContent: 'center',
                                fontSize: '13px'
                            }}
                            className="widget-subheading m-1"
                        >
                            <span data-tip={this.props.box.bidder}>
                                Bidder{' '}
                                {friendlyAddress(this.props.box.bidder, 5)}
                            </span>
                            <i
                                onClick={() =>
                                    this.showAddress(this.props.box.bidder)
                                }
                                data-tip="see current bidder's address"
                                style={{
                                    fontSize: '1rem',
                                    marginLeft: '5px',
                                }}
                                className="pe-7s-help1 icon-gradient bg-night-sky"
                            />
                        </div>
                    </div>
                    <FooterSection box={this.props.box} loading={(val) => this.setState({loading: val})}
                                   assemblerModal={this.props.assemblerModal} openBid={this.openBid}/>

                </div>
            </Col>
        );
    }

Tab = (props) => {
  const dispatch = useDispatch();
  const [activeTab, setActiveTab] = useState("1");
  const videoList = useSelector((state) => state.video.videoList);

  const toggle = (tab) => {
    if (activeTab !== tab) setActiveTab(tab);
  };

  const getVideoList = async () => {
    const data = await getVideolist();
    dispatch(saveVideo(data));
  };

  useEffect(() => {
    getVideoList();
  }, []);

  const VideoList =
    videoList &&
    videoList.map((video, index) => (
      <Col sm="6" style={{ maxWidth: "30%", minHeight: "200px", paddingBottom: "30px" }}>
        <div className="card" style={{ height: "100%" }}>
          <VideoThumbnail key={index} video={video}></VideoThumbnail>
        </div>
      </Col>
    ));

  return (
    <div>
      <Nav tabs>
        <NavItem>
          <NavLink
            className={classnames({ active: activeTab === "1" })}
            onClick={() => {
              toggle("1");
            }}
          >
            ✨ Best
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            className={classnames({ active: activeTab === "2" })}
            onClick={() => {
              toggle("2");
            }}
          >
            ? 월 랭킹
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            className={classnames({ active: activeTab === "3" })}
            onClick={() => {
              toggle("3");
            }}
          >
            ? 맞춤영상
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            className={classnames({ active: activeTab === "4" })}
            onClick={() => {
              toggle("4");
            }}
          >
            ? etc
          </NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={activeTab}>
        <TabPane tabId="1">
          <Row>
            <Col sm="12">
              <br />
              <h6>Best Video ?</h6>
            </Col>
            {VideoList}
          </Row>
        </TabPane>
        <TabPane tabId="2">
          <Row>
            <Col sm="12">
              <br />
              <h6> Monthly ranking ?</h6>
            </Col>
            <Col sm="6">
              <Card body>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                <Button>Go somewhere</Button>
              </Card>
            </Col>
            <Col sm="6">
              <Card body>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                <Button>Go somewhere</Button>
              </Card>
            </Col>
          </Row>
        </TabPane>
        <TabPane tabId="3">
          <Row>
            <Col sm="12">
              <br />
              <h6> Custom video ?</h6>
            </Col>
          </Row>
        </TabPane>
        <TabPane tabId="4">
          <Row>
            <Col sm="12">
              <br />
              <h6> etc ?</h6>
            </Col>
          </Row>
        </TabPane>
      </TabContent>
    </div>
  );
}