adding managable tabs for organistaion nav
This commit is contained in:
parent
017f133611
commit
dcc410bc17
@ -53,6 +53,7 @@ const OrgName = styled.span`
|
||||
const NavLi = styled(NavLink)`
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
`;
|
||||
|
||||
const StyledTabs = styled(Tabs)`
|
||||
@ -73,6 +74,13 @@ const StyledContainer = styled(Container)`
|
||||
`}
|
||||
`;
|
||||
|
||||
const ManageTab = styled(Tab)`
|
||||
|
||||
${breakpoints.medium`
|
||||
float: right;
|
||||
`}
|
||||
`;
|
||||
|
||||
const OrgNavigation = ({
|
||||
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>
|
||||
+ Add organisation
|
||||
</OrgName>
|
||||
</NavigationLinkContainer>
|
||||
}</NavLi>
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledNav>
|
||||
<StyledContainer>
|
||||
<StyledTabs name='organisation-navigation-group'>
|
||||
{navLinks}
|
||||
|
||||
<Tab title={addOrgTab()} key='1' />
|
||||
<ManageTab title={manageTabs()} key='2' />
|
||||
</StyledTabs>
|
||||
</StyledContainer>
|
||||
</StyledNav>
|
||||
|
Loading…
Reference in New Issue
Block a user