feat(fire): update layout to new configuration

Author: beeman

apps/demo/src/app/app.service.ts

@@ -4,23 +4,26 @@ import { environment } from '../environments/environment'
 
 const sourceCode = {
   label: 'Source Code',
+  labelClass: 'd-none d-lg-inline',
   link: environment.urls.repo,
-  class: 'btn btn-sm btn-outline-primary ml-2',
-  icon: 'fe fe-github',
+  linkClass: 'btn btn-sm btn-outline-primary ml-2',
+  icon: 'fa fa-fw fa-github',
   external: true,
 }
 const documentation = {
   label: 'Documentation',
+  labelClass: 'd-none d-lg-inline',
   link: environment.urls.docs,
-  class: 'btn btn-sm btn-outline-success ml-2',
-  icon: 'fe fe-info',
+  linkClass: 'btn btn-sm btn-outline-success ml-2',
+  icon: 'fa fa-fw fa-info',
   external: true,
 }
 const fire = {
-  label: 'Fire',
+  label: 'Firebase Demo',
+  labelClass: 'd-none d-lg-inline',
   link: environment.urls.fire,
-  class: 'btn btn-sm btn-outline-warning ml-2',
-  icon: 'fa fa-fire',
+  linkClass: 'btn btn-sm btn-outline-warning ml-2',
+  icon: 'fa fa-fw fa-fire',
   external: true,
 }
 

apps/fire/src/app/app-routing.module.ts

@@ -1,17 +1,24 @@
 import { ExtraOptions, RouterModule, Routes } from '@angular/router'
 import { ModuleWithProviders } from '@angular/core'
+import { LayoutComponent } from '@tabler/angular-ui'
 import { AuthModuleRoutes } from './auth/auth.module'
 import { LoggedInGuard } from './auth/guards/logged-in.guard'
 
 const routes: Routes = [
-  { path: '', redirectTo: 'fire', pathMatch: 'full' },
-  { path: 'auth', children: [...AuthModuleRoutes] },
+  { path: '', redirectTo: 'guestbook', pathMatch: 'full' },
   {
-    path: 'crud',
-    loadChildren: './crud/crud.module#CrudModule',
-    canActivate: [LoggedInGuard],
+    path: '',
+    component: LayoutComponent,
+    children: [
+      { path: 'auth', children: [...AuthModuleRoutes] },
+      { path: 'guestbook', loadChildren: './fire/fire.module#FireModule' },
+      {
+        path: 'crud',
+        loadChildren: './crud/crud.module#CrudModule',
+        canActivate: [LoggedInGuard],
+      },
+    ],
   },
-  { path: 'fire', loadChildren: './fire/fire.module#FireModule' },
   { path: '**', redirectTo: '/404' },
 ]
 

apps/fire/src/app/app.component.ts

@@ -1,12 +1,9 @@
 import { Component } from '@angular/core'
-import { AppService } from './app.service'
 
 @Component({
   selector: 'app-root',
   template: `
-    <ui-layout [config]="app.config$ | async"></ui-layout>
+    <router-outlet></router-outlet>
   `,
 })
-export class AppComponent {
-  constructor(public app: AppService) {}
-}
+export class AppComponent {}

apps/fire/src/app/app.service.ts

@@ -7,32 +7,83 @@ const defaultUser = {
   email: 'Guest account',
   avatarText: '?',
 }
