62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
|
import React, { useRef } from 'react';
|
||
|
|
import { Bell } from 'shared/icons';
|
||
|
|
|
||
|
|
import {
|
||
|
|
NotificationContainer,
|
||
|
|
GlobalActions,
|
||
|
|
ProjectActions,
|
||
|
|
NavbarWrapper,
|
||
|
|
NavbarHeader,
|
||
|
|
Breadcrumbs,
|
||
|
|
BreadcrumpSeparator,
|
||
|
|
ProfileIcon,
|
||
|
|
ProfileContainer,
|
||
|
|
ProfileNameWrapper,
|
||
|
|
ProfileNamePrimary,
|
||
|
|
ProfileNameSecondary,
|
||
|
|
} from './Styles';
|
||
|
|
|
||
|
|
type NavBarProps = {
|
||
|
|
onProfileClick: (bottom: number, right: number) => void;
|
||
|
|
onNotificationClick: () => void;
|
||
|
|
};
|
||
|
|
const NavBar: React.FC<NavBarProps> = ({ onProfileClick, onNotificationClick }) => {
|
||
|
|
const $profileRef: any = useRef(null);
|
||
|
|
const handleProfileClick = () => {
|
||
|
|
console.log('click');
|
||
|
|
const boundingRect = $profileRef.current.getBoundingClientRect();
|
||
|
|
onProfileClick(boundingRect.bottom, boundingRect.right);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<NavbarWrapper>
|
||
|
|
<NavbarHeader>
|
||
|
|
<ProjectActions>
|
||
|
|
<Breadcrumbs>
|
||
|
|
Projects
|
||
|
|
<BreadcrumpSeparator>/</BreadcrumpSeparator>
|
||
|
|
project name
|
||
|
|
<BreadcrumpSeparator>/</BreadcrumpSeparator>
|
||
|
|
Board
|
||
|
|
</Breadcrumbs>
|
||
|
|
</ProjectActions>
|
||
|
|
<GlobalActions>
|
||
|
|
<NotificationContainer onClick={onNotificationClick}>
|
||
|
|
<Bell color="#c2c6dc" size={20} />
|
||
|
|
</NotificationContainer>
|
||
|
|
<ProfileContainer>
|
||
|
|
<ProfileNameWrapper>
|
||
|
|
<ProfileNamePrimary>Jordan Knott</ProfileNamePrimary>
|
||
|
|
<ProfileNameSecondary>Manager</ProfileNameSecondary>
|
||
|
|
</ProfileNameWrapper>
|
||
|
|
<ProfileIcon ref={$profileRef} onClick={handleProfileClick}>
|
||
|
|
JK
|
||
|
|
</ProfileIcon>
|
||
|
|
</ProfileContainer>
|
||
|
|
</GlobalActions>
|
||
|
|
</NavbarHeader>
|
||
|
|
</NavbarWrapper>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default NavBar;
|