# Nav Bar

**File Name:** NavBar.tsx

**Imports:**
- App Bar from Material-UI: [App Bar Doc](https://material-ui.com/components/app-bar/#app-bar)
- AppBar from '@material-ui/core/AppBar': [AppBar API](https://material-ui.com/api/app-bar/#appbar-api)
- Toolbar from '@material-ui/core/Toolbar': [Toolbar API](https://material-ui.com/api/toolbar/#toolbar-api)
- IconButton from '@material-ui/core/IconButton': [IconButton API](https://material-ui.com/api/icon-button/#iconbutton-api)
- InputBase from '@material-ui/core/InputBase': [InputBase API](https://material-ui.com/api/input-base/#inputbase-api)
- MenuIcon from '@material-ui/icons/Menu': [Material Icons](https://material-ui.com/components/material-icons/#material-icons)
- SearchIcon from '@material-ui/icons/Search': [Material Icons](https://material-ui.com/components/material-icons/#material-icons)

**Example:** Nav bar on top

**Description:** 
- The nav bar will be on every page except Login, Reset Password, and Forgot Password page.
- Pages with clickable navigation text on the top-left include:
    - Create User
    - Create Positions
    - Create Skills
    - Create Shifts
    - Create Schedule
    - Edit Schedules
    - Edit User
    - Edit Positions
    - Edit Shifts
    - Edit Skills
    - Confirm Time Slot
    - View Time Slot
    - Edit Time Slot
    - Create Time Slot
- The nav bar will have a search and filter field in the following pages: 
    - Daily Roster
    - Select Time Slot
    - Manage Schedules
    - Manage Skills
    - Manage Positions
    - Manage Users
- The nav bar will have a 9 dots menu that contains links to other pages.
- The nav bar will also have a the profile picture which can be clicked on to reveal a menu that has two links: one to go to User Profile page and the other to Logout.

**I/O:** 
- The navigation text on the top-left is clickable and goes to the page clicked on.
- On pages where the search and filter field are available, the search bar will find items on a page by name and the filter drop-down menu will filter based on the options available for that particular page. 

<img src="../../images/components/NavBar.png" width="800"/>