refactor: src/app

Author: xidedix

package-lock.json

@@ -38,5 +38,42 @@ export const navItems: NavData[] = [
       variant: 'info',
       text: 'NEW'
     }
-  }
+  },
+  {
+    name: 'Colors',
+    url: '/theme/colors',
+    icon: 'cui-drop'
+  },
+  {
+    name: 'Typography',
+    url: '/theme/typography',
+    icon: 'cui-pencil'
+  },
+  {
+    name: 'Pages',
+    url: '/pages',
+    icon: 'cui-star',
+    children: [
+      {
+        name: 'Error 404',
+        url: '/404',
+        icon: 'cui-star'
+      },
+      {
+        name: 'Error 500',
+        url: '/500',
+        icon: 'cui-circle-x'
+      }
+    ]
+  },
+  {
+    name: 'Disabled',
+    url: '/dashboard',
+    icon: 'cui-ban',
+    badge: {
+      variant: 'secondary',
+      text: 'NEW'
+    },
+    attributes: { disabled: true },
+  },
 ];

src/app/_nav.ts

@@ -14,7 +14,6 @@ export class AppComponent implements OnInit {
       if (!(evt instanceof NavigationEnd)) {
         return;
       }
-      window.scrollTo(0, 0);
     });
   }
 }

src/app/app.component.ts

@@ -16,6 +16,9 @@ import { AppComponent } from './app.component';
 // Import containers
 import { DefaultLayoutComponent } from './containers';
 
+import { P404Component } from './views/error/404.component';
+import { P500Component } from './views/error/500.component';
+
 const APP_CONTAINERS = [
   DefaultLayoutComponent
 ];
@@ -25,7 +28,9 @@ import {
   BreadcrumbModule,
   HeaderModule,
   FooterModule,
+  NavbarModule,
   SidebarModule,
+  TogglerModule,
 } from '@coreui/angular';
 
 // Import routing module
@@ -44,14 +49,18 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
     BreadcrumbModule.forRoot(),
     FooterModule,
     HeaderModule,
+    NavbarModule,
     SidebarModule,
     PerfectScrollbarModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
