reactstrap#Navbar JavaScript Examples

Topbar = ({ toggleSidebar }) => {
  const [topbarIsOpen, setTopbarOpen] = useState(true);
  const toggleTopbar = () => setTopbarOpen(!topbarIsOpen);

  return (
    <Navbar
      color="light"
      light
      className="navbar shadow-sm p-2 mb-5 bg-white navbar navbar-lg"
      expand="lg"
    >
      <Button color="info" onClick={toggleSidebar}>
        <FontAwesomeIcon icon={faAlignLeft} />
      </Button>
      <NavbarToggler onClick={toggleTopbar} />
      <Collapse isOpen={topbarIsOpen} navbar className="ml-auto pb-2">
        <div className="ml-auto pt-2">
          <img src={require("./Pic1.jpeg")} align="right" width="75px"/>
          <p className="pt-3" align="center">
            {" "}
            Welcome Kishor Buddha
          </p>
        </div>
      </Collapse>
    </Navbar>
  );
}

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

Header = () => {
  return (
    <Navbar color="info" light>
      <NavbarBrand tag={Link} to="/" className="text-white">LCO Contact App</NavbarBrand>
      <NavbarText className="text-white float-right">
        Contact app
      </NavbarText>
    </Navbar>
  );
}

render() {
        const {isVisible} = this.state;

        return (
            <div>
                <IntersectionVisible
                    onHide={e => this.onHide(e)}
                    onShow={e => this.onShow(e)}
                >
                    <header className="hidden-print">
                        <Media object src={logo} className="logo d-flex justify-content-center"/>
                        <Navbar expand="lg" fixed={!isVisible ? 'top' : ''}>
                            <NavbarToggler onClick={() => this.toggleNavbar()}/>
                            <Collapse isOpen={this.state.isCollapse} navbar>
                                <NavItems
                                    redirect={route => this.redirect(route)}
                                />
                            </Collapse>
                        </Navbar>
                    </header>
                </IntersectionVisible>
            </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>
    );
  }

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

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>
                        <NavItem>
                            <Link to="/myregistrations">My Registrations</Link>
                        </NavItem>
                    </Nav>
                </Collapse>
            </Navbar>
        </div>
    : ""
}

Topbar = ({ toggleSidebar }) => {
  const [topbarIsOpen, setTopbarOpen] = useState(true);
  const toggleTopbar = () => setTopbarOpen(!topbarIsOpen);

  return (
    <Navbar 
      className="navbar shadow-sm p-2 mb-5 navbar-fixed-top"
      expand="lg"
      style={{ backgroundColor: "#767B91", color: "white" }}
    >
      <Button color="info" onClick={toggleSidebar}>
        <FontAwesomeIcon icon={faAlignLeft} />
      </Button>
      <NavbarToggler onClick={toggleTopbar} />
      <Collapse isOpen={topbarIsOpen} navbar className="ml-auto pb-2">
        <div className="ml-auto pt-2">
          <img src={require("./Pic1.jpeg")} align="right" width="75px" />
          <p className="pt-3" align="center">
            {" "}
            Welcome Kishor Buddha
          </p>
        </div>
      </Collapse>
    </Navbar>
  );
}

Topbar = ({ toggleSidebar }) => {
  const [topbarIsOpen, setTopbarOpen] = useState(true);
  const toggleTopbar = () => setTopbarOpen(!topbarIsOpen);

  return (
    <Navbar
      className="navbar shadow-sm p-2 mb-5 rounded"
      expand="lg"
      style={{ backgroundColor: "#767B91", color: "white" }}
    >
      <Button color="info" onClick={toggleSidebar}>
        <FontAwesomeIcon icon={faAlignLeft} />
      </Button>
      <NavbarToggler onClick={toggleTopbar} />
      <Collapse isOpen={topbarIsOpen} navbar className="ml-auto pb-2">
        <div className="ml-auto pt-2">
          <img src={require("./Pic1.jpeg")} align="right" width="80px" height="100px" />
          <p align="center">
            {" "}
            Welcome Kishor Buddha
          </p>
        </div>
      </Collapse>
    </Navbar>
  );
}

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

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

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

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

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>
    : ""
}

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

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

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

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

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

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

