adding managable tabs for organistaion nav

This commit is contained in:
Alex Windett 2017-03-01 12:01:14 +00:00
parent 017f133611
commit dcc410bc17

View File

@ -53,6 +53,7 @@ const OrgName = styled.span`
const NavLi = styled(NavLink)` const NavLi = styled(NavLink)`
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
font-size: 16px;
`; `;
const StyledTabs = styled(Tabs)` const StyledTabs = styled(Tabs)`
@ -73,6 +74,13 @@ const StyledContainer = styled(Container)`
`} `}
`; `;
const ManageTab = styled(Tab)`
${breakpoints.medium`
float: right;
`}
`;
const OrgNavigation = ({ const OrgNavigation = ({
orgs = [] orgs = []
}) => { }) => {
@ -107,11 +115,38 @@ const OrgNavigation = ({
); );
}); });
const manageTabs = () => (
<NavLi activeClassName='active' to='#'>{({
isActive
}) =>
<NavigationLinkContainer className={isActive ? 'active' : ''}>
<OrgName>
Manage Tabs ({orgs.length})
</OrgName>
</NavigationLinkContainer>
}</NavLi>
);
const addOrgTab = () => (
<NavLi activeClassName='active' to='#'>{({
isActive
}) =>
<NavigationLinkContainer className={isActive ? 'active' : ''}>
<OrgName>
+ &nbsp; Add organisation
</OrgName>
</NavigationLinkContainer>
}</NavLi>
);
return ( return (
<StyledNav> <StyledNav>
<StyledContainer> <StyledContainer>
<StyledTabs name='organisation-navigation-group'> <StyledTabs name='organisation-navigation-group'>
{navLinks} {navLinks}
<Tab title={addOrgTab()} key='1' />
<ManageTab title={manageTabs()} key='2' />
</StyledTabs> </StyledTabs>
</StyledContainer> </StyledContainer>
</StyledNav> </StyledNav>