zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Turn the main menu into a 'drawer' instead of a screen in the history

Browse source
This commit is contained in:
Paul Frazee 2022-12-08 15:34:22 -06:00
parent 53b8f0d040
commit e73c7cee39
4 changed files with 100 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

269
src/view/shell/mobile/Menu.tsx Normal file
View file

@ -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,
},
})