render() {
        return (
            <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>
        );
    }

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() {
    const { isOpen, isOpenToggler } = this.state
    return (
      <div>
        <h5 className="mb-4">
          <strong>Default Navbar</strong>
        </h5>
        <div className="mb-5">
          <Navbar color="light" expand="md">
            <NavbarBrand href="/">reactstrap</NavbarBrand>
            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink href="/components/">Components</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
                </NavItem>
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret>
                    Options
                  </DropdownToggle>
                  <DropdownMenu right>
                    <DropdownItem>Option 1</DropdownItem>
                    <DropdownItem>Option 2</DropdownItem>
                    <DropdownItem divider />
                    <DropdownItem>Reset</DropdownItem>
                  </DropdownMenu>
                </UncontrolledDropdown>
              </Nav>
            </Collapse>
          </Navbar>
        </div>
        <h5 className="mb-4">
          <strong>Navbar Toggler</strong>
        </h5>
        <div className="mb-5">
          <Navbar color="faded">
            <NavbarBrand href="/" className="mr-auto">
              reactstrap
            </NavbarBrand>
            <NavbarToggler onClick={this.toggleToggler} className="mr-2" />
            <Collapse isOpen={!isOpenToggler} navbar>
              <Nav navbar>
                <NavItem>
                  <NavLink href="/components/">Components</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
                </NavItem>
              </Nav>
            </Collapse>
          </Navbar>
        </div>
      </div>
    )
  }

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

NavbarComponent = ({ setShows }) => {
  const [search, setSearch] = useState('');

  const getShows = async () => {
    if (search.length < 2) return alert('¡Llena el campo!');
    const SEARCH_SHOWS = `http://api.tvmaze.com/search/shows?q=${search}`;
    const { data } = await axios.get(SEARCH_SHOWS);
    setShows(data);
  }

  return (
    <div>
      <Navbar color="faded" dark style={{
        backgroundColor: '#9256b5',
      }}>
        <NavbarBrand className="mr-auto">
          <Link style={{
            textDecoration: 'none',
            color: 'white',
            display: 'flex',
            alignItems: 'center',
          }} to="/">
            <img style={{ height: '32px', marginRight: '8px' }} src={tv} alt="DEVFlix Logo"/>
            <span id="logo-text" style={{ paddingTop: '4px', fontWeight: 'bold' }}>DEVFlix</span>
          </Link>
        </NavbarBrand>
        <input
          onChange={(e) => setSearch(e.target.value)}
          id="navbar-search"
          style={{ width: "50%" }}
          type="text"
          placeholder="Buscar series" />
        <button
          onClick={getShows}
          style={{
            color: 'white',
            backgroundColor: '#683d82',
          }}
          type="button">
            Buscar
        </button>
      </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>
    )
}

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

