HW/final_project/src/components/PrivateHeader.jsx

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

export const PrivateHeader = () => {

    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">
                                    <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>
    )
}