HW/final_project/src/components/Header.jsx

import { useState } from 'react';
import {  Link } from 'react-router-dom';
import { history } from '../App';
import '../App.css';
import store from '../store'
import {actionAuthLogout} from '../store/actions/action-logout'

export const Header = () => {

    const logOut = () => {
        store.dispatch(actionAuthLogout())
    }

    return (
        <header className="header">
            <nav className="navbar navbar-dark bg-dark fixed-top">
                <div className="container-fluid">
                    <a className="navbar-brand" href="/">A-Level Chat</a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="offcanvas offcanvas-end text-bg-dark" tabIndex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
                        <div className="offcanvas-header">
                            <button type="button" className="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                        </div>
                        <div className="offcanvas-body">
                            <ul className="navbar-nav justify-content-end flex-grow-1 pe-3">
                                <li className="nav-item">
                                    <Link to="/" className="nav-link">Home</Link>
                                </li>
                                <li className="nav-item dropdown">
                                    <a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        Enter
                                    </a>
                                    <ul className="dropdown-menu dropdown-menu-dark">
                                        <li className='dropdown-li'><Link to="/login" className="nav-link">Login</Link></li>
                                        <li className='dropdown-li'><Link to="/registration" className="nav-link">Registration</Link></li>
                                        
                                    </ul>
                                </li>
                                <li className="nav-item">
                                    <Link to="/about-me" className="nav-link">About Me</Link>
                                </li>
                                <li className="nav-item">
                                    <Link to="/chat" className="nav-link">Chat</Link>
                                </li>
                                <li className="nav-item">
                                    <a className="nav-link" onClick={logOut}>Выйти</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
    )
}