reactstrap#Nav JavaScript Examples
The following examples show how to use
reactstrap#Nav.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: instructorDashboard.js From front-end with MIT License | 6 votes |
|
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>
</>
)
}
Example #2
| Source File: Footer.js From Merch-Dropper-fe with MIT License | 6 votes |
|
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>
);
}
Example #3
| Source File: NavMenu.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
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>
);
}
Example #4
| Source File: NavItems.js From agenda with MIT License | 6 votes |
|
NavItems = ({redirect}) => (
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink onClick={() => redirect('/app')}>
<FontAwesomeIcon icon={faHome}/>
Inicio
</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => redirect('/contacts')}>
<FontAwesomeIcon icon={faUserFriends}/>
Contactos
</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => redirect('/departments')}>
<FontAwesomeIcon icon={faBriefcase}/>
Departamentos
</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => redirect('/assignments')}>
<FontAwesomeIcon icon={faBriefcase}/>
Asignaciones
</NavLink>
</NavItem>
</Nav>
)
Example #5
| Source File: navbar1.js From web-frontend with MIT License | 6 votes |
|
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>
);
}
Example #6
| Source File: MainNav.js From hivemind with Apache License 2.0 | 6 votes |
|
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>
)
}
Example #7
| Source File: index.js From relay_09 with MIT License | 6 votes |
|
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>
);
}
Example #8
| Source File: User.js From gedge-platform with Apache License 2.0 | 6 votes |
|
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>
)
}
Example #9
| Source File: Header.jsx From aglomerou with GNU General Public License v3.0 | 6 votes |
|
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>
);
}
Example #10
| Source File: TopNav.js From mern-course-bootcamp with MIT License | 6 votes |
|
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>
: ""
}
Example #11
| Source File: DemoHeader.jsx From react-lte with MIT License | 6 votes |
|
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>
);
}
Example #12
| Source File: Desktop-Login-Register.js From Encon-fe with MIT License | 5 votes |
|
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>
);
}
Example #13
| Source File: Header.js From covidAnalytics with MIT License | 5 votes |
|
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>
);
}
Example #14
| Source File: NavBar.js From ReactJS-Projects with MIT License | 5 votes |
|
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>
)
}
Example #15
| Source File: navbar.js From web-frontend with MIT License | 5 votes |
|
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>
);
}
Example #16
| Source File: Navbar.jsx From portfolyo-mern with MIT License | 5 votes |
|
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>
);
}
Example #17
| Source File: navbar.component.js From blogApp with MIT License | 5 votes |
|
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>
);
}
Example #18
| Source File: Header.jsx From Edlib with GNU General Public License v3.0 | 5 votes |
|
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>
);
}
Example #19
| Source File: ProjectUser.js From gedge-platform with Apache License 2.0 | 5 votes |
|
// 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>
)
}
Example #20
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
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>
)
}
Example #21
| Source File: Navbar.js From Blogs with MIT License | 5 votes |
|
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>
);
}
Example #22
| Source File: DefaultHeader.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
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>
);
}
Example #23
| Source File: UserDropDown.js From covidsos with MIT License | 5 votes |
|
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>
)
;
}
Example #24
| Source File: ChartStats.js From study-chain with MIT License | 5 votes |
|
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>
);
}
Example #25
| Source File: Pills.jsx From nodejs-rest-api-boilerplate with MIT License | 5 votes |
|
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>
</>
);
}
Example #26
| Source File: Navigation.jsx From developer-portfolio with Apache License 2.0 | 4 votes |
|
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>
</>
);
}
Example #27
| Source File: ExamplesNavbar.js From Website2020 with MIT License | 4 votes |
|
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>
);
}
Example #28
| Source File: SideBar.js From GB-GCGC with MIT License | 4 votes |
|
SideBar = ({ isOpen, toggle }) => (
<div className={classNames("sidebar", { "is-open": isOpen })}>
<div>
<div className="sidebar-header">
<span color="info" onClick={toggle} style={{ color: "#fff" }}>
×
</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>
)
Example #29
| Source File: Navbar.js From Frontend with Apache License 2.0 | 4 votes |
|
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>
)
}
