Merge pull request #3 from maxceem/feature/toggle-sidebar

Toggle Sidebar

Author: urwithat

.nvmrc

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

src/app/app-routing.module.ts

@@ -1,10 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { EmptyRouteComponent } from './empty-route/empty-route.component';
+import { AuthDemoComponent } from './auth-demo/auth-demo.component';
+import { NoSidebarDemoComponent } from './no-sidebar-demo/no-sidebar-demo.component';
 import { APP_BASE_HREF } from '@angular/common';
 
 const routes: Routes = [
-  { path: '**', component: EmptyRouteComponent }
+  { path: 'micro-frontends-angular-route/auth', component: AuthDemoComponent },
+  { path: 'micro-frontends-angular-route/no-sidebar', component: NoSidebarDemoComponent },
+  { path: '**', component: EmptyRouteComponent },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -9,7 +9,6 @@ <h1>Angular child app example</h1>
 
   <div><a routerLink="/micro-frontends-react-route">Link to React child app</a></div>
 
-  <tc-ex-auth-demo></tc-ex-auth-demo>
+  <router-outlet></router-outlet>
 </div>
 
-<router-outlet></router-outlet>

src/app/constants/appMenu.ts

@@ -14,8 +14,14 @@ const appMenu = [
     activeIcon: angularActiveIcon,
   },
   {
-    title: 'Home',
-    path: '/micro-frontends-angular-route/home',
+    title: 'Auth Demo',
+    path: '/micro-frontends-angular-route/auth',
+    icon: homeIcon,
+    activeIcon: homeActiveIcon,
+  },
+  {
+    title: 'No Sidebar Demo',
+    path: '/micro-frontends-angular-route/no-sidebar',
     icon: homeIcon,
     activeIcon: homeActiveIcon,
   },

src/app/no-sidebar-demo/no-sidebar-demo.component.html

@@ -0,0 +1,7 @@
+<h2>No Sidebar</h2>
+<div>Enable/disable sidebar for routes that match:</div>
+<pre>{{route}}</pre>
+<div>
+  <button (click)="enable()">Enable</button>
+  <button (click)="disable()">Disable</button>
+</div>

src/app/no-sidebar-demo/no-sidebar-demo.component.ts

@@ -0,0 +1,26 @@
+/**
+ * This component demonstrates how we can disable sidebar for some subroutes.
+ *
+ * For example this component disables sidebar for routes "/micro-frontends-angular-route/no-sidebar/*".
+ */
+import { Component, OnInit } from '@angular/core';
+import {
+  disableSidebarForRoute,
+  enableSidebarForRoute,
+} from '@topcoder/micro-frontends-navbar-app';
+
+const COMPONENT_ROUTE = "/micro-frontends-angular-route/no-sidebar/*";
+
+@Component({
+  selector: 'tc-ex-no-sidebar-demo',
+  templateUrl: './no-sidebar-demo.component.html',
+})
+export class NoSidebarDemoComponent implements OnInit {
+  route = COMPONENT_ROUTE
+  enable = () => enableSidebarForRoute(COMPONENT_ROUTE)
+  disable = () => disableSidebarForRoute(COMPONENT_ROUTE)
+
+  ngOnInit(): void {
+    disableSidebarForRoute(COMPONENT_ROUTE)
+  }
+}

src/typings.d.ts

@@ -4,6 +4,8 @@ declare module '@topcoder/micro-frontends-navbar-app' {
   export const setAppMenu: any;
   export const getAuthUserTokens: any;
   export const getAuthUserProfile: any;
+  export const disableSidebarForRoute: any;
+  export const enableSidebarForRoute: any;
 }
 
 declare module "*.svg" {