[APP-633] Improve some behaviors around desktop leftnav (#581)
* Make leftnav elements act as anchor tags (bonus feature in this pr) * Add screen reset behavior to the desktop left nav * Move the leftnav link into the textzio/stable
parent
2749b8e371
commit
49f9df6355
|
@ -86,6 +86,7 @@ interface NavItemProps {
|
||||||
const NavItem = observer(
|
const NavItem = observer(
|
||||||
({count, href, icon, iconFilled, label}: NavItemProps) => {
|
({count, href, icon, iconFilled, label}: NavItemProps) => {
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
|
const store = useStores()
|
||||||
const [pathName] = React.useMemo(() => router.matchPath(href), [href])
|
const [pathName] = React.useMemo(() => router.matchPath(href), [href])
|
||||||
const currentRouteName = useNavigationState(state => {
|
const currentRouteName = useNavigationState(state => {
|
||||||
if (!state) {
|
if (!state) {
|
||||||
|
@ -96,12 +97,23 @@ const NavItem = observer(
|
||||||
|
|
||||||
const isCurrent = isTab(currentRouteName, pathName)
|
const isCurrent = isTab(currentRouteName, pathName)
|
||||||
const {onPress} = useLinkProps({to: href})
|
const {onPress} = useLinkProps({to: href})
|
||||||
|
const onPressWrapped = React.useCallback(
|
||||||
|
(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (isCurrent) {
|
||||||
|
store.emitScreenSoftReset()
|
||||||
|
} else {
|
||||||
|
onPress()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[onPress, isCurrent, store],
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PressableWithHover
|
<PressableWithHover
|
||||||
style={styles.navItemWrapper}
|
style={styles.navItemWrapper}
|
||||||
hoverStyle={pal.viewLight}
|
hoverStyle={pal.viewLight}
|
||||||
onPress={onPress}
|
onPress={onPressWrapped}
|
||||||
accessibilityRole="tab"
|
accessibilityRole="tab"
|
||||||
accessibilityLabel={label}
|
accessibilityLabel={label}
|
||||||
accessibilityHint="">
|
accessibilityHint="">
|
||||||
|
@ -113,7 +125,11 @@ const NavItem = observer(
|
||||||
</Text>
|
</Text>
|
||||||
) : null}
|
) : null}
|
||||||
</View>
|
</View>
|
||||||
<Text type="title" style={[isCurrent ? s.bold : s.normal, pal.text]}>
|
<Text
|
||||||
|
type="title"
|
||||||
|
style={[isCurrent ? s.bold : s.normal, pal.text]}
|
||||||
|
href={href}
|
||||||
|
dataSet={{noUnderline: 1}}>
|
||||||
{label}
|
{label}
|
||||||
</Text>
|
</Text>
|
||||||
</PressableWithHover>
|
</PressableWithHover>
|
||||||
|
|
Loading…
Reference in New Issue