68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { useMatch, useResolvedPath } from 'react-router-dom';
|
|
import { User } from '../../interfaces/user.interface';
|
|
import NavItem from './NavItem';
|
|
import ProfileContainer from './ProfileContainer';
|
|
|
|
const NavbarContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding-left: 12px;
|
|
height: 58px;
|
|
border-bottom: 2px solid #eaecee;
|
|
`;
|
|
|
|
const NavItemsContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
`;
|
|
|
|
type OwnProps = {
|
|
user?: User;
|
|
};
|
|
|
|
function Navbar({ user }: OwnProps) {
|
|
return (
|
|
<>
|
|
<NavbarContainer>
|
|
<NavItemsContainer>
|
|
<NavItem
|
|
label="Inbox"
|
|
to="/"
|
|
active={
|
|
!!useMatch({
|
|
path: useResolvedPath('/').pathname,
|
|
end: true,
|
|
})
|
|
}
|
|
/>
|
|
<NavItem
|
|
label="Contacts"
|
|
to="/contacts"
|
|
active={
|
|
!!useMatch({
|
|
path: useResolvedPath('/contacts').pathname,
|
|
end: true,
|
|
})
|
|
}
|
|
/>
|
|
<NavItem
|
|
label="Insights"
|
|
to="/insights"
|
|
active={
|
|
!!useMatch({
|
|
path: useResolvedPath('/insights').pathname,
|
|
end: true,
|
|
})
|
|
}
|
|
/>
|
|
</NavItemsContainer>
|
|
<ProfileContainer user={user} />
|
|
</NavbarContainer>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Navbar;
|