From e73c7cee3982b95ea0d323d2ddcdfa6145b8c3f6 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 8 Dec 2022 15:34:22 -0600
Subject: Turn the main menu into a 'drawer' instead of a screen in the history

---
 src/view/shell/mobile/Menu.tsx | 269 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 269 insertions(+)
 create mode 100644 src/view/shell/mobile/Menu.tsx

(limited to 'src/view/shell/mobile/Menu.tsx')

diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx
new file mode 100644
index 000000000..173f9563c
--- /dev/null
+++ b/src/view/shell/mobile/Menu.tsx
@@ -0,0 +1,269 @@
+import React, {useEffect} from 'react'
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
+import VersionNumber from 'react-native-version-number'
+import {s, colors} from '../../lib/styles'
+import {useStores} from '../../../state'
+import {
+  HomeIcon,
+  UserGroupIcon,
+  BellIcon,
+  CogIcon,
+  MagnifyingGlassIcon,
+} from '../../lib/icons'
+import {UserAvatar} from '../../com/util/UserAvatar'
+import {CreateSceneModel} from '../../../state/models/shell-ui'
+
+export const Menu = ({
+  visible,
+  onClose,
+}: {
+  visible: boolean
+  onClose: () => void
+}) => {
+  const store = useStores()
+
+  useEffect(() => {
+    if (visible) {
+      // trigger a refresh in case memberships have changed recently
+      store.me.refreshMemberships()
+    }
+  }, [store, visible])
+
+  // events
+  // =
+
+  const onNavigate = (url: string) => {
+    onClose()
+    if (url === '/notifications') {
+      store.nav.switchTo(1, true)
+    } else {
+      store.nav.switchTo(0, true)
+      if (url !== '/') {
+        store.nav.navigate(url)
+      }
+    }
+  }
+  const onPressCreateScene = () => {
+    onClose()
+    store.shell.openModal(new CreateSceneModel())
+  }
+
+  // rendering
+  // =
+
+  const MenuItem = ({
+    icon,
+    label,
+    count,
+    url,
+    bold,
+    onPress,
+  }: {
+    icon: JSX.Element
+    label: string
+    count?: number
+    url?: string
+    bold?: boolean
+    onPress?: () => void
+  }) => (
+    <TouchableOpacity
+      style={styles.menuItem}
+      onPress={onPress ? onPress : () => onNavigate(url || '/')}>
+      <View style={[styles.menuItemIconWrapper]}>
+        {icon}
+        {count ? (
+          <View style={styles.menuItemCount}>
+            <Text style={styles.menuItemCountLabel}>{count}</Text>
+          </View>
+        ) : undefined}
+      </View>
+      <Text
+        style={[
+          styles.menuItemLabel,
+          bold ? styles.menuItemLabelBold : undefined,
+        ]}
+        numberOfLines={1}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  )
+
+  return (
+    <View style={styles.view}>
+      <TouchableOpacity
+        style={styles.searchBtn}
+        onPress={() => onNavigate('/search')}>
+        <MagnifyingGlassIcon
+          style={{color: colors.gray5} as StyleProp<ViewStyle>}
+          size={21}
+        />
+        <Text style={styles.searchBtnLabel}>Search</Text>
+      </TouchableOpacity>
+      <View style={styles.section}>
+        <MenuItem
+          icon={
+            <UserAvatar
+              size={24}
+              displayName={store.me.displayName}
+              handle={store.me.handle}
+              avatar={store.me.avatar}
+            />
+          }
+          label={store.me.displayName || store.me.handle}
+          bold
+          url={`/profile/${store.me.handle}`}
+        />
+        <MenuItem
+          icon={
+            <HomeIcon
+              style={{color: colors.gray5} as StyleProp<ViewStyle>}
+              size="24"
+            />
+          }
+          label="Home"
+          url="/"
+        />
+        <MenuItem
+          icon={
+            <BellIcon
+              style={{color: colors.gray5} as StyleProp<ViewStyle>}
+              size="24"
+            />
+          }
+          label="Notifications"
+          url="/notifications"
+          count={store.me.notificationCount}
+        />
+        <MenuItem
+          icon={
+            <CogIcon
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="24"
+              strokeWidth={2}
+            />
+          }
+          label="Settings"
+          url="/settings"
+        />
+      </View>
+      <View style={styles.section}>
+        <Text style={styles.heading}>Scenes</Text>
+        <MenuItem
+          icon={
+            <UserGroupIcon
+              style={{color: colors.gray6} as StyleProp<ViewStyle>}
+              size="24"
+            />
+          }
+          label="Create a scene"
+          onPress={onPressCreateScene}
+        />
+        {store.me.memberships
+          ? store.me.memberships.memberships.map((membership, i) => (
+              <MenuItem
+                key={i}
+                icon={
+                  <UserAvatar
+                    size={24}
+                    displayName={membership.displayName}
+                    handle={membership.handle}
+                    avatar={membership.avatar}
+                  />
+                }
+                label={membership.displayName || membership.handle}
+                url={`/profile/${membership.handle}`}
+              />
+            ))
+          : undefined}
+      </View>
+      <View style={styles.footer}>
+        <Text style={s.gray4}>
+          Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion}
+          )
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    backgroundColor: colors.white,
+  },
+  section: {
+    paddingHorizontal: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.gray1,
+  },
+  heading: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+  },
+
+  searchBtn: {
+    flexDirection: 'row',
+    backgroundColor: colors.gray1,
+    borderRadius: 8,
+    margin: 10,
+    marginBottom: 0,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  searchBtnLabel: {
+    marginLeft: 8,
+    fontSize: 18,
+    color: colors.gray6,
+  },
+
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 2,
+  },
+  menuItemIconWrapper: {
+    width: 30,
+    height: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
+  menuItemLabel: {
+    fontSize: 17,
+    color: colors.gray7,
+  },
+  menuItemLabelBold: {
+    fontWeight: 'bold',
+  },
+  menuItemCount: {
+    position: 'absolute',
+    right: -6,
+    top: -2,
+    backgroundColor: colors.red3,
+    paddingHorizontal: 4,
+    paddingBottom: 1,
+    borderRadius: 6,
+  },
+  menuItemCountLabel: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    color: colors.white,
+  },
+
+  footer: {
+    paddingHorizontal: 14,
+    paddingVertical: 18,
+  },
+})
-- 
cgit 1.4.1