Skip to content

Commit

Permalink
fix(*): conditional navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoseaCodes
HoseaCodes committed Mar 20, 2022
1 parent f424592 commit 5268454
Showing 1 changed file with 84 additions and 35 deletions.
119 changes: 84 additions & 35 deletions src/Components/NavBar/NavBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, {useReducer, useContext } from "react";
import axios from "axios";
import "./NavBar.css";
import burger from '../../Assets/Images/burger-min.png';
import { Link } from "react-router-dom";
import Logo from '../../Assets/Images/logo-min.png';
import { Link } from "react-router-dom";
import { GlobalState } from '../../GlobalState';
import {StyledHr} from '../../Layout/Hr/styledHr';
import axios from "axios";
import { AiOutlineShoppingCart } from 'react-icons/ai';


Expand All @@ -29,28 +29,90 @@ const NavBar = () => {
const adminRouter = () => {
return (
<>
<Link className="nav-link" to="/create_product">Create Product</Link>
<Link to="/products" className="nav-link">Products</Link>
{/* Admin User Management */}
{/* <Link className="nav-link" to="/create_product">Create Product</Link>
<Link to="/products" className="nav-link">Products</Link> */}
<Link to="/users" className="nav-link">Users</Link>
<li className="dropdown">
<a className="nav-link dropdown-toggle" href="/"
id="navdrop" role="button" data-toggle="dropdown"
data-hover="dropdown">Products</a>
<div className="dropdown-menu" aria-labelledby="navdrop">
<Link to={"/create_product"} className="dropdown-item nav-link">Create Product</Link>
<Link to={"/products"} rel="noopener noreferrer"
className="dropdown-item nav-link">View Products</Link>
</div>
</li>
{/* Admin User Management */}
</>
)};

const publicRouter = () => {
return (
<>
<Link to="/" className="nav-link active">Home</Link>
<Link to="/blog" className="nav-link">Blog</Link>
<li className="dropdown">
<a className="nav-link dropdown-toggle" href="/"
id="navdrop" role="button" data-toggle="dropdown"
data-hover="dropdown">Portfolio</a>
<div className="dropdown-menu" aria-labelledby="navdrop">
<Link href="http://www.dominiquehosea.com" rel="noopener noreferrer"
target="_blank" className="dropdown-item nav-link">Backend Portfolio</Link>
<Link href="/project" rel="noopener noreferrer"
className="dropdown-item nav-link">Project Case Studies</Link>
</div>
</li>
<Link to="/about" className="nav-link">About</Link>
<Link to="/contact" className="nav-link">Contact</Link>
</>
)};

const loggedInRouter = () => {
return (
<>
<Link to="/profile" className="nav-link">Profile</Link>
<Link to="/shop" className="nav-link">Shop</Link>
<Link className="nav-link" to="/history">History</Link>
<div className="nav-link" style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
<span >{cart.length}</span>
<Link to="/cart">
{" "}
<AiOutlineShoppingCart style={{marginLeft: '1rem',color: 'white'}}/>
{/* <img src={} alt="Shoppingcart" width="30" /> */}
</Link>
</div>
<Link to="/settings" className="nav-link">Settings</Link>
{/* <Link to="/blog/new" className="nav-link">Create Post</Link> */}
{
isAdmin ?
null
:
<Link to="/" className="nav-link active">Home</Link>
}
<li className="dropdown">
<a className="nav-link dropdown-toggle" href="/"
id="navdrop" role="button" data-toggle="dropdown"
data-hover="dropdown">Blog</a>
<div className="dropdown-menu" aria-labelledby="navdrop">
<Link to={"/blog/new"} className="dropdown-item nav-link">Create Post</Link>
<Link to={"/blog"} rel="noopener noreferrer"
className="dropdown-item nav-link">View Blog</Link>
</div>
</li>
<li className="dropdown">
<a className="nav-link dropdown-toggle" href="/"
id="navdrop" role="button" data-toggle="dropdown"
data-hover="dropdown">Shop</a>
<div className="dropdown-menu" aria-labelledby="navdrop">
<Link to="/shop" className="nav-link"> View Shop</Link>
<Link className="nav-link" to="/history">View Order History</Link>
<div className="nav-link" style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
<span >{cart.length}</span>
<Link to="/cart">
{" "}
<AiOutlineShoppingCart style={{marginLeft: '1rem',color: 'white'}}/>
{/* <img src={} alt="Shoppingcart" width="30" /> */}
</Link>
</div>
</div>
</li>
<li className="dropdown">
<a className="nav-link dropdown-toggle" href="/"
id="navdrop" role="button" data-toggle="dropdown"
data-hover="dropdown">Settings</a>
<div className="dropdown-menu" aria-labelledby="navdrop">
<Link to="/profile" className="nav-link">View Profile</Link>
<Link to="/settings" className="nav-link">View Settings</Link>
</div>
</li>
<Link className="nav-link" onClick={logoutUser}>Logout</Link>
</>
)};
Expand All @@ -66,33 +128,20 @@ const NavBar = () => {
<nav className='nav-combo'>
{
!isLoggedIn ?
<img className='nav-logo' src={Logo} alt="HoseaCodes" />
<Link to="/login" >
<img className='nav-logo' src={Logo} alt="HoseaCodes" />
</Link>
:
<h1 style={{color: 'white'}}>Welcome, {user.name.split(' ')[0]}</h1>
}
<ul className={`left-nav ${isActive ? "" : "left-nav open"}`}>
<Link to="/" className="nav-link active">Home</Link>
<Link to="/blog" className="nav-link">Blog</Link>
{isAdmin && adminRouter()}
{
isLoggedIn ?
loggedInRouter()
:
<>
<li className="dropdown">
<a className="nav-link dropdown-toggle" href="/"
id="navdrop" role="button" data-toggle="dropdown"
data-hover="dropdown">Portfolio</a>
<div className="dropdown-menu" aria-labelledby="navdrop">
<a href="http://www.dominiquehosea.com" rel="noopener noreferrer"
target="_blank" className="dropdown-item nav-link">Backend Portfolio</a>
<a href="/project" rel="noopener noreferrer"
className="dropdown-item nav-link">Project Case Studies</a>
</div>
</li>
<Link to="/about" className="nav-link">About</Link>
<Link to="/contact" className="nav-link">Contact</Link>
</>
publicRouter()

}

{/* {isAdmin ?
Expand Down

0 comments on commit 5268454

Please sign in to comment.