/* componentDidMount(){
        Axios.get("http://localhost:80/login-backend/UserNavbar.php?id="+this.state.login)
        .then(res => {
          console.log(res.data);
          this.setState({
            fName: res.data[0]['first_name'],
            lName: res.data[0]['last_name']
          })
        })
  }*/

  render() {
    return (
        <Router>
        <Navbar dark color="dark" expand="lg">
              <Row>
                <div className="col-3 col-md-4 col-lg-3 col-x-1">
                   <NavLink tag={Link} to="/Dashboard" style={{"color":"white","padding":"0px","text-align":"initial"}}>
                    <img src={require("../asstes/gitamlogo.png")} height="50" width="50" />
                      GITAM Bengaluru
                    </NavLink>
                </div>
                <div className="col-7 col-md-6 col-lg-7 col-x-1 pt-2" style={{"color":"aliceblue","font-size":"25px"}}>
                      <h4 className="pr-3"> GITAM Career Guidance Cell </h4>
                </div>
                <div className="pt-2" style={{"padding":"0px","padding-left":"40px"}}>
                      <NavLink tag={Link} to="/Dashboard" style={{"text-align":"right","padding":"0px"}}>
                        <Tooltip title="Home">
                        <i className="fa fa-home fa-lg" style={{"color":"aliceblue"}}></i>
                        </Tooltip>
                      </NavLink>  
                     
                </div>
                <div className="pt-2" style={{"padding":"0px","padding-left":"40px"}}>
                      <NavLink tag={Link} to="/changepassword" style={{"text-align":"right","padding":"0px"}}>
                        <Tooltip title="Settings">
                        <i className="fa fa-cog fa-lg" style={{"color":"aliceblue"}}></i>
                        </Tooltip>
                      </NavLink>  
                     
                </div>
                      <div className="pt-2">
                        <NavLink tag={Link} style={{"text-align":"left","padding":"0px","padding-left":"40px"}} onClick={ e=>{localStorage.clear();
                                window.location.href = '/login';}}>
                                  <Tooltip title="Log Out">
                                    <i className="fa fa-power-off fa-lg" style={{"color":"aliceblue"}} ></i> 
                                  </Tooltip>
                        </NavLink> 
                </div>
              </Row>
          </Navbar>
          <Switch>
             <Route exact path="/Dashboard" component={()=>(<div><Dashboard login={this.props.value}/></div>)}></Route>
             <Route path="/changepassword" component={()=>(<Changepassword login={this.props.value}/>)}></Route>
          </Switch>
        </Router>
    );
  }

