reactstrap#NavbarToggler 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>
  );
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

NavBar = () => {
    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>
    );
}

render() {
        let {
            headerBackgroundColor,
            enableMobileMenuSmall,
            enableHeaderShadow
        } = this.props;
        return (
            <Fragment>
                <NewAuctionAssembler
                    isOpen={this.state.auctionModal}
                    close={() => this.setState({auctionModal: !this.state.auctionModal})}
                    assemblerModal={this.toggleAssemblerModal}
                />

                <SendModal
                    isOpen={this.state.assemblerModal}
                    close={this.toggleAssemblerModal}
                    bidAmount={this.state.bidAmount}
                    isAuction={this.state.isAuction}
                    bidAddress={this.state.bidAddress}
                    currency={this.state.currency}
                />

                <Refund
                    isOpen={this.state.refund}
                    close={() => this.setState({refund: false})}
                />

                <NewArtwork
                    sendModal={this.toggleAssemblerModal}
                    isOpen={this.state.newArtworkModal}
                    close={() => this.setState({newArtworkModal: !this.state.newArtworkModal})}/>


                <div id='myHeader' style={{zIndex: '10'}}>
                    <ReactCSSTransitionGroup
                        component="div"
                        className={cx("app-header", false, {'header-shadow': true})}
                        transitionName="HeaderAnimation"
                        transitionAppear={true}
                        transitionAppearTimeout={150}
                        transitionEnter={false}
                        transitionLeave={false}>
                        <Navbar color="white" light expand="md">
                            <NavbarBrand href="/">
                                <img
                                    style={{height: '40px'}}
                                    src={nodeWallet}
                                />

                            </NavbarBrand>
                            <NavbarToggler onClick={() => this.setState({isOpen: !this.state.isOpen})}/>
                            <Collapse isOpen={this.state.isOpen} navbar>
                                <Col md='9'>
                                    <Nav className="mr-auto" navbar>
                                        <NavItem>
                                            <NavLink href="#/auction/active?type=all"
                                                     active={window.location.href.includes("#/auction/active")}>Active
                                                Auctions</NavLink>
                                        </NavItem>
                                        <NavItem>
                                            <NavLink href="#/auction/history"
                                                     active={window.location.href.includes("#/auction/history")}
                                            >Past Auctions</NavLink>
                                        </NavItem>
                                        <NavItem>
                                            <NavLink href="#/owned"
                                                     active={window.location.href.includes("#/owned")}
                                            >Owned Artworks</NavLink>
                                        </NavItem>
                                        <NavItem>
                                            <NavLink onClick={() => this.setState({refund: true})}>
                                                Refund
                                            </NavLink>
                                        </NavItem>
                                        <NavItem>
                                            <NavLink href="#/faq"
                                                     active={window.location.href.includes("#/faq")}
                                            >
                                                FAQ
                                            </NavLink>
                                        </NavItem>
                                        {/*<div className="search-container">*/}
                                        <div className="search-box">
                                            <form className="d-flex justify-content-between align-items-center"
                                                  onSubmit={(e) => {
                                                      e.preventDefault();
                                                      this.updateParams('searchValue', this.state.searchValue)
                                                  }}>
                                                {/*< className="">*/}
                                                <input
                                                    placeholder="Search in name, description and addresses"
                                                    value={this.state.searchValue}
                                                    onChange={(e) => {
                                                        this.setState({searchValue: e.target.value})
                                                    }}
                                                />
                                                    <button className="search-icon-container" type="submit">
                                                        {/*<i className="lnr lnr-magnifier search-icon"/>*/}
                                                        <span className="lnr lnr-magnifier font-size-lg"/>
                                                    </button>
                                            </form>
                                        </div>
                                        {/*</div>*/}
                                    </Nav>
                                </Col>
                                <Col md='3'>
                                    <div className='float-right'>
                                        <Row>
                                            <UncontrolledButtonDropdown>
                                                <DropdownToggle outline className="border-0 mr-2 font-size-lg"
                                                                color="none">
                                                    <span className="notificationIcon pe-7s-plus font-weight-bold"/>
                                                </DropdownToggle>
                                                <DropdownMenu>
                                                    <DropdownItem
                                                        onClick={() => {
                                                            this.openAuction()
                                                        }}>New Auction</DropdownItem>
                                                    <DropdownItem
                                                        onClick={() => this.openArtwork()}>Create Artwork</DropdownItem>
                                                </DropdownMenu>

                                            </UncontrolledButtonDropdown>
                                            <WalletModal/>
                                        </Row>
                                    </div>
                                </Col>

                            </Collapse>
                        </Navbar>
                    </ReactCSSTransitionGroup>
                </div>

            </Fragment>
        );
    }

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

  function toggleCollapse() {
    setOpen(!isOpen)
  }

  function toggleDropdown() {
    setDropdownOpen(!dropdownOpen)
  }

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

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

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

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

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

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

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

                      <DropdownItem divider />

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

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

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