diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..c2f6421 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +10.22.1 diff --git a/src/__mocks__/@topcoder/micro-frontends-navbar-app.js b/src/__mocks__/@topcoder/micro-frontends-navbar-app.js index 50d22de..7d1024f 100644 --- a/src/__mocks__/@topcoder/micro-frontends-navbar-app.js +++ b/src/__mocks__/@topcoder/micro-frontends-navbar-app.js @@ -4,4 +4,6 @@ module.exports = { setAppMenu: () => {}, getAuthUserTokens: () => new Promise(() => {}), getAuthUserProfile: () => new Promise(() => {}), + disableSidebarForRoute: () => {}, + enableSidebarForRoute: () => {}, }; diff --git a/src/components/NoSidebarDemo/index.js b/src/components/NoSidebarDemo/index.js new file mode 100644 index 0000000..dcbe38f --- /dev/null +++ b/src/components/NoSidebarDemo/index.js @@ -0,0 +1,38 @@ +/** + * This component demonstrates how we can disable sidebar for some subroutes. + * + * For example this component disables sidebar for routes "/micro-frontends-react-route/no-sidebar/*". + */ +import React, { useLayoutEffect } from "react"; +import { + disableSidebarForRoute, + enableSidebarForRoute, +} from "@topcoder/micro-frontends-navbar-app"; + +const COMPONENT_ROUTE = "/micro-frontends-react-route/no-sidebar/*"; + +const NoSidebarDemo = () => { + // use "useLayoutEffect" to remove the sidebar as early as possible + // without waiting the component to be rendered + useLayoutEffect(() => { + disableSidebarForRoute(COMPONENT_ROUTE); + }, []); + + return ( + <> +

Sidebar

+
Enable/disable sidebar for routes that match:
+
{COMPONENT_ROUTE}
+
+ + +
+ + ); +}; + +export default NoSidebarDemo; diff --git a/src/constants/appMenu.js b/src/constants/appMenu.js index e09629d..216f9a1 100644 --- a/src/constants/appMenu.js +++ b/src/constants/appMenu.js @@ -14,8 +14,14 @@ const appMenu = [ activeIcon: reactActiveIcon, }, { - title: "Home", - path: "/micro-frontends-react-route/home", + title: "Auth Demo", + path: "/micro-frontends-react-route/auth", + icon: homeIcon, + activeIcon: homeActiveIcon, + }, + { + title: "No Sidebar Demo", + path: "/micro-frontends-react-route/no-sidebar", icon: homeIcon, activeIcon: homeActiveIcon, }, diff --git a/src/root.component.js b/src/root.component.js index f885306..313381c 100644 --- a/src/root.component.js +++ b/src/root.component.js @@ -1,8 +1,9 @@ import React, { useEffect } from "react"; -import { Link } from "@reach/router"; +import { Link, Router } from "@reach/router"; import { setAppMenu } from "@topcoder/micro-frontends-navbar-app"; import appMenu from "./constants/appMenu"; import AuthDemo from "./components/AuthDemo"; +import NoSidebarDemo from "./components/NoSidebarDemo"; export default function Root() { useEffect(() => { @@ -32,7 +33,10 @@ export default function Root() { - + + + + ); }