reactstrap#Nav JavaScript Examples

export default function Dashboard(){

    return (
        <>
        <Navbar bg="light" style={{height:'5rem'}}>
            <Navbar.Brand href="/">Anywhere Fitness</Navbar.Brand>
        </Navbar>

        <Nav className="mr-auto" style={{backgroundColor:'#FF6900', height:'4rem'}}>
            <Nav.Link href="/" style={{margin:'auto 5rem', color:'black'}}>Profile</Nav.Link>
            <CreateClass/>
            <Nav.Link href="/" style={{margin:'auto 5rem', color:'black'}}>Manage Classes</Nav.Link>
            <Nav.Link href="/" style={{margin:'auto 5rem', color:'black'}}>Dashboard</Nav.Link>
        </Nav>
        <div style={{}}>
            <img style={{width:'100%', height:'50rem',margin:'0 auto', backgroundSize: 'cover', backgroundColor:'#FF6900'}} src={img}/>
        </div>
        </>
    )
}

Footer = ({ location }) => {
  const store_name = localStorage.getItem("store_name");
  const classes = useStyles();
  const { pathname } = location;
  return (
    <div
      className={classes.footer}
      style={
        pathname === "/stripe-setup" || pathname === "/createstore"
          ? { display: "none" }
          : { display: "block" }
      }
    >
      <Navbar color="white" light expand="md" className="navStyle">
        <p className="pt-3 pl-5 ml-auto">© Merch Dropper 2020</p>
        <Nav className="ml-auto">
          <NavLink href="/dashboard">Home</NavLink>
          <NavLink href={`/${store_name}`}>Store</NavLink>
        </Nav>
      </Navbar>
    </div>
  );
}

render() {
    return (
      <Navbar className="ui-header" expand="md">
        <NavbarBrand className="ui-header-brand">Hexacta Labs</NavbarBrand>
        <NavbarToggler onClick={this.toggle} />
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <UncontrolledDropdown className="ui-header-options" nav inNavbar>
              <DropdownToggle caret>
                <FaUserInjured />
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem
                  tag={() => (
                    <Link className="dropdown-item" to="/logout">
                      Salir
                    </Link>
                  )}
                />
              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
        </Collapse>
      </Navbar>
    );
  }

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>
  );
}

MainNav = () => {
  const { user } = useUser()

  return typeof user === 'undefined' ? (
    <Nav className="mr-auto" navbar>
      {navItems.unknown}
    </Nav>
  ) : user ? (
    <Nav className="mr-auto" navbar>
      {navItems.anon.concat(navItems.auth)}
    </Nav>
  ) : (
    <Nav className="mr-auto" navbar>
      {navItems.anon}
    </Nav>
  )
}

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>
  );
}

render() {
        const clusterType = this.state.clusterType;
        console.log(clusterType, "usertype");
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid>
                        {/* <Table rows={rows} columns={columns} />; */}
                        <Breadcrumbs title="사용자" breadcrumbItems={this.state.breadcrumbItems} />
                        <Row>
                            <Col lg={12}>
                                <Card>
                                    <CardBody className="pt-0">
                                        <Nav tabs className="nav-tabs-custom mb-4">

                                        </Nav>
                                        <div>
                                            {/* <Link to="/cluster/core/add" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link> */}
                                        </div>
                                        {/* {api.getAPI()} */}
                                        <UserTable />
                                        {/* <MDBDataTable searching={true} sortRows={['name']}  responsive data={data} className="mt-4" /> */}
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>


                    </Container>
                </div>
            </React.Fragment>


        )

    }

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>
  );
}

LoginRegister = () => {
	const [activeTab, setActiveTab] = useState('1');
	const toggle = (tab) => {
		if (activeTab !== tab) setActiveTab(tab);
	};
	return (
		<div className='desktop-login-reg-container'>
			<Nav pills style={{ padding: '1rem' }}>
				<NavLink
					style={{ borderRadius: '1.25rem' }}
					className={classnames({ active: activeTab === '1' })}
					onClick={() => {
						toggle('1');
					}}
				>
					<h1 className='desktop-register-tab'>Register</h1>
				</NavLink>
				<NavLink
					style={{ borderRadius: '1.25rem' }}
					className={classnames({ active: activeTab === '2' })}
					onClick={() => {
						toggle('2');
					}}
				>
					<h1 className='desktop-login-tab'>Sign In</h1>
				</NavLink>
			</Nav>
			<TabContent activeTab={activeTab}>
				<TabPane tabId='1'>
					<Col xl='13'>
						<Card className='desktop-register-card' style={{ border: 'none' }}>
							<Register />
						</Card>
					</Col>
				</TabPane>

				<TabPane tabId='2'>
					<Col xl='13'>
						<Card className='desktop-login-card' style={{ border: 'none' }}>
							<Login />
						</Card>
					</Col>
				</TabPane>
			</TabContent>
		</div>
	);
}

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>
    );
}

