Files
bodyshop/client/src/components/header/header.component.jsx

52 lines
1.4 KiB
JavaScript

import React from "react";
import { Link } from "react-router-dom";
import { useApolloClient } from "@apollo/react-hooks";
import { Menu, Icon } from "antd";
import "./header.styles.scss";
import SignOut from "../sign-out/sign-out.component";
import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
import GlobalSearch from "../global-search/global-search.component";
import LanguageSelector from "../language-selector/langauge-selector.component";
export default ({ landingHeader, navItems, selectedNavItem }) => {
const apolloClient = useApolloClient();
const handleClick = e => {
apolloClient.writeData({ data: { selectedNavItem: e.key } });
};
return (
<Menu
theme='dark'
className='header'
onClick={handleClick}
selectedKeys={selectedNavItem}
mode='horizontal'>
<Menu.Item>
<GlobalSearch />
</Menu.Item>
{navItems.map(navItem => (
<Menu.Item key={navItem.title}>
<Link to={navItem.path}>
{navItem.icontype ? <Icon type={navItem.icontype} /> : null}
{navItem.title}
</Link>
</Menu.Item>
))}
{!landingHeader ? (
<Menu.Item>
<SignOut />
</Menu.Item>
) : (
<Menu.Item>
<ManageSignInButton />
</Menu.Item>
)}
{!landingHeader ? <LanguageSelector /> : null}
</Menu>
);
};