render() {
    return (
      <>
        <section>
          <Container>
            {/* Navigation */}
            <h2 className="mb-5">
              <span>Navbars</span>
            </h2>
          </Container>
          {/* Navbar default */}
          <Navbar className="navbar-dark bg-default" expand="lg">
            <Container>
              <NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
                Default Color
              </NavbarBrand>
              <button className="navbar-toggler" id="navbar-default">
                <span className="navbar-toggler-icon" />
              </button>
              <UncontrolledCollapse navbar toggler="#navbar-default">
                <div className="navbar-collapse-header">
                  <Row>
                    <Col className="collapse-brand" xs="6">
                      <Link to="/">
                        <img
                          alt="..."
                          src={require("assets/img/brand/argon-react.png")}
                        />
                      </Link>
                    </Col>
                    <Col className="collapse-close" xs="6">
                      <button className="navbar-toggler" id="navbar-default">
                        <span />
                        <span />
                      </button>
                    </Col>
                  </Row>
                </div>
                <Nav className="ml-lg-auto" navbar>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="ni ni-favourite-28" />
                      <span className="nav-link-inner--text d-lg-none">
                        Discover
                      </span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="ni ni-notification-70" />
                      <span className="nav-link-inner--text d-lg-none">
                        Profile
                      </span>
                    </NavLink>
                  </NavItem>
                  <UncontrolledDropdown nav inNavbar>
                    <DropdownToggle nav className="nav-link-icon">
                      <i className="ni ni-settings-gear-65" />
                      <span className="nav-link-inner--text d-lg-none">
                        Settings
                      </span>
                    </DropdownToggle>
                    <DropdownMenu
                      aria-labelledby="navbar-default_dropdown_1"
                      right
                    >
                      <DropdownItem
                        href="#pablo"
                        onClick={e => e.preventDefault()}
                      >
                        Action
                      </DropdownItem>
                      <DropdownItem
                        href="#pablo"
                        onClick={e => e.preventDefault()}
                      >
                        Another action
                      </DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem
                        href="#pablo"
                        onClick={e => e.preventDefault()}
                      >
                        Something else here
                      </DropdownItem>
                    </DropdownMenu>
                  </UncontrolledDropdown>
                </Nav>
              </UncontrolledCollapse>
            </Container>
          </Navbar>
          {/* Navbar primary */}
          <Navbar className="navbar-dark bg-primary mt-4" expand="lg">
            <Container>
              <NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
                Primary Color
              </NavbarBrand>
              <button className="navbar-toggler" id="navbar-primary">
                <span className="navbar-toggler-icon" />
              </button>
              <UncontrolledCollapse navbar toggler="#navbar-primary">
                <div className="navbar-collapse-header">
                  <Row>
                    <Col className="collapse-brand" xs="6">
                      <Link to="/">
                        <img
                          alt="..."
                          src={require("assets/img/brand/argon-react.png")}
                        />
                      </Link>
                    </Col>
                    <Col className="collapse-close" xs="6">
                      <button className="navbar-toggler" id="navbar-primary">
                        <span />
                        <span />
                      </button>
                    </Col>
                  </Row>
                </div>
                <Nav className="ml-lg-auto" navbar>
                  <NavItem>
                    <NavLink href="#pablo" onClick={e => e.preventDefault()}>
                      Discover <span className="sr-only">(current)</span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink href="#pablo" onClick={e => e.preventDefault()}>
                      Profile
                    </NavLink>
                  </NavItem>
                  <UncontrolledDropdown nav inNavbar>
                    <DropdownToggle nav>Settings</DropdownToggle>
                    <DropdownMenu
                      aria-labelledby="navbar-primary_dropdown_1"
                      right
                    >
                      <DropdownItem
                        href="#pablo"
                        onClick={e => e.preventDefault()}
                      >
                        Action
                      </DropdownItem>
                      <DropdownItem
                        href="#pablo"
                        onClick={e => e.preventDefault()}
                      >
                        Another action
                      </DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem
                        href="#pablo"
                        onClick={e => e.preventDefault()}
                      >
                        Something else here
                      </DropdownItem>
                    </DropdownMenu>
                  </UncontrolledDropdown>
                </Nav>
              </UncontrolledCollapse>
            </Container>
          </Navbar>
          {/* Navbar success */}
          <Navbar className="navbar-dark bg-success mt-4" expand="lg">
            <Container>
              <NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
                Success Color
              </NavbarBrand>
              <button className="navbar-toggler" id="navbar-success">
                <span className="navbar-toggler-icon" />
              </button>
              <UncontrolledCollapse navbar toggler="#navbar-success">
                <div className="navbar-collapse-header">
                  <Row>
                    <Col className="collapse-brand" xs="6">
                      <Link to="/">
                        <img
                          alt="..."
                          src={require("assets/img/brand/argon-react.png")}
                        />
                      </Link>
                    </Col>
                    <Col className="collapse-close" xs="6">
                      <button className="navbar-toggler" id="navbar-success">
                        <span />
                        <span />
                      </button>
                    </Col>
                  </Row>
                </div>
                <Nav className="ml-lg-auto" navbar>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="ni ni-favourite-28" />
                      <span className="nav-link-inner--text d-lg-none">
                        Favorites
                      </span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="ni ni-planet" />
                      <span className="nav-link-inner--text d-lg-none">
                        Another action
                      </span>
                    </NavLink>
                  </NavItem>
                  <UncontrolledDropdown nav inNavbar>
                    <DropdownToggle nav className="nav-link-icon">
                      <i className="ni ni-settings-gear-65" />
                      <span className="nav-link-inner--text d-lg-none">
                        Settings
                      </span>
                    </DropdownToggle>
                    <DropdownMenu
                      aria-labelledby="navbar-success_dropdown_1"
                      right
                    >
                      <DropdownItem
                        href="#pablo"
                        onClick={e => e.preventDefault()}
                      >
                        Action
                      </DropdownItem>
                      <DropdownItem
                        href="#pablo"
                        onClick={e => e.preventDefault()}
                      >
                        Another action
                      </DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem
                        href="#pablo"
                        onClick={e => e.preventDefault()}
                      >
                        Something else here
                      </DropdownItem>
                    </DropdownMenu>
                  </UncontrolledDropdown>
                </Nav>
              </UncontrolledCollapse>
            </Container>
          </Navbar>
          {/* Navbar danger */}
          <Navbar className="navbar-dark bg-danger mt-4" expand="lg">
            <Container>
              <NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
                Danger Color
              </NavbarBrand>
              <button className="navbar-toggler" id="navbar-danger">
                <span className="navbar-toggler-icon" />
              </button>
              <UncontrolledCollapse navbar toggler="#navbar-danger">
                <div className="navbar-collapse-header">
                  <Row>
                    <Col className="collapse-brand" xs="6">
                      <Link to="/">
                        <img
                          alt="..."
                          src={require("assets/img/brand/argon-react.png")}
                        />
                      </Link>
                    </Col>
                    <Col className="collapse-close" xs="6">
                      <button className="navbar-toggler" id="navbar-danger">
                        <span />
                        <span />
                      </button>
                    </Col>
                  </Row>
                </div>
                <Nav className="ml-auto" navbar>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-facebook-square" />
                      <span className="nav-link-inner--text d-lg-none">
                        Facebook
                      </span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-twitter" />
                      <span className="nav-link-inner--text d-lg-none">
                        Twitter
                      </span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-google-plus" />
                      <span className="nav-link-inner--text d-lg-none">
                        Google +
                      </span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-instagram" />
                      <span className="nav-link-inner--text d-lg-none">
                        Instagram
                      </span>
                    </NavLink>
                  </NavItem>
                </Nav>
              </UncontrolledCollapse>
            </Container>
          </Navbar>
          {/* Navbar warning */}
          <Navbar className="navbar-dark bg-warning mt-4" expand="lg">
            <Container>
              <NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
                Warning Color
              </NavbarBrand>
              <button className="navbar-toggler" id="navbar-warning">
                <span className="navbar-toggler-icon" />
              </button>
              <UncontrolledCollapse navbar toggler="#navbar-warning">
                <div className="navbar-collapse-header">
                  <Row>
                    <Col className="collapse-brand" xs="6">
                      <Link to="/">
                        <img
                          alt="..."
                          src={require("assets/img/brand/argon-react.png")}
                        />
                      </Link>
                    </Col>
                    <Col className="collapse-close" xs="6">
                      <button className="navbar-toggler" id="navbar-warning">
                        <span />
                        <span />
                      </button>
                    </Col>
                  </Row>
                </div>
                <Nav className="align-items-lg-center ml-lg-auto" navbar>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-facebook-square" />
                      <span className="nav-link-inner--text d-lg-none">
                        Share
                      </span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-twitter" />
                      <span className="nav-link-inner--text d-lg-none">
                        Tweet
                      </span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-pinterest" />
                      <span className="nav-link-inner--text d-lg-none">
                        Pin
                      </span>
                    </NavLink>
                  </NavItem>
                </Nav>
              </UncontrolledCollapse>
            </Container>
          </Navbar>
          {/* Navbar info */}
          <Navbar className="navbar-dark bg-info mt-4" expand="lg">
            <Container>
              <NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
                Info Color
              </NavbarBrand>
              <button className="navbar-toggler" id="navbar-info">
                <span className="navbar-toggler-icon" />
              </button>
              <UncontrolledCollapse navbar toggler="#navbar-info">
                <div className="navbar-collapse-header">
                  <Row>
                    <Col className="collapse-brand" xs="6">
                      <Link to="/">
                        <img
                          alt="..."
                          src={require("assets/img/brand/argon-react.png")}
                        />
                      </Link>
                    </Col>
                    <Col className="collapse-close" xs="6">
                      <button className="navbar-toggler" id="navbar-info">
                        <span />
                        <span />
                      </button>
                    </Col>
                  </Row>
                </div>
                <Nav className="ml-auto" navbar>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-facebook-square mr-1" />
                      <span className="nav-link-inner--text">Facebook</span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-twitter mr-1" />
                      <span className="nav-link-inner--text">Twitter</span>
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className="nav-link-icon"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i className="fa fa-instagram mr-1" />
                      <span className="nav-link-inner--text">Instagram</span>
                    </NavLink>
                  </NavItem>
                </Nav>
              </UncontrolledCollapse>
            </Container>
          </Navbar>
        </section>
      </>
    );
  }

