import React, { useRef } from 'react'; import { Star, Bell, Cog, AngleDown } from 'shared/icons'; import { NotificationContainer, InviteButton, GlobalActions, ProjectActions, ProjectSwitcher, Separator, ProjectMeta, ProjectName, ProjectTabs, ProjectTab, NavbarWrapper, NavbarHeader, Breadcrumbs, BreadcrumpSeparator, ProjectSettingsButton, ProfileIcon, ProfileContainer, ProfileNameWrapper, ProfileNamePrimary, ProfileNameSecondary, ProjectMembers, } from './Styles'; import TaskAssignee from 'shared/components/TaskAssignee'; import { usePopup, Popup } from 'shared/components/PopupMenu'; import MiniProfile from 'shared/components/MiniProfile'; type NavBarProps = { projectName: string; onProfileClick: (bottom: number, right: number) => void; onNotificationClick: () => void; bgColor: string; firstName: string; lastName: string; initials: string; projectMembers?: Array | null; }; const NavBar: React.FC = ({ projectName, onProfileClick, onNotificationClick, firstName, lastName, initials, bgColor, projectMembers, }) => { const $profileRef: any = useRef(null); const handleProfileClick = () => { const boundingRect = $profileRef.current.getBoundingClientRect(); onProfileClick(boundingRect.bottom, boundingRect.right); }; const { showPopup } = usePopup(); const onMemberProfile = ($targetRef: React.RefObject, memberID: string) => { showPopup( $targetRef, {}} tab={0}> {}} /> , ); }; return ( Projects ยป {projectName} Board Calender Timeline Wiki {projectMembers && ( {projectMembers.map(member => ( ))} Invite )} {firstName} {lastName} Manager {initials} ); }; export default NavBar;