StartEnd.js

import React from 'react';

import { createStyledComponent } from 'mineral-ui/styles';
import StartEnd from 'mineral-ui/StartEnd';

import NavTabs from './NavTabs';
import ProfileMenu from './ProfileMenu';

const Header = createStyledComponent(StartEnd, ({ theme }) => ({
  backgroundColor: theme.panel_backgroundColor,
  borderBottom: `1px solid ${theme.color_gray_30}`,
  height: '56px', // don't hate me, it's a work-in-progress and this matches our comps
}));

const SiteHeader = () => (
  <Header paddingHorizontal="lg">
    <NavTabs />
    <ProfileMenu />
  </Header>
);

const NavTabs = () => (
  <Flex style={{ height: '100%' }}>
    <NavTab id="work" linkTo="/work/list/board" messageKey="Navigation/work" />
    <NavTab
      id="objectives"
      linkTo="/objectives"
      messageKey="Navigation/objectives"
    />
  </Flex>
);

I think this covers it. I omitted the NavTab component cuz it gets hairy (lotta styling), but it's essentially just a React Router link.

Notably, we need the effect below where the underline of the "tab" sits at the bottom of the site header.