render() {
    const {logo} = this.props;
    let navbarBrandProps;
    if (logo && logo.innerLink) {
      navbarBrandProps = {
        to: logo.innerLink,
        tag: Link
      };
    } else if (logo && logo.outterLink) {
      navbarBrandProps = {
        href: logo.outterLink,
        target: "_blank"
      };
    }
    const isAuthorisedUser = isAuthorisedUserLoggedIn();
    return (
        <Navbar
            className="navbar-vertical fixed-left navbar-light bg-custom-navbar"
            expand="md"
            id="sidenav-main"
        >
          <Container fluid>
            {/* Toggler */}
            <button
                className="navbar-toggler"
                type="button"
                onClick={this.toggleCollapse}
            >
              <span className="fas fa-bars text-white"/>
            </button>
            {/* Brand */}
            {logo ? (
                <NavbarBrand className="pt-0 ml-3" {...navbarBrandProps}>
                  <img
                      alt={logo.imgAlt}
                      className="navbar-brand-img"
                      src={logo.imgSrc}
                  />
                </NavbarBrand>
            ) : null}

            <Row> {/*  className="d-inline-flex" */}
              <Col className="mr-3">
                <Nav className="align-items-center d-md-none" navbar>
                  <Media className="align-items-center">
                    {/*<NavItem className="no-list-style mr--5">*/}
                    <NavLink href="/how-it-works" title="How it works?" className="px-0">
                  <span className="avatar avatar-sm bg-red">
                  <i className="fas fa-info text-white text-lg rounded-circle"/>
                  </span>
                    </NavLink>
                  </Media>{/* User */}
                </Nav>
              </Col>
              <Col>
                <UserDropDown className="align-items-center d-md-none"/>
              </Col>
            </Row>

            {/* Collapse */}
            <Collapse navbar isOpen={this.state.collapseOpen}>
              {/* Collapse header */}
              <div className="navbar-collapse-header d-md-none">
                <Row>
                  {logo ? (
                      <Col className="collapse-brand" xs="6">
                        {logo.innerLink ? (
                            <Link to={logo.innerLink}>
                              <img alt={logo.imgAlt} src={logo.imgSrc}/>
                            </Link>
                        ) : (
                            <a href={logo.outterLink}>
                              <img alt={logo.imgAlt} src={logo.imgSrc}/>
                            </a>
                        )}
                      </Col>
                  ) : null}
                  <Col className="collapse-close" xs="6">
                    <button
                        className="navbar-toggler"
                        type="button"
                        onClick={this.toggleCollapse}
                    >
                      <span/>
                      <span/>
                    </button>
                  </Col>
                </Row>
              </div>
              {/* Navigation */}
              <Nav navbar>
                {this.getNavLink('tables', 'text-indigo')}
                {isAuthorisedUser && this.getCustomNavLink('newRequests', 'New Requests',
                    '/requests/new', 'fas fa-clipboard text-orange')}
                {this.getNavLink('pendingRequests', 'text-yellow')}
                {isAuthorisedUser && this.getCustomNavLink('inProgressRequests', 'In Progress Requests',
                    '/requests/in-progress', 'fas fa-clipboard-list')}
                {this.getCustomNavLink('completedRequests', 'Completed Requests',
                    '/requests/completed', 'fas fa-clipboard-check text-green')}
                {this.getNavLink('viewOnMap', 'text-red')}
                {this.getNavLink('about', 'text-blue')}
                {this.getNavLink('ourPartners', 'text-green')}
                {this.getNavLink('usefulLinks', 'text-teal')}
                {this.getNavLink('contactUs', 'text-green')}
              </Nav>
              {/* Divider */}
              <hr className="my-3"/>
              <div className="mb-0 mt-auto">
                <p className="font-italic">Only a life lived for others is a life worthwhile</p>
                <p className="font-italic float-md-right">- Albert Einstein</p>
              </div>
            </Collapse>
          </Container>
        </Navbar>
    );
  }

