import React, { Fragment } from "react"; import { Link, withRouter, RouteComponentProps } from "react-router-dom"; import LOGO from "./logos/LOGO.png"; import { Nav, Navbar } from "react-bootstrap"; import { isAuthenticated, signout } from "../auth/helper"; import "../styles.css"; import { JWT } from "../interfaces/userInterfaces"; interface IProps extends RouteComponentProps { initialMode: boolean; changeMode: () => void; } const currentTab = (history: RouteComponentProps["history"], path: string) => { if (history.location.pathname === path) { return { color: "#ffc107", }; } else { return { color: "#FFFFFF", }; } }; const Navigation: React.FC<IProps> = ({ history, changeMode, initialMode }) => { return ( <div className="shadow-lg sticky-top navBar"> <Navbar collapseOnSelect expand="lg" bg="info" variant="light" sticky="top" > <Link className="nav-link" to="/"> <img style={{ height: 25, width: 25 }} src={LOGO} alt="LOGOf" /> </Link> <span style={{ color: initialMode ? "grey" : "yellow" }}>☀︎</span> <span className="toggle"> <input checked={initialMode} onChange={changeMode} type="checkbox" className="checkbox" id="checkbox" /> <label htmlFor="checkbox"></label> </span> <span style={{ color: initialMode ? "black" : "grey" }}> ☾</span> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="mr-auto"> <Link style={currentTab(history, "/")} className="nav-link" to="/"> Home </Link> <Link style={currentTab(history, "/cart")} className="nav-link" to="/cart" > Cart </Link> {isAuthenticated() && (isAuthenticated() as JWT).role === 0 && ( <Link style={currentTab(history, "/user/dashboard")} className="nav-link" to="/user/dashboard" > U. Dashboard </Link> )} {isAuthenticated() && (isAuthenticated() as JWT).role === 1 && ( <Link style={currentTab(history, "/admin/dashboard")} className="nav-link" to="/admin/dashboard" > A. Dashboard </Link> )} {!isAuthenticated() && ( <Fragment> <Link style={currentTab(history, "/signup")} className="nav-link" to="/signup" > SignUp </Link> <Link style={currentTab(history, "/signin")} className="nav-link" to="/signin" > SignIn </Link> </Fragment> )} {isAuthenticated() && ( <span className="nav-link signout" onClick={() => signout(() => { history.push("/"); }) } > Sign Out </span> )} </Nav> <Nav> <Link style={currentTab(history, "/contactus")} className="nav-link" to="/contactus" > Contact Us </Link> </Nav> </Navbar.Collapse> </Navbar> </div> ); }; export default withRouter(Navigation);