import React , { useRef , useState , useEffect } from 'react' ; import { Home , Star , Bell , AngleDown , BarChart , CheckCircle , ListUnordered } from 'shared/icons' ; import { Link } from 'react-router-dom' ; import { RoleCode } from 'shared/generated/graphql' ; import * as S from './Styles' ; export type MenuItem = { name : string ; link : string ; } ; type NavBarProps = { menuType ? : Array < MenuItem > | null ; name : string | null ; match : string ; } ; const NavBar = ( { menuType , name , match } ) => { return ( < S . NavbarWrapper > < S . NavbarHeader > < S . ProjectActions > < S . ProjectSwitch > < S . ProjectSwitchInner > < S . TaskcafeLogo innerColor = "#9f46e4" outerColor = "#000" width = { 32 } height = { 32 } / > < /S.ProjectSwitchInner> < /S.ProjectSwitch> < S . ProjectInfo > < S . ProjectMeta > { name && < S . ProjectName > { name } < /S.ProjectName>}</S . ProjectMeta > { name && ( < S . ProjectTabs > { menuType && menuType . map ( ( menu , idx ) => { return ( < S . ProjectTab key = { menu . name } to = { menu . link } exact onClick = { ( ) => { } } > { menu . name } < /S.ProjectTab>); } ) } < /S.ProjectTabs>)} < /S.ProjectInfo> < /S.ProjectActions> < S . LogoContainer to = "/" > < S . TaskcafeTitle > Taskcafé < /S.TaskcafeTitle> < /S.LogoContainer> < S . GlobalActions > < Link to = { { pathname : '/login' , state : { redirect : match } , } } > < S . SignIn > Sign In < /S.SignIn> < /Link> < /S.GlobalActions> < /S.NavbarHeader> < /S.NavbarWrapper>); } ; export default NavBar ;