+    TogglerModule
   ],
   declarations: [
     AppComponent,
-    ...APP_CONTAINERS
+    ...APP_CONTAINERS,
+    P404Component,
+    P500Component
   ],
   providers: [{
     provide: LocationStrategy,

src/app/app.module.ts

@@ -3,13 +3,28 @@ import { Routes, RouterModule } from '@angular/router';
 
 // Import Containers
 import { DefaultLayoutComponent } from './containers';
-
+import { P404Component } from './views/error/404.component';
+import { P500Component } from './views/error/500.component';
 export const routes: Routes = [
   {
     path: '',
     redirectTo: 'dashboard',
     pathMatch: 'full',
   },
+  {
+    path: '404',
+    component: P404Component,
+    data: {
+      title: 'Page 404'
+    }
+  },
+  {
+    path: '500',
+    component: P500Component,
+    data: {
+      title: 'Page 500'
+    }
+  },
   {
     path: '',
     component: DefaultLayoutComponent,
@@ -20,13 +35,18 @@ export const routes: Routes = [
       {
         path: 'dashboard',
         loadChildren: './views/dashboard/dashboard.module#DashboardModule'
-      }
+      },
+      {
+        path: 'theme',
+        loadChildren: './views/theme/theme.module#ThemeModule'
+      },
     ]
-  }
+  },
+  { path: '**', component: P404Component }
 ];
 
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
+  imports: [ RouterModule.forRoot(routes, { anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled'}) ],
   exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

src/app/app.routing.ts

@@ -1,10 +1,11 @@
-<cui-header
-  [navbarBrandRouterLink]="['/dashboard']"
-  [fixed]="true"
-  [navbarBrandFull]="{src: 'assets/img/brand/logo.svg', width: 89, height: 25, alt: 'CoreUI Logo'}"
-  [navbarBrandMinimized]="{src: 'assets/img/brand/sygnet.svg', width: 30, height: 30, alt: 'CoreUI Logo'}"
-  [sidebarToggler]="'lg'"
-  [asideMenuToggler]="'lg'">
+<cui-header [fixed]="true">
+  <cui-toggler class="d-lg-none" cuiSidebarToggle></cui-toggler>
+  <cui-navbar-brand
+    [navbarBrandRouterLink]="['/dashboard']"
+    [navbarBrandFull]="{src: 'assets/img/brand/logo.svg', width: 89, height: 25, alt: 'CoreUI Logo'}"
+    [navbarBrandMinimized]="{src: 'assets/img/brand/sygnet.svg', width: 30, height: 30, alt: 'CoreUI Logo'}"
+  ></cui-navbar-brand>
+  <cui-toggler class="d-md-down-none" cuiSidebarToggle="lg"></cui-toggler>
   <ul class="nav navbar-nav d-md-down-none mr-auto">
     <li class="nav-item px-3">
       <a class="nav-link" href="#">Dashboard</a>
@@ -41,11 +42,13 @@
       </div>
     </li>
   </ul>
+  <cui-toggler class="d-md-down-none" [cuiAsideMenuToggle]="'lg'"></cui-toggler>
+  <cui-toggler class="d-lg-none" cuiAsideMenuToggle></cui-toggler>
 </cui-header>
 <div class="app-body">
-  <cui-sidebar [fixed]="true" [display]="'lg'">
+  <cui-sidebar [fixed]="true" [display]="'lg'" [opened]="true">
     <cui-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="sidebarMinimized"></cui-sidebar-nav>
-    <cui-sidebar-minimizer></cui-sidebar-minimizer>
+    <cui-sidebar-minimizer cuiSidebarMinimize cuiBrandMinimize></cui-sidebar-minimizer>
   </cui-sidebar>
   <!-- Main content -->
   <main class="main">
@@ -56,10 +59,19 @@
     </div><!-- /.container-fluid -->
   </main>
   <cui-aside [fixed]="true" [display]="false">
-
+    <cui-toggler cuiSidebarToggle="lg">
+      <button class="navbar-toggler" type="button">
+        <span class="cui-layers align-middle h2"></span>
+      </button>
+    </cui-toggler>
+    <button cuiSidebarMinimize>Sidebar minimizer</button>
+    <br/>
+    <button cuiSidebarToggle="lg">Sidebar toggler</button>
+    <br/>
+    <button cuiSidebarToggle>Sidebar mobile toggler</button>
   </cui-aside>
 </div>
 <cui-footer>
   <span><a href="https://coreui.io/pro/angular/">CoreUI</a> &copy; 2019 creativeLabs.</span>
-  <span class="ml-auto">Powered by <a href="https://coreui.io/pro/angular">CoreUI Pro for Angular</a></span>
+  <span class="ml-auto">Powered by <a href="https://coreui.io/pro/angular">CoreUI v3 for Angular</a></span>
 </cui-footer>

src/app/containers/default-layout/default-layout.component.html

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, Inject } from '@angular/core';
+import { Component, OnDestroy, Inject, OnInit } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { navItems } from '../../_nav';
 
@@ -7,11 +7,12 @@ import { navItems } from '../../_nav';
   selector: 'app-dashboard',
   templateUrl: './default-layout.component.html'
 })
-export class DefaultLayoutComponent implements OnDestroy {
+export class DefaultLayoutComponent implements OnDestroy, OnInit {
   public navItems = navItems;
   public sidebarMinimized = true;
   private changes: MutationObserver;
-  public element: HTMLElement;
+  public element: HTMLBodyElement;
+
   constructor(@Inject(DOCUMENT) _document?: any) {
 
     this.changes = new MutationObserver((mutations) => {
@@ -24,6 +25,8 @@ export class DefaultLayoutComponent implements OnDestroy {
     });
   }
 
+  ngOnInit(): void {}
+
   ngOnDestroy(): void {
     this.changes.disconnect();
   }

src/app/containers/default-layout/default-layout.component.ts

@@ -14,7 +14,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  imports: [ RouterModule.forChild(routes) ],
+  exports: [ RouterModule ]
 })
 export class DashboardRoutingModule {}