Add main menu button

src/state/models/shell-ui.ts

@@ -67,7 +67,7 @@ export interface ComposerOpts {
 }
 
 export class ShellUiModel {
-  isViewControllingSwipes = false
+  isMainMenuOpen = false
   isModalActive = false
   activeModal:
     | ConfirmModel
@@ -82,8 +82,8 @@ export class ShellUiModel {
     makeAutoObservable(this)
   }
 
-  setViewControllingSwipes(v: boolean) {
+  setMainMenuOpen(v: boolean) {
-    this.isViewControllingSwipes = v
+    this.isMainMenuOpen = v
   }
 
   openModal(

src/view/com/util/ViewHeader.tsx

@@ -28,6 +28,9 @@ export const ViewHeader = observer(function ViewHeader({
   const onPressBack = () => {
     store.nav.tab.goBack()
   }
+  const onPressMenu = () => {
+    store.shell.setMainMenuOpen(true)
+  }
   const onPressCompose = () => {
     store.shell.openComposer({onPost})
   }
@@ -40,21 +43,20 @@ export const ViewHeader = observer(function ViewHeader({
       console.log(e)
     })
   }
+  const canGoBack = store.nav.tab.canGoBack
   return (
     <>
       <View style={styles.header}>
-        {store.nav.tab.canGoBack ? (
+        <TouchableOpacity
-          <TouchableOpacity
+          onPress={canGoBack ? onPressBack : onPressMenu}
-            onPress={onPressBack}
+          hitSlop={BACK_HITSLOP}
-            hitSlop={BACK_HITSLOP}
+          style={styles.backIcon}>
-            style={styles.backIcon}>
+          <FontAwesomeIcon
-            <FontAwesomeIcon
+            size={18}
-              size={18}
+            icon={canGoBack ? 'angle-left' : 'bars'}
-              icon="angle-left"
+            style={{marginTop: 6}}
-              style={{marginTop: 6}}
+          />
-            />
+        </TouchableOpacity>
-          </TouchableOpacity>
-        ) : undefined}
         <View style={styles.titleContainer} pointerEvents="none">
           <Text style={styles.title}>{title}</Text>
           {subtitle ? (

src/view/com/util/ViewSelector.tsx

@@ -44,9 +44,6 @@ export function ViewSelector({
   }
   const onPressSelection = (index: number) => setSelectedIndex(index)
   useEffect(() => {
-    store.shell.setViewControllingSwipes(
-      Boolean(swipeEnabled) && selectedIndex > 0,
-    )
     onSelectView?.(selectedIndex)
   }, [selectedIndex])
 

src/view/shell/mobile/index.tsx

@@ -110,7 +110,6 @@ const Btn = ({
 
 export const MobileShell: React.FC = observer(() => {
   const store = useStores()
-  const [isMenuActive, setMenuActive] = useState(false)
   const [isTabsSelectorActive, setTabsSelectorActive] = useState(false)
   const scrollElRef = useRef<FlatList | undefined>()
   const winDim = useWindowDimensions()
@@ -123,8 +122,8 @@ export const MobileShell: React.FC = observer(() => {
   const screenRenderDesc = constructScreenRenderDesc(store.nav)
 
   const onPressHome = () => {
-    if (isMenuActive) {
+    if (store.shell.isMainMenuOpen) {
-      setMenuActive(false)
+      store.shell.setMainMenuOpen(false)
     }
     if (store.nav.tab.fixedTabPurpose === 0) {
       if (store.nav.tab.current.url === '/') {
@@ -140,8 +139,8 @@ export const MobileShell: React.FC = observer(() => {
     }
   }
   const onPressNotifications = () => {
-    if (isMenuActive) {
+    if (store.shell.isMainMenuOpen) {
-      setMenuActive(false)
+      store.shell.setMainMenuOpen(false)
     }
     if (store.nav.tab.fixedTabPurpose === 1) {
       store.nav.tab.fixedTabReset()
@@ -211,6 +210,7 @@ export const MobileShell: React.FC = observer(() => {
 
   // navigation swipes
   // =
+  const isMenuActive = store.shell.isMainMenuOpen
   const canSwipeLeft = store.nav.tab.canGoBack || !isMenuActive
   const canSwipeRight = isMenuActive
   const onNavSwipeEnd = (dx: number) => {
@@ -218,11 +218,11 @@ export const MobileShell: React.FC = observer(() => {
       if (store.nav.tab.canGoBack) {
         store.nav.tab.goBack()
       } else {
-        setMenuActive(true)
+        store.shell.setMainMenuOpen(true)
       }
     } else if (dx > 0) {
       if (isMenuActive) {
-        setMenuActive(false)
+        store.shell.setMainMenuOpen(false)
       }
     }
   }
@@ -349,7 +349,10 @@ export const MobileShell: React.FC = observer(() => {
             )}
           </ScreenContainer>
           <Animated.View style={[styles.menuDrawer, menuSwipeTransform]}>
-            <Menu visible={isMenuActive} onClose={() => setMenuActive(false)} />
+            <Menu
+              visible={isMenuActive}
+              onClose={() => store.shell.setMainMenuOpen(false)}
+            />
           </Animated.View>
         </HorzSwipe>
       </SafeAreaView>