@swm/global nav menu v1

src/App.js

@@ -26,6 +26,7 @@ import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsCo
 import * as Session from './libs/actions/Session';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
+import {SidebarNavigationContextProvider} from './pages/home/sidebar/SidebarNavigationContext';
 
 // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
 if (window && Environment.isDevelopment()) {
@@ -64,6 +65,7 @@ function App() {
                     EnvironmentProvider,
                     ThemeProvider,
                     ThemeStylesProvider,
+                    SidebarNavigationContextProvider,
                 ]}
             >
                 <CustomStatusBar />

src/CONST.ts

@@ -2664,19 +2664,29 @@ const CONST = {
         DEFAULT_COORDINATE: [-122.4021, 37.7911],
         STYLE_URL: 'mapbox://styles/expensify/cllcoiqds00cs01r80kp34tmq',
     },
+
     ONYX_UPDATE_TYPES: {
         HTTPS: 'https',
         PUSHER: 'pusher',
     },
+
     EVENTS: {
         SCROLLING: 'scrolling',
     },
+
     HORIZONTAL_SPACER: {
         DEFAULT_BORDER_BOTTOM_WIDTH: 1,
         DEFAULT_MARGIN_VERTICAL: 8,
         HIDDEN_MARGIN_VERTICAL: 0,
         HIDDEN_BORDER_BOTTOM_WIDTH: 0,
     },
+
+    GLOBAL_NAVIGATION_OPTION: {
+        HOME: 'home',
+        CHATS: 'chats',
+        SPEND: 'spend',
+        WORKSPACES: 'workspaces',
+    },
 } as const;
 
 export default CONST;

src/GLOBAL_NAVIGATION_MAPPING.ts

@@ -0,0 +1,9 @@
+import CONST from './CONST';
+import SCREENS from './SCREENS';
+
+export default {
+    [CONST.GLOBAL_NAVIGATION_OPTION.HOME]: [SCREENS.HOME_OD],
+    [CONST.GLOBAL_NAVIGATION_OPTION.CHATS]: [SCREENS.REPORT],
+    [CONST.GLOBAL_NAVIGATION_OPTION.SPEND]: [SCREENS.EXPENSES_OD, SCREENS.REPORTS_OD, SCREENS.INSIGHTS_OD],
+    [CONST.GLOBAL_NAVIGATION_OPTION.WORKSPACES]: [SCREENS.INDIVIDUALS_OD, SCREENS.GROUPS_OD, SCREENS.CARDS_AND_DOMAINS_OD],
+} as const;

src/ROUTES.ts

@@ -318,4 +318,17 @@ export default {
     // These are some on-off routes that will be removed once they're no longer needed (see GH issues for details)
     SAASTR: 'saastr',
     SBE: 'sbe',
+
+    // Iframe screens from olddot
+    HOME_OD: 'home',
+
+    // Spend tab
+    EXPENSES_OD: 'expenses',
+    REPORTS_OD: 'reports',
+    INSIGHTS_OD: 'insights',
+
+    // Workspaces tab
+    INDIVIDUALS_OD: 'individuals',
+    GROUPS_OD: 'groups',
+    CARDS_AND_DOMAINS_OD: 'cards-and-domains',
 } as const;

src/SCREENS.ts

@@ -24,4 +24,17 @@ export default {
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
     DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect',
+
+    // Iframe screens from olddot
+    HOME_OD: 'Home_OD',
+
+    // Spend tab
+    EXPENSES_OD: 'Expenses_OD',
+    REPORTS_OD: 'Reports_OD',
+    INSIGHTS_OD: 'INSIGHTS_OD',
+
+    // Workspaces tab
+    INDIVIDUALS_OD: 'Individuals_OD',
+    GROUPS_OD: 'Groups_OD',
+    CARDS_AND_DOMAINS_OD: 'CardsAndDomains_OD',
 } as const;

src/components/FloatingActionButton.js

@@ -9,6 +9,7 @@ import themeColors from '../styles/themes/default';
 import Tooltip from './Tooltip';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import variables from '../styles/variables';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 AnimatedIcon.displayName = 'AnimatedIcon';