// onInputChange = (e) => { // 2. input 태그의 값이 변경 될 때마다 this.state.keyword 값이 변경
    //     this.setState({
    //         keyword: e.target.value
    //     });
    // }
    render() {
        const projectType = this.state.projectType;
        const params = this.state.params;
        console.log(projectType, "usertype");
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid>
                        {/* <Table rows={rows} columns={columns} />; */}
                        <Breadcrumbs title="사용자 프로젝트" breadcrumbItems={this.state.breadcrumbItems} />
                        <Row>
                            <Col lg={12}>
                                <Card>
                                    <CardBody className="pt-0">
                                        <Nav tabs className="nav-tabs-custom mb-4">

                                        </Nav>
                                        <div>
                                            <Link to="/cluster/edge/add" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
                                            <WorkspaceFilter projectType={projectType} params={params} />
                                        </div>
                                        {/* {api.getAPI()} */}
                                        <ProjectTable projectType={projectType} />
                                        {/* <MDBDataTable searching={true} sortRows={['name']}  responsive data={data} className="mt-4" /> */}
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>


                    </Container>
                </div>
            </React.Fragment>


        )

    }

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() {

    // eslint-disable-next-line
    const { children, ...attributes } = this.props;

    return (
      <React.Fragment>
        <AppSidebarToggler className="d-lg-none" display="md" mobile />
        <AppNavbarBrand
          full={{ src: logo, width: 89, height: 25, alt: 'CoreUI Logo' }}
          minimized={{ src: sygnet, width: 30, height: 30, alt: 'CoreUI Logo' }}
        />
        <AppSidebarToggler className="d-md-down-none" display="lg" />

        {/* <Nav className="d-md-down-none" navbar>
          <NavItem className="px-3">
            <NavLink to="/dashboard" className="nav-link" >Dashboard</NavLink>
          </NavItem>
          <NavItem className="px-3">
            <Link to="/users" className="nav-link">Users</Link>
          </NavItem>
          <NavItem className="px-3">
            <NavLink to="#" className="nav-link">Settings</NavLink>
          </NavItem>
        </Nav> */}
        <Nav className="ml-auto" navbar>
          {/* <NavItem className="d-md-down-none">
            <NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
          </NavItem> */}
          {/* <NavItem className="d-md-down-none">
            <NavLink to="#" className="nav-link"><i className="icon-list"></i></NavLink>
          </NavItem> */}
          {/* <NavItem className="d-md-down-none">
            <NavLink to="#" className="nav-link"><i className="icon-location-pin"></i></NavLink>
          </NavItem> */}
          <UncontrolledDropdown nav direction="down">
            <DropdownToggle nav>
              <img src={'../../assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
            </DropdownToggle>
            <DropdownMenu right>
              {/* <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
              <DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
              <DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
              <DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
              <DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem> */}
              <DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
              {/* <DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
              <DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
              <DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
              <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem> */}
              {/* <DropdownItem divider />
              <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem> */}
              <DropdownItem onClick={this.handleLogout}><i className="fa fa-lock"></i> Logout</DropdownItem>
            </DropdownMenu>
          </UncontrolledDropdown>
        </Nav> 
        {/* <AppAsideToggler className="d-md-down-none" /> */}
        {/*<AppAsideToggler className="d-lg-none" mobile />*/}
      </React.Fragment>
    );
  }

render() {
    const {className, dropDownToggleClassName} = this.props;
    const loggedIn = isLoggedIn();
    const username = (loggedIn && localStorage.getItem(config.fullNameStorageKey)) || 'Login';
    return (
        <Nav className={className} navbar>
          <UncontrolledDropdown nav>
            <DropdownToggle className={dropDownToggleClassName} nav>
              <Media className="align-items-center">
                    <span className="avatar avatar-sm rounded-circle">
                      <i className="fas fa-user"/>
                    </span>
                <Media className="ml-2 d-none d-lg-block">
                      <span className="mb-0 text-sm font-weight-bold">
                        {username}
                      </span>
                </Media>
              </Media>
            </DropdownToggle>
            <DropdownMenu className="dropdown-menu-arrow" right>
              {loggedIn ?
                  <>
                    <DropdownItem href="#" onClick={e => {
                      localStorage.clear();
                      e.preventDefault();
                      this.props.history.push("/");
                    }}>
                      <i className="ni ni-user-run"/>
                      <span>Logout</span>
                    </DropdownItem>
                  </>
                  :
                  <>
                    <DropdownItem href="#" onClick={() => this.props.history.push("/login")}>
                      <i className="fas fa-user"/>
                      <span>Volunteer</span>
                    </DropdownItem>
                    <DropdownItem href="#" onClick={() => this.props.history.push("/admin-login")}>
                      <i className="fas fa-users"/>
                      <span>Admin</span>
                    </DropdownItem>
                  </>
              }
            </DropdownMenu>
          </UncontrolledDropdown>
        </Nav>
    )
        ;
  }

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>
      </>
    );
  }

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>
  );
}