render() {
    const { mode, classes } = this.props;
    const { hostname, port } = window.location;
    const webSocketProtocol =
      window.location.protocol === 'https:' ? 'wss' : 'ws';
    const webSocketUrl = `${webSocketProtocol}://${hostname}:${port}/`;
    const dark = mode === 'dark';
    const {
      isLoading,
      selectedChannel,
      channels,
      notifyCount,
      notifyDrawer,
      adminDrawer,
      modalOpen,
      notifications
    } = this.state;

    const links = [
      { to: '/', label: 'DASHBOARD', exact: true },
      { to: '/network', label: 'NETWORK' },
      { to: '/blocks', label: 'BLOCKS' },
      { to: '/transactions', label: 'TRANSACTIONS' },
      { to: '/chaincodes', label: 'CHAINCODES' },
      { to: '/channels', label: 'CHANNELS' }
    ];

    return (
      <div>
        {/* production */}
        {/* development */}
        <Websocket
          url={webSocketUrl}
          onMessage={this.handleData.bind(this)}
          reconnect
        />
        <Router>
          <div>
            <Navbar className={classes.navbarHeader} expand="lg" fixed="top">
              <NavbarBrand href="/">
                {' '}
                <img
                  src={Logo}
                  className={classes.logo}
                  alt="Hyperledger Logo"
                />
              </NavbarBrand>
              <NavbarToggler onClick={this.toggle}>
                <FontAwesome name="bars" className={classes.toggleIcon} />
              </NavbarToggler>
              <Collapse isOpen={this.state.isOpen} navbar>
                <Nav
                  className="ml-auto navbar-left"
                  navbar
                  onMouseLeave={this.closeToggle}
                >
                  {links.map(({ to, label, ...props }) => (
                    <li key={to}>
                      <NavLink
                        to={to}
                        className={classes.tab}
                        activeClassName={classes.activeTab}
                        onClick={this.toggle}
                        {...props}
                      >
                        {label}
                      </NavLink>
                    </li>
                  ))}
                  <div className={classes.adminButton}>
                    <Select
                      className={classes.channel}
                      placeholder="Select Channel..."
                      required
                      name="form-field-name"
                      isLoading={isLoading}
                      value={selectedChannel}
                      onChange={this.handleChange}
                      onFocus={this.reloadChannels.bind(this)}
                      options={channels}
                    />
                  </div>
                  {
                    <div className={classes.adminButton}>
                      <FontAwesome
                        name="bell"
                        data-command="bell"
                        className={classes.bell}
                        onClick={() => this.handleDrawOpen('notifyDrawer')}
                      />
                      <Badge badgeContent={notifyCount} color="primary" />
                    </div>
                  }
                  {/*
              //Use when Admin functionality is required
              <div className={classes.adminButton}>
                <FontAwesome
                  name='cog'
                  className='cog'
                  onClick={() => this.handleDrawOpen('adminDrawer')}
                />
              </div> */}
                  <div
                    className={`${classes.adminButton} ${classes.themeSwitch}`}
                  >
                    <FontAwesome name="sun-o" className={classes.sunIcon} />
                    <Switch
                      onChange={() => this.handleThemeChange(mode)}
                      checked={dark}
                    />
                    <FontAwesome name="moon-o" className={classes.moonIcon} />
                  </div>
                </Nav>
              </Collapse>
            </Navbar>
            <Drawer
              anchor="right"
              open={notifyDrawer}
              onClose={() => this.handleDrawClose('notifyDrawer')}
            >
              <div tabIndex={0} role="button">
                <NotificationsPanel notifications={notifications} />
              </div>
            </Drawer>
            <Drawer
              anchor="right"
              open={adminDrawer}
              onClose={() => this.handleDrawClose('adminDrawer')}
            >
              <div tabIndex={0} role="button">
                <AdminPanel />
              </div>
            </Drawer>
            <Dialog
              open={modalOpen}
              onClose={this.handleClose}
              fullWidth={false}
              maxWidth="md"
            >
              <div className={classes.channelLoader}>
                <h4>Loading Channel Details</h4>
                <Loader
                  type="ThreeDots"
                  color="#005069"
                  height={70}
                  width={70}
                  className={classes.loader}
                />
              </div>
            </Dialog>
          </div>
        </Router>
      </div>
    );
  }