react-template/src/components/Header/Header.js

import React from "react";
import PropTypes from "prop-types";
import { HeaderContainer, HeaderSideContainer } from "./Header.styled";
import { useSelector } from "react-redux";
import { selectBreadcrumbs } from "features/app/appSlice";
import { selectCurrentUser } from "features/auth/authSlice";
import HeaderNavigation from "./HeaderNavigation/HeaderNavigation";
import Logo from "components/Logo/Logo";
import { NavLink } from "react-router-dom";
import { PAGES } from "constants/pages";
import HeaderProfileBar from "./HeaderProfileBar/HeaderProfileBar";

const Header = () => {
  const breadcrumbs = useSelector(selectBreadcrumbs);
  const user = useSelector(selectCurrentUser);
  console.log(user);
  console.log(breadcrumbs);
  console.log(Logo);
  return (
    <HeaderContainer>
      <HeaderSideContainer>
        <Logo as={NavLink} to={PAGES.BASE.route} />
        {user && <HeaderNavigation />}
      </HeaderSideContainer>
      <HeaderSideContainer>
        <HeaderProfileBar />
      </HeaderSideContainer>
    </HeaderContainer>
  );
};

Header.propTypes = {
  children: PropTypes.node,
};

export default Header;