Toggle Sidebar

.nvmrc

@@ -0,0 +1 @@
+10.22.1

src/__mocks__/@topcoder/micro-frontends-navbar-app.js

@@ -4,4 +4,6 @@ module.exports = {
   setAppMenu: () => {},
   getAuthUserTokens: () => new Promise(() => {}),
   getAuthUserProfile: () => new Promise(() => {}),
+  disableSidebarForRoute: () => {},
+  enableSidebarForRoute: () => {},
 };

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 (
+    <>
+      <h2>Sidebar</h2>
+      <div>Enable/disable sidebar for routes that match:</div>
+      <pre>{COMPONENT_ROUTE}</pre>
+      <div>
+        <button onClick={() => enableSidebarForRoute(COMPONENT_ROUTE)}>
+          Enable
+        </button>
+        <button onClick={() => disableSidebarForRoute(COMPONENT_ROUTE)}>
+          Disable
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default NoSidebarDemo;

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

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() {
         </Link>
       </div>
 
-      <AuthDemo />
+      <Router>
+        <AuthDemo path="/micro-frontends-react-route/auth" />
+        <NoSidebarDemo path="/micro-frontends-react-route/no-sidebar" />
+      </Router>
     </div>
   );
 }