Add back the tab navigation buttons.

src/Pim/NavigationTabs.tsx

@@ -0,0 +1,58 @@
+// SPDX-FileCopyrightText: © 2020 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Tabs, Tab, useTheme } from "@material-ui/core";
+import { useHistory } from "react-router";
+import { routeResolver } from "../App";
+
+export type TabValue = "contacts" | "events" | "tasks";
+
+interface PropsType {
+  value: TabValue;
+}
+
+export default function PimNavigationTabs(props: PropsType) {
+  const theme = useTheme();
+  const history = useHistory();
+
+  const tabs = [
+    { title: "Address Book", linkValue: "contacts" },
+    { title: "Calendar", linkValue: "events" },
+    { title: "Tasks", linkValue: "tasks" },
+  ];
+
+  let selected;
+  switch (props.value) {
+    case "contacts": {
+      selected = 0;
+      break;
+    }
+    case "events": {
+      selected = 1;
+      break;
+    }
+    case "tasks": {
+      selected = 2;
+      break;
+    }
+  }
+
+  return (
+    <Tabs
+      variant="fullWidth"
+      style={{ backgroundColor: theme.palette.primary.main }}
+      value={selected}
+      onChange={(_event, value) => history.push(
+        routeResolver.getRoute(`pim.${tabs[value].linkValue}`)
+      )}
+    >
+      {tabs.map((x) => (
+        <Tab
+          key={x.linkValue}
+          label={x.title}
+        />
+      ))}
+    </Tabs>
+  );
+}

src/SyncGate.tsx

@@ -14,6 +14,7 @@ import { routeResolver } from "./App";
 
 import AppBarOverride from "./widgets/AppBarOverride";
 import LoadingIndicator from "./widgets/LoadingIndicator";
+import Container from "./widgets/Container";
 import ContactsMain from "./Contacts/Main";
 import CalendarsMain from "./Calendars/Main";
 import TasksMain from "./Tasks/Main";
@@ -29,6 +30,7 @@ import { SyncManager } from "./sync/SyncManager";
 import { StoreState } from "./store";
 import { performSync } from "./store/actions";
 import { useCredentials } from "./credentials";
+import PimNavigationTabs from "./Pim/NavigationTabs";
 
 export interface SyncInfoJournal {
   journal: EteSync.Journal;
@@ -93,17 +95,26 @@ export default function SyncGate() {
           <Route
             path={routeResolver.getRoute("pim.contacts")}
           >
-            <ContactsMain />
+            <PimNavigationTabs value="contacts" />
+            <Container>
+              <ContactsMain />
+            </Container>
           </Route>
           <Route
             path={routeResolver.getRoute("pim.events")}
           >
-            <CalendarsMain />
+            <PimNavigationTabs value="events" />
+            <Container>
+              <CalendarsMain />
+            </Container>
           </Route>
           <Route
             path={routeResolver.getRoute("pim.tasks")}
           >
-            <TasksMain />
+            <PimNavigationTabs value="tasks" />
+            <Container>
+              <TasksMain />
+            </Container>
           </Route>
         </Switch>
       </Route>