@@ -100,6 +101,8 @@ class FloatingActionButton extends PureComponent {
                         style={[styles.floatingActionButton, StyleUtils.getAnimatedFABStyle(rotate, backgroundColor)]}
                     >
                         <AnimatedIcon
+                            width={variables.iconSizeSmall}
+                            height={variables.iconSizeSmall}
                             src={Expensicons.Plus}
                             fill={fill}
                         />

src/libs/Navigation/Navigation.js

@@ -10,6 +10,7 @@ import linkingConfig from './linkingConfig';
 import navigationRef from './navigationRef';
 import NAVIGATORS from '../../NAVIGATORS';
 import originalGetTopmostReportId from './getTopmostReportId';
+import originalGetTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName';
 import getStateFromPath from './getStateFromPath';
 import SCREENS from '../../SCREENS';
 import CONST from '../../CONST';
@@ -46,6 +47,9 @@ function canNavigate(methodName, params = {}) {
 // Re-exporting the getTopmostReportId here to fill in default value for state. The getTopmostReportId isn't defined in this file to avoid cyclic dependencies.
 const getTopmostReportId = (state = navigationRef.getState()) => originalGetTopmostReportId(state);
 
+// Re-exporting the getTopMostCentralPaneRouteName here to fill in default value for state. The getTopMostCentralPaneRouteName isn't defined in this file to avoid cyclic dependencies.
+const getTopMostCentralPaneRouteName = (state = navigationRef.getState()) => originalGetTopMostCentralPaneRouteName(state);
+
 /**
  * Method for finding on which index in stack we are.
  * @param {Object} route
@@ -268,6 +272,7 @@ export default {
     setIsNavigationReady,
     getTopmostReportId,
     getRouteNameFromStateEvent,
+    getTopMostCentralPaneRouteName,
 };
 
 export {navigationRef};

src/libs/Navigation/NavigationRoot.js

@@ -1,4 +1,4 @@
-import React, {useRef, useEffect} from 'react';
+import React, {useRef, useEffect, useContext} from 'react';
 import PropTypes from 'prop-types';
 import {NavigationContainer, DefaultTheme, getPathFromState} from '@react-navigation/native';
 import {useFlipper} from '@react-navigation/devtools';
@@ -11,6 +11,7 @@ import Log from '../Log';
 import StatusBar from '../StatusBar';
 import useCurrentReportID from '../../hooks/useCurrentReportID';
 import useWindowDimensions from '../../hooks/useWindowDimensions';
+import {SidebarNavigationContext} from '../../pages/home/sidebar/SidebarNavigationContext';
 
 // https://reactnavigation.org/docs/themes
 const navigationTheme = {
@@ -53,6 +54,7 @@ function parseAndLogRoute(state) {
 function NavigationRoot(props) {
     useFlipper(navigationRef);
     const firstRenderRef = useRef(true);
+    const globalNavigation = useContext(SidebarNavigationContext);
 
     const {updateCurrentReportID} = useCurrentReportID();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -128,6 +130,9 @@ function NavigationRoot(props) {
         }, 0);
         parseAndLogRoute(state);
         animateStatusBarBackgroundColor();
+
+        // Update the global navigation to show the correct selected menu items.
+        globalNavigation.updateFromNavigationState(state);
     };
 
     return (

src/libs/Navigation/getTopMostCentralPaneRouteName.js

@@ -0,0 +1,32 @@
+import lodashFindLast from 'lodash/findLast';
+
+/**
+ * Find the name of top most central pane route.
+ *
+ * @param {Object} state - The react-navigation state
+ * @returns {String | undefined} - It's possible that there is no central pane in the state.
+ */
+function getTopMostCentralPaneRouteName(state) {
+    if (!state) {
+        return;
+    }
+    const topmostCentralPane = lodashFindLast(state.routes, (route) => route.name === 'CentralPaneNavigator');
+
+    if (!topmostCentralPane) {
+        return;
+    }
+
+    if (topmostCentralPane.state && topmostCentralPane.state.routes) {
+        // State may don't have index in some cases. But in this case there will be only one route in state.
+        return topmostCentralPane.state.routes[topmostCentralPane.state.index || 0].name;
+    }
+
+    if (topmostCentralPane.params) {
+        // State may don't have inner state in some cases (e.g generating actions from path). But in this case there will be params available.
+        return topmostCentralPane.screen;
+    }
+
+    return undefined;
+}
+
+export default getTopMostCentralPaneRouteName;

src/libs/Navigation/linkTo.js

@@ -5,6 +5,7 @@ import linkingConfig from './linkingConfig';
 import getTopmostReportId from './getTopmostReportId';
 import getStateFromPath from './getStateFromPath';
 import CONST from '../../CONST';
+import getTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName';
 
 /**
  * Motivation for this function is described in NAVIGATION.md
@@ -66,7 +67,11 @@ export default function linkTo(navigation, path, type) {
             action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE;
 
             // If this action is navigating to the report screen and the top most navigator is different from the one we want to navigate - PUSH the new screen to the top of the stack
-        } else if (action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && getTopmostReportId(root.getState()) !== getTopmostReportId(state)) {
+        } else if (
+            action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR &&
+            (getTopmostReportId(root.getState()) !== getTopmostReportId(state) || getTopMostCentralPaneRouteName(root.getState()) !== getTopMostCentralPaneRouteName(state))
+            // getTopmostReportId(root.getState()) !== getTopmostReportId(state)
+        ) {
             action.type = CONST.NAVIGATION.ACTION_TYPE.PUSH;
 
             // If the type is UP, we deeplinked into one of the RHP flows and we want to replace the current screen with the previous one in the flow

src/pages/home/sidebar/GlobalNavigation/GlobalNavigation.js

@@ -0,0 +1,53 @@
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import PressableAvatarWithIndicator from '../PressableAvatarWithIndicator';
+import styles from '../../../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import * as Expensicons from '../../../../components/Icon/Expensicons';
+import GlobalNavigationMenuItemList from './GlobalNavigationMenuItemList';
+import CONST from '../../../../CONST';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
+
+const propTypes = {
+    isCreateMenuOpen: PropTypes.bool,
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    isCreateMenuOpen: false,
+};
+
+function GlobalNavigation({isCreateMenuOpen, children}) {
+    const items = useMemo(
+        () => [
+            {
+                icon: Expensicons.ChatBubble,
+                text: 'Chats',
+                value: CONST.GLOBAL_NAVIGATION_OPTION.CHATS,
+                onSelected: () => {
+                    Navigation.navigate(ROUTES.REPORT);
+                },
+            },
+        ],
+        [],
+    );
+
+    return (
+        <View style={[styles.ph5, styles.pv3, styles.alignItemsCenter, styles.h100, styles.globalNavigation]}>
+            <PressableAvatarWithIndicator isCreateMenuOpen={isCreateMenuOpen} />
+            <GlobalNavigationMenuItemList
+                menuItems={items}
+                style={styles.mt4}
+            />
+            {children}
+        </View>
+    );
+}
+
+GlobalNavigation.propTypes = propTypes;
+GlobalNavigation.defaultProps = defaultProps;
+GlobalNavigation.displayName = 'GlobalNavigation';
+
+export default withLocalize(GlobalNavigation);

src/pages/home/sidebar/GlobalNavigation/GlobalNavigationMenuItem.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import Text from '../../../../components/Text';
+import styles from '../../../../styles/styles';
+import * as StyleUtils from '../../../../styles/StyleUtils';
+import Icon from '../../../../components/Icon';
+import CONST from '../../../../CONST';
+import PressableWithSecondaryInteraction from '../../../../components/PressableWithSecondaryInteraction';
+import Hoverable from '../../../../components/Hoverable';
+import variables from '../../../../styles/variables';
+import stylePropTypes from '../../../../styles/stylePropTypes';
+import defaultTheme from '../../../../styles/themes/default';
+import fontWeightBold from '../../../../styles/fontWeight/bold';
+
+const propTypes = {
+    /** Function to fire when component is pressed */
+    onPress: PropTypes.func,
+
+    /** Icon to display */
+    icon: PropTypes.elementType,
+
+    /** Icon Width */
+    iconWidth: PropTypes.number,
+
+    /** Icon Height */
+    iconHeight: PropTypes.number,
+
+    /** Text to display for the item */
+    title: PropTypes.string,
+
+    /** Any additional styles to pass to the icon container. */
+    iconStyles: stylePropTypes,
+
+    /** The fill color to pass into the icon. */
+    iconFill: PropTypes.string,
+
+    /** Whether item is focused or active */
+    focused: PropTypes.bool,
+
+    /** Prop to represent the size of the avatar images to be shown */
+    avatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+};
+
+const defaultProps = {
+    icon: undefined,
+    iconWidth: undefined,
+    iconHeight: undefined,
+    iconStyles: [],
+    iconFill: undefined,
+    focused: false,
+    onPress: () => {},
+    title: '',
+    avatarSize: CONST.AVATAR_SIZE.DEFAULT,
+};
+
+const GlobalNavigationMenuItem = React.forwardRef((props, ref) => (
+    <Hoverable>
+        {(isHovered) => (
+            <PressableWithSecondaryInteraction
+                onPress={props.focused ? () => {} : props.onPress}
+                style={styles.globalNavigationItemContainer}
+                ref={ref}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.MENUITEM}
+                accessibilityLabel={props.title ? props.title.toString() : ''}
+            >
+                {({pressed}) => (
+                    <View style={[styles.alignItemsCenter, styles.flexRow, styles.flex1]}>
+                        <View style={[styles.globalNavigationSelectionIndicator, {backgroundColor: props.focused ? defaultTheme.iconMenu : defaultTheme.transparent}]} />
+                        <View style={[styles.flexColumn, styles.flex1, styles.alignItemsCenter, styles.mr1]}>
+                            <View style={[styles.popoverMenuIcon, ...props.iconStyles, StyleUtils.getAvatarWidthStyle(props.avatarSize)]}>
+                                <Icon
+                                    hovered={isHovered}
+                                    pressed={pressed}
+                                    src={props.icon}
+                                    width={props.iconWidth}
+                                    height={props.iconHeight}
+                                    fill={props.focused ? defaultTheme.iconMenu : props.iconFill}
+                                />
+                            </View>
+                            <View style={[styles.mt1, styles.alignItemsCenter]}>
+                                <Text
+                                    style={[
+                                        StyleUtils.getFontSizeStyle(variables.fontSizeExtraSmall),
+                                        props.focused ? {color: defaultTheme.textLight, fontWeight: fontWeightBold} : {color: props.iconFill},
+                                    ]}
+                                >
+                                    {props.title}
+                                </Text>
+                            </View>
+                        </View>
+                    </View>
+                )}
+            </PressableWithSecondaryInteraction>
+        )}
+    </Hoverable>
+));
+
+GlobalNavigationMenuItem.propTypes = propTypes;
+GlobalNavigationMenuItem.defaultProps = defaultProps;
+GlobalNavigationMenuItem.displayName = 'GlobalNavigationMenuItem';
+
+export default GlobalNavigationMenuItem;