Header.js•2.4 kB
import React from 'react';
import { Navbar, Nav, Container, NavDropdown, Badge } from 'react-bootstrap';
import { Link, useNavigate } from 'react-router-dom';
import { authService } from '../services/api';
const Header = () => {
const navigate = useNavigate();
const currentUser = authService.getCurrentUser();
const isAuthenticated = authService.isAuthenticated();
const handleLogout = () => {
authService.logout();
navigate('/login');
};
return (
<Navbar bg="dark" variant="dark" expand="lg">
<Container>
<Navbar.Brand as={Link} to="/">ITSM Integration</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
{isAuthenticated && (
<>
<Nav.Link as={Link} to="/">Dashboard</Nav.Link>
<Nav.Link as={Link} to="/integrations">Integrations</Nav.Link>
{(currentUser?.role === 'admin' || currentUser?.role === 'integrator') && (
<Nav.Link as={Link} to="/integrations/create">Create Integration</Nav.Link>
)}
<NavDropdown title="Ticket Creation" id="ticket-creation-dropdown">
<NavDropdown.Item as={Link} to="/chat">
Standard Chat Client
</NavDropdown.Item>
<NavDropdown.Item as={Link} to="/ai-chat">
AI-Powered Chat <Badge bg="info" pill className="ms-1">New</Badge>
</NavDropdown.Item>
</NavDropdown>
{currentUser?.role === 'admin' && (
<Nav.Link as={Link} to="/users">Users</Nav.Link>
)}
</>
)}
</Nav>
<Nav>
{isAuthenticated ? (
<NavDropdown title={`${currentUser?.firstName || ''} ${currentUser?.lastName || ''}`} id="user-dropdown">
<NavDropdown.Item as={Link} to="/profile">Profile</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item onClick={handleLogout}>Logout</NavDropdown.Item>
</NavDropdown>
) : (
<Nav.Link as={Link} to="/login">Login</Nav.Link>
)}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};
export default Header;