Remove the secondary header and update the appbar instead.

src/App.tsx

@@ -23,7 +23,6 @@ import SideMenu from './SideMenu';
 import LoginGate from './LoginGate';
 import { RouteResolver } from './routes';
 
-import * as C from './constants';
 import * as store from './store';
 import * as actions from './store/actions';
 
@@ -41,6 +40,11 @@ const muiTheme = createMuiTheme({
   }
 });
 
+export let appBarPortals = {
+  'title': null as Element | null,
+  'buttons': null as Element | null,
+};
+
 export const routeResolver = new RouteResolver({
   home: '',
   pim: {
@@ -127,11 +131,9 @@ const AppBarWitHistory = withRouter(
               }
             </div>
 
-            <div style={{ flexGrow: 1, fontSize: '1.25em' }}>
+            <div style={{ flexGrow: 1, fontSize: '1.25em' }} id="appbar-title" />
-              {C.appName}
-            </div>
 
-            <div style={{ marginRight: -12 }}>
+            <div style={{ marginRight: -12 }} id="appbar-buttons">
               {iconElementRight}
             </div>
           </Toolbar>

src/Journal/index.tsx

@@ -8,10 +8,9 @@ import Contact from '../components/Contact';
 import Calendar from '../components/Calendar';
 import Event from '../components/Event';
 
+import AppBarOverride from '../widgets/AppBarOverride';
 import Container from '../widgets/Container';
 
-import SecondaryHeader from '../components/SecondaryHeader';
-
 import JournalEntries from '../components/JournalEntries';
 import journalView from './journalView';
 
@@ -88,7 +87,7 @@ class Journal extends React.PureComponent<PropsTypeInner> {
 
     return (
       <React.Fragment>
-        <SecondaryHeader>{collectionInfo.displayName}</SecondaryHeader>
+        <AppBarOverride title={collectionInfo.displayName} />
         <Tabs
           fullWidth={true}
           style={{ backgroundColor: theme.palette.primary.main }}

src/SyncGate.tsx

@@ -8,6 +8,7 @@ import { createSelector } from 'reselect';
 
 import { routeResolver } from './App';
 
+import AppBarOverride from './widgets/AppBarOverride';
 import LoadingIndicator from './widgets/LoadingIndicator';
 import PrettyError from './widgets/PrettyError';
 
@@ -194,24 +195,30 @@ class SyncGate extends React.PureComponent<PropsTypeInner> {
         <Route
           path={routeResolver.getRoute('pim')}
           render={({match, history}) => (
-            <PimRouter
+            <>
-              etesync={this.props.etesync}
+              <AppBarOverride title="EteSync" />
-              userInfo={this.props.userInfo.value!}
+              <PimRouter
-              syncInfo={journalMap}
+                etesync={this.props.etesync}
-              history={history}
+                userInfo={this.props.userInfo.value!}
-            />
+                syncInfo={journalMap}
+                history={history}
+              />
+            </>
           )}
         />
         <Route
           path={routeResolver.getRoute('journals')}
           exact={true}
           render={({ history }) => (
-            <Journals
+            <>
-              userInfo={this.props.userInfo.value!}
+              <AppBarOverride title="Journals" />
-              etesync={this.props.etesync}
+              <Journals
-              journals={journals}
+                userInfo={this.props.userInfo.value!}
-              history={history}
+                etesync={this.props.etesync}
-            />
+                journals={journals}
+                history={history}
+              />
+            </>
           )}
         />
         <Route

src/components/SecondaryHeader.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-import { Theme, withTheme } from '@material-ui/core/styles';
-
-export default withTheme()((props: {children: React.ReactNode | React.ReactNode[], theme: Theme}) => {
-    const style = {
-      header: {
-        backgroundColor: props.theme.palette.primary.main,
-        color: props.theme.palette.primary.contrastText,
-        padding: 15,
-        textAlign: 'center' as any,
-      },
-      headerText: {
-        margin: 0,
-      },
-    };
-
-    return (
-      <div style={style.header}>
-        <h2 style={style.headerText}>{props.children}</h2>
-      </div>
-    );
-});

src/widgets/AppBarOverride.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+export default (props: {title: string, children?: React.ReactNode | React.ReactNode[]}) => {
+  const titleEl = document.querySelector('#appbar-title');
+  const buttonsEl = document.querySelector('#appbar-buttons');
+
+  return (
+    <>
+      {titleEl && ReactDOM.createPortal(
+        <span>{props.title}</span>,
+        titleEl
+      )}
+      {buttonsEl && props.children && ReactDOM.createPortal(
+        props.children,
+        buttonsEl
+      )}
+    </>
+  );
+};