SideBar = ({ isOpen, toggle }) => (
  <div className={classNames("sidebar", { "is-open": isOpen })}>
    <div>
      <div className="sidebar-header">
        <span color="info" onClick={toggle} style={{ color: "#fff" }}>
          &times;
        </span>
        <Link to={"/home"}>
          <h3>GITAM Career Guidance Cell</h3>
        </Link>
      </div>
      <div align="center" className="pt-2 pb-2">
        <h4>Menu</h4>
      </div>
      <div className="side-menu">
        <Nav vertical className="pb-3">
          <li>
          <NavLink tag={Link} to={"/home"}>
              <FontAwesomeIcon icon={faHome} className="mr-2" />
              Home
            </NavLink>
          </li>
          <hr/>
          <span className="pl-3" style={{"textAlign":"initial"}}>
              <Collapsible className ="pl-1  fa fa" trigger={<UserIcon/>}>
              <Nav vertical className="list-unstyled">
                <ul style={{"padding":"0px"}}>
                <li className="pl-3">
                  <NavLink tag={Link} to={"/user-staff"}>
                  <FontAwesomeIcon icon={faUsers} className="mr-2" />
                    Staff
                  </NavLink>
                </li>
                <li className="pl-3">
                  <NavLink tag={Link} to={"/user-student"}>
                  <FontAwesomeIcon icon={faGraduationCap} className="mr-2" />
                    Student
                  </NavLink>
                </li>
                </ul>
              </Nav>
              </Collapsible>
            </span>
            <hr/>
          <li>
            <NavLink tag={Link} to={"/assessment"}>
                <FontAwesomeIcon icon={faEdit} className="mr-2"/>
                Assessment
            </NavLink>
          </li>
          <hr/>
          <li>
            <NavLink tag={Link} to={"/Placements"}>
              <FontAwesomeIcon icon={faUserGraduate} className="mr-2" />
              Placements
            </NavLink>
          </li>
          <hr/>
          <li>
            <NavLink tag={Link} to={"/IndividualStudentEntry"}>
              <FontAwesomeIcon icon={faChalkboardTeacher} className="mr-2" />
              Individual student
            </NavLink>
          </li>
          <hr/>
            <li>            
              <NavLink tag={Link} to={"/allstudents"}>
              <FontAwesomeIcon icon={faUserEdit} className="mr-2" />
              Allstudents
              </NavLink>
            </li>  
            <hr/>  
              <li>        
                <NavLink tag={Link} to={"/settings"}>
                <FontAwesomeIcon icon={faCog} className="mr-2"/>
                Settings
                </NavLink>
             </li>     
             <hr/>     
              <li>          
                <NavLink tag={Link} onClick={ e=>{localStorage.clear();
                  window.location.href = '/login';}}>
                        <FontAwesomeIcon icon={faSignOutAlt} className="mr-2" />
                        Logout
                      </NavLink>
                </li>   
                <hr/>     
</Nav>
      </div>
    </div>
  </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>
    )
}