From 358a5b3658063b959d93f1d3e1314fb37e611cfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Commaille?= <zecakeh@pm.me>
Date: Sun, 24 Jan 2021 11:57:24 +0100
Subject: [PATCH] Use custom Appbar

Allows us to always provide the menu as fallback, especially useful on Web.
---
 src/RootNavigator.tsx      | 23 ++++-------------------
 src/widgets/Appbar.tsx     | 28 ++++++++++++++++++++++++++++
 src/widgets/MenuButton.tsx | 13 +++++++++++++
 3 files changed, 45 insertions(+), 19 deletions(-)
 create mode 100644 src/widgets/Appbar.tsx
 create mode 100644 src/widgets/MenuButton.tsx

diff --git a/src/RootNavigator.tsx b/src/RootNavigator.tsx
index ab1d51f..bbbe63a 100644
--- a/src/RootNavigator.tsx
+++ b/src/RootNavigator.tsx
@@ -3,10 +3,8 @@
 
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useNavigation } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
-import { DrawerNavigationProp } from "@react-navigation/drawer";
-import { Appbar, useTheme, Snackbar } from "react-native-paper";
+import { Snackbar } from "react-native-paper";
 
 import { SyncManager } from "./sync/SyncManager";
 
@@ -33,20 +31,14 @@ import { useAppStateCb } from "./helpers";
 import * as C from "./constants";
 import { StoreState } from "./store";
 import { RootStackParamList } from "./RootStackParamList";
+import MenuButton from "./widgets/MenuButton";
+import Appbar from "./widgets/Appbar";
 
 const Stack = createStackNavigator<RootStackParamList>();
 
-const MenuButton = React.memo(function MenuButton() {
-  const navigation = useNavigation() as DrawerNavigationProp<any>;
-  return (
-    <Appbar.Action icon="menu" accessibilityLabel="Main menu" onPress={() => navigation.openDrawer()} />
-  );
-});
-
 export default React.memo(function RootNavigator() {
   const dispatch = useDispatch();
   const etebase = useCredentials();
-  const theme = useTheme();
 
   // Sync app when it goes to background
   useAppStateCb((_foreground) => {
@@ -61,14 +53,7 @@ export default React.memo(function RootNavigator() {
     <>
       <Stack.Navigator
         screenOptions={{
-          headerStyle: {
-            backgroundColor: theme.colors.primary,
-          },
-          headerTintColor: "#000000",
-          headerBackTitleVisible: false,
-          headerBackTitleStyle: {
-            backgroundColor: "black",
-          },
+          header: (props) => <Appbar {...props} menuFallback />,
           cardStyle: {
             maxHeight: "100%",
           },
diff --git a/src/widgets/Appbar.tsx b/src/widgets/Appbar.tsx
new file mode 100644
index 0000000..8c6ea4d
--- /dev/null
+++ b/src/widgets/Appbar.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { StackHeaderProps } from "@react-navigation/stack";
+import { Appbar as PaperAppbar } from "react-native-paper";
+
+import MenuButton from "./MenuButton";
+
+export default function Appbar(props: StackHeaderProps & { menuFallback: boolean }) {
+  const { insets, menuFallback, navigation, previous, scene } = props;
+  const { options } = scene.descriptor;
+  const title = options.headerTitle ?? options.title ?? scene.route.name;
+  let left: React.ReactNode = null;
+  if (options.headerLeft) {
+    left = options.headerLeft({});
+  } else if (previous) {
+    left = <PaperAppbar.BackAction onPress={navigation.goBack} />;
+  } else if (menuFallback) {
+    left = <MenuButton />;
+  }
+  const right = options.headerRight?.({});
+
+  return (
+    <PaperAppbar.Header statusBarHeight={insets.top}>
+      {left}
+      <PaperAppbar.Content title={title} />
+      {right}
+    </PaperAppbar.Header>
+  );
+}
diff --git a/src/widgets/MenuButton.tsx b/src/widgets/MenuButton.tsx
new file mode 100644
index 0000000..e0ec1af
--- /dev/null
+++ b/src/widgets/MenuButton.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { useNavigation } from "@react-navigation/native";
+import { DrawerNavigationProp } from "@react-navigation/drawer";
+import { Appbar } from "react-native-paper";
+
+const MenuButton = React.memo(function MenuButton() {
+  const navigation = useNavigation() as DrawerNavigationProp<any>;
+  return (
+    <Appbar.Action icon="menu" accessibilityLabel="Main menu" onPress={() => navigation.openDrawer()} />
+  );
+});
+
+export default MenuButton;