Navigation Bar - MukeshKumar101/IPL_Auction GitHub Wiki

Problem Statement

To create a Responsive Navigation bar and it must be static for all other pages in IPL auction Application.

Jobs to be done

  • To create a folder named components.
  • To create a responsive navigation bar with adaptation to the display.
  • Each menu in the navigation bar should perform separate actions.
  • The selected menu in the navigation bar should be active with a blue background.
  • Each menu must be separated by a vertical line that fits the navigation bar.

Possibilities

  • When the display is in the mobile view the navigation bar must be turned into a hamburger menu.
  • On clicking(MobileView) the hamburger menu drawer should move from left to right.
  • Each menu has to perform an operation based on the functionalities allocated to it.
  • If admin logins to the application all menu(Home, Players, TeamDetails, Auction, GoLive) should be displayed in the navigation bar.
  • If the buyer logins to the application menu(Home, Players, TeamDetails, GoLive) should be displayed in the navigation bar.
  • The page must not have any change if the empty space in the navigation bar clicked.

Implementation Plan

  • Create a folder named component and create a subfolder named Navbar

The Navbar subfolder will have the following files:

Navbar.js

import React from 'react'; import DrawerButton from '../Sidedrawer/DrawerButton'; import authentication from '../../authentication'; import './Navbar.css'; import { NavLink } from 'react-router-dom'; const Navbar = props => {

let isAdmin = authentication.isAdmin;

return(
<nav className="navbar">
    <div className="navbar_button">
        <DrawerButton click={props.drawerClickHandler}/>
    </div>
    <div className="navbar_items">
        <NavLink to="/home" className="navbar_list" activeClassName="navbar_list_active">
            <div>
                <span className="menu_title">HOME</span>
            </div>
        </NavLink>
        <NavLink to="/players" className="navbar_list" activeClassName="navbar_list_active">
            <div>
                <span className="menu_title">PLAYERS</span>
            </div>
        </NavLink>
        <NavLink to="/teamdetails" className="navbar_list" activeClassName="navbar_list_active">
            <div>
                <span className="menu_title">TEAM DETAILS</span>
            </div>
        </NavLink>
        {isAdmin && <NavLink to="/auction" className="navbar_list" activeClassName="navbar_list_active">
            <div>
                <span className="menu_title">AUCTION</span>
            </div>
        </NavLink>}
        <NavLink to="/golive" className="navbar_list" activeClassName="navbar_list_active">
            <div>
                <span className="menu_title">GO LIVE<span className="reddot"/></span>
            </div>
        </NavLink>
    </div>
</nav>
);

}; export default Navbar;

  • Create another subfolder named BackDrop

The BackDrop subfolder has the following files

Backdrop.js

import React from 'react'; import './Backdrop.css'; const Backdrop = props => ( <div className="backdrop" onClick={props.click}/> ); export default Backdrop;

  • Create a subfolder named SideDrawer

The SideDrawer folder will have the following files

SideDrawer.js `import React from 'react'; import './SideDrawer.css'; import authentication from '../../authentication'; import {NavLink} from 'react-router-dom';

const SideDrawer = props => {

let isAdmin = authentication.isAdmin;
let drawer = "side-drawer";
if(props.show) {
    console.log("props")
    drawer = "side-drawer open"
}
return(
<nav className={drawer}>
        <NavLink to="/home" className="sidedrawer_list" activeClassName="sidedrawer_list_active"  >
            <div >
                <span className="menu_title">HOME</span>
            </div>
        </NavLink>
        <NavLink to="/players" className="sidedrawer_list" activeClassName="sidedrawer_list_active">
            <div>
                <span className="menu_title">PLAYERS</span>
            </div>
        </NavLink>
        <NavLink to="/teamdetails" className="sidedrawer_list" activeClassName="sidedrawer_list_active">
            <div>
                <span className="menu_title">TEAM DETAILS</span>
            </div>
        </NavLink>
        {isAdmin && <NavLink to="/auction" className="sidedrawer_list" activeClassName="sidedrawer_list_active">
            <div>
                <span className="menu_title">AUCTION</span>
            </div>
        </NavLink>}
        <NavLink to="/golive" className="sidedrawer_list" activeClassName="sidedrawer_list_active">
            <div>
                <span className="menu_title">GO LIVE<span className="reddot"/></span>
            </div>
        </NavLink>
</nav>
)

}; export default SideDrawer;`

DrawerButton.js

import React from 'react'; import './DrawerButton.css';

const DrawerButton = props => ( <button className="button" onClick={props.click}> <div className="button_line"/> <div className="button_line"/> <div className="button_line"/> </button> ); export default DrawerButton;

⚠️ **GitHub.com Fallback** ⚠️