+const headerBaseLinks = [
+  {
+    label: 'Guestbook',
+    icon: 'fe fe-book',
+    link: '/guestbook',
+  },
+]
+const headerLoggedIn = [
+  ...headerBaseLinks,
+  {
+    label: 'Beers',
+    icon: 'fa fa-beer',
+    link: '/crud/beers',
+  },
+  {
+    label: 'Notes',
+    icon: 'fa fa-pencil-square-o',
+    link: '/crud/notes',
+  },
+]
+const headerLoggedOut = [
+  ...headerBaseLinks,
+  {
+    label: 'Firebase CRUD',
+    icon: 'fa fa-database',
+    link: '/crud/beers',
+  },
+]
+const profileLoggedIn = [
+  {
+    link: '/auth/profile',
+    linkClass: 'dropdown-item',
+    label: 'Profile',
+    icon: 'fe fe-user dropdown-icon',
+  },
+  {
+    link: '/auth/logout',
+    linkClass: 'dropdown-item',
+    label: 'Log out',
+    icon: 'fe fe-log-out dropdown-icon',
+  },
+]
+const profileLoggedOut = [
+  {
+    link: '/auth/login',
+    linkClass: 'dropdown-item',
+    label: 'Log in',
+    icon: 'fe fe-log-in dropdown-icon',
+  },
+]
 
 @Injectable()
 export class AppService {
   public config$
   constructor(private auth: AuthService, private ui: UiService) {
     this.config$ = ui.config$
-    this.auth.user$.map(user => (user ? user : defaultUser)).subscribe(user => (this.ui.profile = user))
+    this.auth.user$.map(user => (user ? user : defaultUser)).subscribe(user => this.updateUser(user))
     this.init()
   }
+
+  public updateUser(user) {
+    this.ui.profile = user || defaultUser
+    this.ui.updateLayout({
+      headerNav: user.id ? headerLoggedIn : headerLoggedOut,
+      profileNav: user.id ? profileLoggedIn : profileLoggedOut,
+    })
+  }
+
   public init() {
     this.ui.appName = 'Firebase Demo'
-    this.ui.headerNav = [
-      {
-        label: 'Guestbook',
-        icon: 'fe fe-book',
-        link: '/fire/guestbook',
-      },
-      {
-        label: 'Beers',
-        icon: 'fa fa-beer',
-        link: '/crud/beers',
-      },
+    this.ui.headerSubNav = [
       {
-        label: 'Notes',
-        icon: 'fa fa-pencil-square-o',
-        link: '/crud/notes',
+        label: 'Source Code',
+        labelClass: 'd-none d-lg-inline',
+        link: 'https://github.com/tabler/tabler-angular/tree/develop/apps/fire/src/app',
+        linkClass: 'btn btn-sm btn-outline-primary ml-2',
+        icon: 'fe fe-github mr-1',
       },
     ]
     this.ui.footerText = `
@@ -41,21 +92,13 @@ export class AppService {
       Angular by <a href="https://github.com/beeman" target="_blank">@beeman</a>.
       MIT Licensed
     `
-    this.ui.links.set('logoutLink', {
-      link: '/auth/logout',
-      label: 'Log out',
-      icon: 'fe fe-log-out',
-    })
-    this.ui.links.set('loginLink', {
-      link: '/auth/login',
-      label: 'Log in',
-      icon: 'fe fe-log-in',
-    })
-    this.ui.links.set('sourceLink', {
-      label: 'Source Code',
-      link: 'https://github.com/tabler/tabler-angular/tree/develop/apps/fire/src/app',
-      class: 'btn btn-sm btn-outline-primary ml-2',
-      icon: 'fe fe-github',
-    })
+    this.ui.footerNav = [
+      {
+        label: 'Source Code',
+        link: 'https://github.com/tabler/tabler-angular/tree/develop/apps/fire/src/app',
+        linkClass: 'btn btn-sm btn-outline-primary ml-2',
+        icon: 'fe fe-github mr-2',
+      },
+    ]
   }
 }

apps/fire/src/app/crud/containers/items-index/items-index.component.ts

@@ -18,14 +18,14 @@ export const getProperties = o =>
     <ui-page>
       <div class="py-5">
         <div class="row">
-          <div class="col-8">
+          <div class="col-md-12 col-lg-8">
             <app-item-list [items]="items$ | async"
                             [user]="user"
                             [collection]="collection"
                             (action)="handleAction($event)">
             </app-item-list>
           </div>
-          <div class="col-4">
+          <div class="col-md-12 col-lg-4">
             <div class="card">
               <div class="card-body">
                 <h3 class="card-title">Crud Models</h3>

apps/fire/src/app/fire/fire.module.ts

@@ -15,8 +15,7 @@ const routes: Routes = [
     path: '',
     component: FireIndexComponent,
     children: [
-      { path: '', redirectTo: 'guestbook', pathMatch: 'full' },
-      { path: 'guestbook', component: GuestbookComponent },
+      { path: '', component: GuestbookComponent },
     ],
   },
 ]

libs/angular-core/src/shared.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
+import { RouterModule } from '@angular/router'
 import { FormsModule } from '@tabler/angular-forms'
 import { UiModule } from '@tabler/angular-ui'
 import { ModalModule } from 'ngx-bootstrap'
 
 @NgModule({
-  imports: [CommonModule, UiModule, FormsModule, ModalModule],
-  exports: [CommonModule, UiModule, FormsModule, ModalModule],
+  imports: [CommonModule, RouterModule, UiModule, FormsModule, ModalModule],
+  exports: [CommonModule, RouterModule, UiModule, FormsModule, ModalModule],
 })
 export class SharedModule {}