diff --git a/README.md b/README.md index d4cd21d..8f0ac81 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,8 @@ This app exports functions to be imported by other microapps. - `getAuthUserProfile` - returns a promise which resolves to the user profile object - `disableSidebarForRoute` - disable (remove) sidebar for some route - `enableSidebarForRoute` - enable sidebar for the route, which was previously disabled +- `disableNavigationForRoute` - disable (remove) navigation for some route +- `enableNavigationForRoute` - enable (remove) navigation for some route #### How to export diff --git a/src/App.jsx b/src/App.jsx index 0e6bec9..1ea6bd9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -18,14 +18,18 @@ const App = () => { const apps = useMemo(() => _.flatMap(menu, "apps"), [menu]); // list of routes where we have to disabled sidebar const disabledRoutes = useSelector((state) => state.menu.disabledRoutes); + // list of routes where we have to disabled navigations + const disabledNavigations = useSelector( + (state) => state.menu.disabledNavigations + ); // user profile information const auth = useSelector((state) => state.auth); // `true` is sidebar has to be disabled for the current route const isSideBarDisabled = useMatchSomeRoute(disabledRoutes); + // `true` is navigation has to be disabled for the current route + const isNavigationDisabled = useMatchSomeRoute(disabledNavigations); // Left sidebar collapse state const [sidebarCollapsed, setSidebarCollapsed] = useState(false); - // hide switch tools and notification when user is onboarding - const [hideSwitchTools, setHideSwitchTools] = useState(false); // Toggle left sidebar callback const toggleSidebar = useCallback(() => { setSidebarCollapsed(!sidebarCollapsed); @@ -41,11 +45,6 @@ const App = () => { // set/remove class for the whole page, to know if sidebar is present or no useEffect(() => { - if (location.pathname.includes("/self-service")) { - setHideSwitchTools(true); - } else { - setHideSwitchTools(false); - } if (isSideBarDisabled) { document.body.classList.add("no-sidebar"); } else { @@ -55,7 +54,7 @@ const App = () => { return ( <> - + {!isSideBarDisabled && (
diff --git a/src/actions/menu.js b/src/actions/menu.js index 835c9b7..3fe4c34 100644 --- a/src/actions/menu.js +++ b/src/actions/menu.js @@ -39,4 +39,28 @@ export default { type: ACTIONS.MENU.ENABLE_SIDEBAR_FOR_ROUTE, payload: route, }), + + /** + * Disable navigation for route. + * + * @param {String} route route path + * + * @returns {{ type: String, payload: any }} action object + */ + disableNavigationForRoute: (route) => ({ + type: ACTIONS.MENU.DISABLE_NAVIGATION_FOR_ROUTE, + payload: route, + }), + + /** + * Enable navigation for route. + * + * @param {String} route route path + * + * @returns {{ type: String, payload: any }} action object + */ + enableNavigationForRoute: (route) => ({ + type: ACTIONS.MENU.ENABLE_NAVIGATION_FOR_ROUTE, + payload: route, + }), }; diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx index 48a50f4..f05eb39 100644 --- a/src/components/NavBar/index.jsx +++ b/src/components/NavBar/index.jsx @@ -3,7 +3,7 @@ * * Shows global top navigation bar with all apps menu, logo and user menu. */ - import React, { +import React, { useState, useCallback, Fragment, diff --git a/src/constants/index.js b/src/constants/index.js index 4de2a3a..be97d87 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -16,5 +16,7 @@ export const ACTIONS = { SET_APP_MENU: "SET_APP_MENU", DISABLE_SIDEBAR_FOR_ROUTE: "DISABLE_SIDEBAR_FOR_ROUTE", ENABLE_SIDEBAR_FOR_ROUTE: "ENABLE_SIDEBAR_FOR_ROUTE", + DISABLE_NAVIGATION_FOR_ROUTE: "DISABLE_NAVIGATION_FOR_ROUTE", + ENABLE_NAVIGATION_FOR_ROUTE: "ENABLE_NAVIGATION_FOR_ROUTE", }, }; diff --git a/src/reducers/menu.js b/src/reducers/menu.js index 5338139..ae8989a 100644 --- a/src/reducers/menu.js +++ b/src/reducers/menu.js @@ -10,6 +10,7 @@ import { ACTIONS, APP_CATEGORIES } from "../constants"; const initialState = { categories: APP_CATEGORIES, // Default Apps Menu structure. disabledRoutes: [], + disabledNavigations: [], }; /** @@ -132,6 +133,35 @@ const menuReducer = (state = initialState, action) => { }; } + case ACTIONS.MENU.DISABLE_NAVIGATION_FOR_ROUTE: { + // if route is already disabled, don't do anything + if (state.disabledNavigations.indexOf(action.payload) > -1) { + return state; + } + + return { + ...state, + // add route to the disabled list + disabledNavigations: [...state.disabledNavigations, action.payload], + }; + } + + case ACTIONS.MENU.ENABLE_NAVIGATION_FOR_ROUTE: { + // if route is not disabled, don't do anything + if (state.disabledNavigations.indexOf(action.payload) === -1) { + return state; + } + + return { + ...state, + // remove the route from the disabled list + disabledNavigations: _.without( + state.disabledNavigations, + action.payload + ), + }; + } + default: return state; } diff --git a/src/services/auth.js b/src/services/auth.js index 035f850..a3a0c30 100644 --- a/src/services/auth.js +++ b/src/services/auth.js @@ -125,4 +125,3 @@ export function authenticate(store) { } }); } - diff --git a/src/topcoder-micro-frontends-navbar-app.js b/src/topcoder-micro-frontends-navbar-app.js index fa6391e..31fc2ce 100644 --- a/src/topcoder-micro-frontends-navbar-app.js +++ b/src/topcoder-micro-frontends-navbar-app.js @@ -18,6 +18,8 @@ import { getAuthUserProfile, setUserProfilePhoto, setNotificationPlatform, + disableNavigationForRoute, + enableNavigationForRoute, } from "./utils/exports"; import { login, businessLogin, logout } from "./utils"; @@ -47,5 +49,7 @@ export { disableSidebarForRoute, enableSidebarForRoute, setNotificationPlatform, + disableNavigationForRoute, + enableNavigationForRoute, PLATFORM, }; diff --git a/src/utils/exports.js b/src/utils/exports.js index 0429958..a5fd63d 100644 --- a/src/utils/exports.js +++ b/src/utils/exports.js @@ -16,7 +16,9 @@ export const { disableSidebarForRoute, enableSidebarForRoute, setNotificationPlatform, - setUserProfilePhoto + setUserProfilePhoto, + disableNavigationForRoute, + enableNavigationForRoute, } = bindActionCreators( { setAppMenu: menuActions.setAppMenu, @@ -24,6 +26,8 @@ export const { enableSidebarForRoute: menuActions.enableSidebarForRoute, setNotificationPlatform: notificationActions.setNotificationPlatform, setUserProfilePhoto: authActions.setProfilePhoto, + disableNavigationForRoute: menuActions.disableNavigationForRoute, + enableNavigationForRoute: menuActions.enableNavigationForRoute, }, store.dispatch );