-
Notifications
You must be signed in to change notification settings - Fork 1
/
LoginNavBar.jsx
83 lines (75 loc) · 4.06 KB
/
LoginNavBar.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React, { useEffect, useState } from 'react';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Link } from 'react-router-dom';
import './LoginNavBar.css';
import Dropdown from '../DropDown/Dropdown';
import { useGlobalContext } from '../../context/StateContext';
import lodhalogo1 from '../../assests/lodhalogo1.png';
import menu from "../../assests/menu.png";
import dashboardnav from "../../assests/dashboardnav.png";
import home from "../../assests/home.png";
import profile from "../../assests/profile.png";
import logout from "../../assests/logout.png";
function LoginNavBar() {
const [Menu, setMenu] = useState(false);
const { setIsAuthenticated, setUser, setLoading, isAuthenticated, User } = useGlobalContext();
const changes = () => {
localStorage.setItem("isAuthenticated", false);
localStorage.setItem("User", null);
setIsAuthenticated(false);
setUser(null);
}
return (
<div id="nav-container">
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Brand href="/Home">
<a>
<img id="MeridianLogo" src={lodhalogo1} alt="logo" />
</a>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto NavClass">
</Nav>
<div className='navBarLinkActive'>
<Nav>
<Nav.Item>
<Nav.Link id="Menu" onClick={() => { setMenu(!Menu) }}><img src={menu} height="25px" width="25px"></img><span style={{ padding: "10px" }}>Menu</span></Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link id="Menu" href='/UserDashboard'><img src= {dashboardnav} height="25px" width="25px"></img><span style={{ padding: "10px" }}>Dashboard</span></Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link id="User" href="/"><img src={home} height="25px" width="25px"></img><span style={{ padding: "10px" }}>Home</span></Nav.Link>
</Nav.Item>
<NavDropdown
id="LoginDropdown"
title={JSON.parse(User).OwnerName}
menuVariant="dark"
>
<div className="ProfileDiv" style={{ display: "flex" }}>
<img src={profile} style={{ paddingLeft: "5px", height: "30px", width: "40px" }}></img>
<NavDropdown.Item href="/UserProfile" className='loginDropDownMenu'>PROFILE</NavDropdown.Item>
</div>
<NavDropdown.Divider />
<div className='ProfileDiv' style={{ display: "flex" }}>
<img src={logout} style={{ paddingLeft: "10px", height: "28px", width: "38px" }}></img>
<NavDropdown.Item href="/" onClick={() => { changes(); }} className='loginDropDownMenu'>
LOGOUT
</NavDropdown.Item>
</div>
</NavDropdown>
</Nav>
</div>
</Navbar.Collapse>
</Container>
</Navbar>
{Menu && <Dropdown />}
</div>
);
}
export default LoginNavBar;