Footer Color
@@ -68,7 +79,7 @@
Router Animation
-
+
None
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss
index 1043e90e..ff68ff70 100644
--- a/src/app/core/components/theme-options/theme-options.component.scss
+++ b/src/app/core/components/theme-options/theme-options.component.scss
@@ -19,14 +19,29 @@
position: absolute;
right: 0;
top: 0;
- width: 320px;
+ width: 360px;
transform: translate3d(100%, 0, 0);
z-index: 999;
.close-button {
position: absolute;
- top: 0;
- right: 0;
+ top: 8px;
+ right: 8px;
+ }
+ }
+
+ .theme-options-panel-overlay {
+ position: fixed;
+ display: block;
+ background: rgba(0, 0, 0, 0);
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ z-index: 998;
+
+ &.hidden {
+ display: none;
}
}
@@ -34,6 +49,10 @@
font-size: 15px;
}
+ .mat-divider {
+ margin: 16px;
+ }
+
.open-button {
position: absolute;
top: 0;
diff --git a/src/app/core/components/theme-options/theme-options.component.ts b/src/app/core/components/theme-options/theme-options.component.ts
index 10d8ba25..c69966b7 100644
--- a/src/app/core/components/theme-options/theme-options.component.ts
+++ b/src/app/core/components/theme-options/theme-options.component.ts
@@ -1,28 +1,35 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
import { Subscription } from 'rxjs/Subscription';
import { FuseConfigService } from '../../services/config.service';
+import { Animations } from '../../animations';
@Component({
selector : 'fuse-theme-options',
templateUrl: './theme-options.component.html',
- styleUrls : ['./theme-options.component.scss']
+ styleUrls : ['./theme-options.component.scss'],
+ animations : [Animations.fadeInOut]
})
export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
@ViewChild('openButton') openButton;
@ViewChild('panel') panel;
+ @ViewChild('overlay') overlay: ElementRef;
public player: AnimationPlayer;
fuseSettings: any;
+ barClosed: boolean;
onSettingsChanged: Subscription;
constructor(
private animationBuilder: AnimationBuilder,
- private fuseConfig: FuseConfigService
+ private fuseConfig: FuseConfigService,
+ private renderer: Renderer2
)
{
+ this.barClosed = true;
+
this.onSettingsChanged =
this.fuseConfig.onSettingsChanged
.subscribe(
@@ -34,6 +41,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
ngOnInit()
{
+ this.renderer.listen(this.overlay.nativeElement, 'click', () => {
+ this.closeBar();
+ });
}
onSettingsChange()
@@ -43,23 +53,29 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
closeBar()
{
+ this.barClosed = true;
+
this.player =
this.animationBuilder
.build([
style({transform: 'translate3d(0,0,0)'}),
animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
]).create(this.panel.nativeElement);
+
this.player.play();
}
openBar()
{
+ this.barClosed = false;
+
this.player =
this.animationBuilder
.build([
style({transform: 'translate3d(100%,0,0)'}),
animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
]).create(this.panel.nativeElement);
+
this.player.play();
}
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index 766aa536..e2c5e7d6 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -15,7 +15,7 @@ import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm
import { FuseCountdownComponent } from '../components/countdown/countdown.component';
import { FuseNavigationService } from '../components/navigation/navigation.service';
import { FuseMatchMedia } from '../services/match-media.service';
-import { FuseNavbarService } from '../../main/navbar/navbar.service';
+import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
import { FuseHljsComponent } from '../components/hljs/hljs.component';
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
@@ -72,7 +72,7 @@ import { CookieService } from 'ngx-cookie-service';
CookieService,
FuseNavigationService,
FuseMatchMedia,
- FuseNavbarService,
+ FuseNavbarVerticalService,
FuseMdSidenavHelperService
]
})
diff --git a/src/app/core/scss/partials/_navigation.scss b/src/app/core/scss/partials/_navigation.scss
index 05ecae0a..f003e88e 100644
--- a/src/app/core/scss/partials/_navigation.scss
+++ b/src/app/core/scss/partials/_navigation.scss
@@ -118,4 +118,54 @@
}
}
}
+
+ &.horizontal {
+ display: flex;
+ flex-direction: row;
+
+ .nav-item {
+
+ &.nav-collapse {
+ position: relative;
+
+ .children {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 100%;
+ z-index: 999;
+ min-width: 200px;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+
+ &.open {
+ display: block;
+ }
+
+ .nav-link {
+ padding-left: 24px !important;
+ }
+ }
+ }
+ }
+
+ > .nav-item {
+
+ &.nav-collapse {
+ position: relative;
+
+ > .nav-link {
+ height: 56px;
+
+ .collapse-arrow {
+ display: none;
+ }
+ }
+
+ > .children {
+ top: 100%;
+ left: 0;
+ }
+ }
+ }
+ }
}
diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts
index 8d73e08a..f6152254 100644
--- a/src/app/core/services/config.service.ts
+++ b/src/app/core/services/config.service.ts
@@ -22,9 +22,10 @@ export class FuseConfigService
// Set the default settings
this.defaultSettings = {
layout : {
- navigation: 'left', // 'right', 'left', 'top', none
- toolbar : 'below', // 'above', 'below', none
- footer : 'none' // 'above', 'below', none
+ navigation: 'top', // 'right', 'left', 'top', 'none'
+ toolbar : 'above', // 'above', 'below', 'none'
+ footer : 'below', // 'above', 'below', 'none'
+ mode : 'fullwidth' // 'boxed', 'fullwidth'
},
colorClasses : {
toolbar: 'md-white-500-bg',
diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.scss b/src/app/main/content/apps/file-manager/file-list/file-list.component.scss
index 6d735122..69f5f5b8 100644
--- a/src/app/main/content/apps/file-manager/file-list/file-list.component.scss
+++ b/src/app/main/content/apps/file-manager/file-list/file-list.component.scss
@@ -10,6 +10,7 @@
.mat-row {
position: relative;
cursor: pointer;
+ min-height: 64px;
.mat-cell {
diff --git a/src/app/main/footer/footer.component.html b/src/app/main/footer/footer.component.html
index 9b3e8393..0153af89 100644
--- a/src/app/main/footer/footer.component.html
+++ b/src/app/main/footer/footer.component.html
@@ -1,3 +1,14 @@
-
- Footer
+
+
+
+
diff --git a/src/app/main/footer/footer.component.scss b/src/app/main/footer/footer.component.scss
index cfaf7bde..54033040 100644
--- a/src/app/main/footer/footer.component.scss
+++ b/src/app/main/footer/footer.component.scss
@@ -6,6 +6,7 @@
.mat-toolbar {
background: inherit;
color: inherit;
+ box-shadow: 0px -1px 1px -1px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.14), 0px -1px 3px 0px rgba(0, 0, 0, 0.12);
}
&.above {
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 51b3066c..7c5a2fd7 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -8,13 +8,22 @@
+
+
+
+
+
-
-
+
+
+
+
@@ -34,7 +43,13 @@
-
+
+
+
+
-
-
+
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.scss b/src/app/main/navbar/vertical/navbar-vertical.component.scss
new file mode 100644
index 00000000..28cea62d
--- /dev/null
+++ b/src/app/main/navbar/vertical/navbar-vertical.component.scss
@@ -0,0 +1,137 @@
+@import "../../../core/scss/fuse";
+
+fuse-main {
+
+ &.fuse-nav-bar-folded {
+
+ .content-wrapper {
+
+ &:last-child {
+ padding-left: 64px !important;
+ }
+
+ &:first-child {
+ padding-right: 64px !important;
+ }
+
+ &:first-child:last-child {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+
+ }
+ }
+}
+
+fuse-navbar-vertical {
+ display: flex;
+ flex-direction: column;
+ width: 256px;
+ min-width: 256px;
+ max-width: 256px;
+ background-color: #FFFFFF;
+ overflow-y: auto;
+ overflow-x: hidden;
+ z-index: 3;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+ transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
+ transform: translateX(0);
+
+ &.folded {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+
+ &.left-navbar {
+ left: 0;
+ }
+ &.right-navbar {
+ right: 0;
+ }
+
+ &:not(.folded-open) {
+ width: 64px;
+ min-width: 64px;
+ max-width: 64px;
+
+ .navbar-header {
+ padding: 0 16px 0 16px;
+ }
+ }
+
+ &.folded-open {
+
+ }
+ }
+
+ &.close {
+ &.left-navbar {
+ transform: translateX(-100%) !important;
+ }
+ &.right-navbar {
+ transform: translateX(100%) !important;
+ }
+ box-shadow: none;
+ }
+
+ @include media-breakpoint('lt-lg') {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ &.left-navbar {
+ left: 0;
+ }
+ &.right-navbar {
+ right: 0;
+ }
+
+ &:not(.initialized) {
+ &.left-navbar {
+ transform: translateX(-100%);
+ }
+ &.right-navbar {
+ transform: translateX(100%);
+ }
+ }
+ }
+
+ .navbar-header {
+ padding: 0 16px 0 24px;
+ display: flex;
+ align-items: center;
+ height: 64px;
+ min-height: 64px;
+ justify-content: space-between;
+ transition: padding 200ms ease;
+ background-color: rgba(255, 255, 255, .05);
+ @include mat-elevation(1);
+
+ .logo {
+ display: flex;
+ align-items: center;
+
+ .logo-icon {
+ display: block;
+ background: #039BE5;
+ width: 32px;
+ min-width: 32px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ font-size: 16px;
+ font-weight: 500;
+ color: #FFF;
+ border-radius: 2px;
+ }
+
+ .logo-text {
+ margin-left: 16px;
+ font-size: 16px;
+ }
+ }
+ }
+
+ .nav-bar-content {
+ flex: 1;
+ }
+}
diff --git a/src/app/main/navbar/navbar.component.ts b/src/app/main/navbar/vertical/navbar-vertical.component.ts
similarity index 88%
rename from src/app/main/navbar/navbar.component.ts
rename to src/app/main/navbar/vertical/navbar-vertical.component.ts
index 37ed4168..cd0ca2a6 100644
--- a/src/app/main/navbar/navbar.component.ts
+++ b/src/app/main/navbar/vertical/navbar-vertical.component.ts
@@ -1,20 +1,20 @@
import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
-import { FuseMatchMedia } from '../../core/services/match-media.service';
-import { FuseNavbarService } from './navbar.service';
+import { FuseMatchMedia } from '../../../core/services/match-media.service';
+import { FuseNavbarVerticalService } from './navbar-vertical.service';
import { ObservableMedia } from '@angular/flex-layout';
-import { FuseMainComponent } from '../main.component';
+import { FuseMainComponent } from '../../main.component';
import { NavigationEnd, Router } from '@angular/router';
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
-import { FuseNavigationService } from '../../core/components/navigation/navigation.service';
+import { FuseNavigationService } from '../../../core/components/navigation/navigation.service';
@Component({
- selector : 'fuse-navbar',
- templateUrl : './navbar.component.html',
- styleUrls : ['./navbar.component.scss'],
+ selector : 'fuse-navbar-vertical',
+ templateUrl : './navbar-vertical.component.html',
+ styleUrls : ['./navbar-vertical.component.scss'],
encapsulation: ViewEncapsulation.None
})
-export class FuseNavbarComponent implements OnInit, OnDestroy
+export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
{
@HostBinding('class.close') isClosed: boolean;
@HostBinding('class.folded') isFoldedActive: boolean;
@@ -29,7 +29,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
private fuseMainComponentEl: FuseMainComponent,
private fuseMatchMedia: FuseMatchMedia,
private fuseNavigationService: FuseNavigationService,
- private navBarService: FuseNavbarService,
+ private navBarService: FuseNavbarVerticalService,
public media: ObservableMedia,
private router: Router
)
diff --git a/src/app/main/navbar/navbar.service.ts b/src/app/main/navbar/vertical/navbar-vertical.service.ts
similarity index 85%
rename from src/app/main/navbar/navbar.service.ts
rename to src/app/main/navbar/vertical/navbar-vertical.service.ts
index a6252b14..6cf17124 100644
--- a/src/app/main/navbar/navbar.service.ts
+++ b/src/app/main/navbar/vertical/navbar-vertical.service.ts
@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
@Injectable()
-export class FuseNavbarService
+export class FuseNavbarVerticalService
{
navBarRef;
diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html
index 81c84dc5..919eb5ec 100644
--- a/src/app/main/toolbar/toolbar.component.html
+++ b/src/app/main/toolbar/toolbar.component.html
@@ -4,24 +4,23 @@
diff --git a/src/app/main/toolbar/toolbar.component.scss b/src/app/main/toolbar/toolbar.component.scss
index 3d56a105..a72695b5 100644
--- a/src/app/main/toolbar/toolbar.component.scss
+++ b/src/app/main/toolbar/toolbar.component.scss
@@ -15,6 +15,30 @@
color: inherit;
}
+ .logo {
+ display: flex;
+ align-items: center;
+
+ .logo-icon {
+ display: block;
+ background: #039BE5;
+ width: 32px;
+ min-width: 32px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ font-size: 16px;
+ font-weight: 500;
+ color: #FFF;
+ border-radius: 2px;
+ }
+
+ .logo-text {
+ margin-left: 16px;
+ font-size: 16px;
+ }
+ }
+
.loading-spinner {
width: 32px;
height: 32px;
diff --git a/src/app/main/toolbar/toolbar.component.ts b/src/app/main/toolbar/toolbar.component.ts
index efbd82a7..82899d0f 100644
--- a/src/app/main/toolbar/toolbar.component.ts
+++ b/src/app/main/toolbar/toolbar.component.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { FuseConfigService } from '../../core/services/config.service';
@Component({
selector : 'fuse-toolbar',
@@ -13,8 +14,12 @@ export class FuseToolbarComponent
languages: any;
selectedLanguage: any;
showSpinner: boolean;
+ horizontalNav: boolean;
- constructor(private router: Router)
+ constructor(
+ private router: Router,
+ private fuseConfig: FuseConfigService
+ )
{
this.userStatusOptions = [
{
@@ -75,6 +80,11 @@ export class FuseToolbarComponent
this.showSpinner = false;
}
});
+
+ this.fuseConfig.onSettingsChanged.subscribe((settings) => {
+ this.horizontalNav = settings.layout.navigation === 'top';
+ });
+
}
search(value)
diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts
index 41f4eb11..25a1920e 100644
--- a/src/app/navigation.model.ts
+++ b/src/app/navigation.model.ts
@@ -1,10 +1,11 @@
export class FuseNavigation
{
- public items: any[];
+ public verticalNavItems: any[];
+ public horizontalNavItems: any[];
constructor()
{
- this.items = [
+ this.verticalNavItems = [
{
'title': 'APPS',
'type' : 'subheader'
@@ -393,7 +394,417 @@ export class FuseNavigation
'url' : '/components-third-party/datatables/ngx-datatable'
}
]
+ }
+ ];
+
+ this.horizontalNavItems = [
+ {
+ 'title' : 'Applications',
+ 'icon' : 'apps',
+ 'type' : 'nav-collapse',
+ 'children': [
+ {
+ 'title' : 'Dashboards',
+ 'type' : 'nav-collapse',
+ 'icon' : 'dashboard',
+ 'children': [
+ {
+ 'type' : 'nav-item',
+ 'title': 'Project',
+ 'url' : '/apps/dashboards/project'
+ }
+ ]
+ },
+ {
+ 'title': 'Calendar',
+ 'type' : 'nav-item',
+ 'icon' : 'today',
+ 'url' : '/apps/calendar'
+ },
+ {
+ 'title': 'Mail',
+ 'type' : 'nav-item',
+ 'icon' : 'email',
+ 'url' : '/apps/mail',
+ 'badge': {
+ 'title': 25,
+ 'bg' : '#F44336',
+ 'fg' : '#FFFFFF'
+ }
+ },
+ {
+ 'title': 'Chat',
+ 'type' : 'nav-item',
+ 'icon' : 'chat',
+ 'url' : '/apps/chat',
+ 'badge': {
+ 'title': 13,
+ 'bg' : '#09d261',
+ 'fg' : '#FFFFFF'
+ }
+ },
+ {
+ 'title': 'File Manager',
+ 'type' : 'nav-item',
+ 'icon' : 'folder',
+ 'url' : '/apps/file-manager'
+ },
+ {
+ 'title': 'Contacts',
+ 'type' : 'nav-item',
+ 'icon' : 'account_box',
+ 'url' : '/apps/contacts'
+ },
+ {
+ 'title': 'To-Do',
+ 'type' : 'nav-item',
+ 'icon' : 'check_box',
+ 'url' : '/apps/todo',
+ 'badge': {
+ 'title': 3,
+ 'bg' : '#FF6F00',
+ 'fg' : '#FFFFFF'
+ }
+ },
+ {
+ 'title': 'Scrumboard',
+ 'type' : 'nav-item',
+ 'icon' : 'assessment',
+ 'url' : '/apps/scrumboard'
+ }
+ ]
},
+ {
+ 'title' : 'Pages',
+ 'icon' : 'pages',
+ 'type' : 'nav-collapse',
+ 'children': [
+ {
+ 'title' : 'Authentication',
+ 'type' : 'nav-collapse',
+ 'icon' : 'lock',
+ 'children': [
+ {
+ 'title': 'Login',
+ 'type' : 'nav-item',
+ 'url' : '/pages/auth/login'
+ },
+ {
+ 'title': 'Login v2',
+ 'type' : 'nav-item',
+ 'url' : '/pages/auth/login-2'
+ },
+ {
+ 'title': 'Register',
+ 'type' : 'nav-item',
+ 'url' : '/pages/auth/register'
+ },
+ {
+ 'title': 'Register v2',
+ 'type' : 'nav-item',
+ 'url' : '/pages/auth/register-2'
+ },
+ {
+ 'title': 'Forgot Password',
+ 'type' : 'nav-item',
+ 'url' : '/pages/auth/forgot-password'
+ },
+ {
+ 'title': 'Reset Password',
+ 'type' : 'nav-item',
+ 'url' : '/pages/auth/reset-password'
+ },
+ {
+ 'title': 'Lock Screen',
+ 'type' : 'nav-item',
+ 'url' : '/pages/auth/lock'
+ }
+ ]
+ },
+ {
+ 'title': 'Coming Soon',
+ 'type' : 'nav-item',
+ 'icon' : 'alarm',
+ 'url' : '/pages/coming-soon'
+ },
+ {
+ 'title' : 'Errors',
+ 'type' : 'nav-collapse',
+ 'icon' : 'error',
+ 'children': [
+ {
+ 'title': '404',
+ 'type' : 'nav-item',
+ 'url' : '/pages/errors/error-404'
+ },
+ {
+ 'title': '500',
+ 'type' : 'nav-item',
+ 'url' : '/pages/errors/error-500'
+ }
+ ]
+ },
+ {
+ 'title' : 'Invoice',
+ 'type' : 'nav-collapse',
+ 'icon' : 'receipt',
+ 'children': [
+ {
+ 'title': 'Modern',
+ 'type' : 'nav-item',
+ 'url' : '/pages/invoices/modern'
+ },
+ {
+ 'title': 'Compact',
+ 'type' : 'nav-item',
+ 'url' : '/pages/invoices/compact'
+ }
+ ]
+ },
+ {
+ 'title': 'Maintenance',
+ 'type' : 'nav-item',
+ 'icon' : 'build',
+ 'url' : '/pages/maintenance'
+ },
+ {
+ 'title': 'Profile',
+ 'type' : 'nav-item',
+ 'icon' : 'person',
+ 'url' : '/pages/profile'
+ },
+ {
+ 'title': 'Search',
+ 'type' : 'nav-item',
+ 'icon' : 'search',
+ 'url' : '/pages/search'
+ }
+ ]
+ },
+ {
+ 'title' : 'User Interface',
+ 'icon' : 'web',
+ 'type' : 'nav-collapse',
+ 'children': [
+ {
+ 'title': 'Forms',
+ 'type' : 'nav-item',
+ 'icon' : 'web_asset',
+ 'url' : '/ui/forms'
+ },
+ {
+ 'title': 'Icons',
+ 'type' : 'nav-item',
+ 'icon' : 'photo',
+ 'url' : '/ui/icons'
+ },
+ {
+ 'title': 'Typography',
+ 'type' : 'nav-item',
+ 'icon' : 'text_fields',
+ 'url' : '/ui/typography'
+ },
+ {
+ 'title': 'Helper Classes',
+ 'type' : 'nav-item',
+ 'icon' : 'help',
+ 'url' : '/ui/helper-classes'
+ },
+ {
+ 'title' : 'Page Layouts',
+ 'type' : 'nav-collapse',
+ 'icon' : 'view_quilt',
+ 'children': [
+ {
+ 'title' : 'Carded',
+ 'type' : 'nav-collapse',
+ 'children': [
+ {
+ 'title': 'Full Width',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/carded/full-width'
+ },
+ {
+ 'title': 'Full Width 2',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/carded/full-width-2'
+ },
+ {
+ 'title': 'Left Sidenav',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/carded/left-sidenav'
+ },
+ {
+ 'title': 'Left Sidenav 2',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/carded/left-sidenav-2'
+ },
+ {
+ 'title': 'Right Sidenav',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/carded/right-sidenav'
+ },
+ {
+ 'title': 'Right Sidenav 2',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/carded/right-sidenav-2'
+ }
+ ]
+ },
+ {
+ 'title' : 'Simple',
+ 'type' : 'nav-collapse',
+ 'children': [
+ {
+ 'title': 'Full Width',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/simple/full-width'
+ },
+ {
+ 'title': 'Left Sidenav',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/simple/left-sidenav'
+ },
+ {
+ 'title': 'Left Sidenav 2',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/simple/left-sidenav-2'
+ },
+ {
+ 'title': 'Left Sidenav 3',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/simple/left-sidenav-3'
+ },
+ {
+ 'title': 'Right Sidenav',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/simple/right-sidenav'
+ },
+ {
+ 'title': 'Right Sidenav 2',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/simple/right-sidenav-2'
+ },
+ {
+ 'title': 'Right Sidenav 3',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/simple/right-sidenav-3'
+ },
+ {
+ 'title': 'Tabbed',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/simple/tabbed'
+ }
+ ]
+ },
+ {
+ 'title': 'Blank',
+ 'type' : 'nav-item',
+ 'url' : '/ui/page-layouts/blank'
+ }
+ ]
+ },
+ {
+ 'title': 'Colors',
+ 'type' : 'nav-item',
+ 'icon' : 'color_lens',
+ 'url' : '/ui/colors'
+ }
+ ]
+ },
+ {
+ 'title' : 'Services',
+ 'icon' : 'settings',
+ 'type' : 'nav-collapse',
+ 'children': [
+ {
+ 'title': 'Config',
+ 'type' : 'nav-item',
+ 'icon' : 'settings',
+ 'url' : '/services/config'
+ },
+ {
+ 'title': 'Splash Screen',
+ 'type' : 'nav-item',
+ 'icon' : 'settings',
+ 'url' : '/services/splash-screen'
+ }
+ ]
+ },
+ {
+ 'title' : 'Components',
+ 'icon' : 'settings_input_component',
+ 'type' : 'nav-collapse',
+ 'children': [
+ {
+ 'title': 'Countdown',
+ 'type' : 'nav-item',
+ 'icon' : 'settings_input_component',
+ 'url' : '/components/countdown'
+ },
+ {
+ 'title': 'Highlight.js',
+ 'type' : 'nav-item',
+ 'icon' : 'settings_input_component',
+ 'url' : '/components/highlightjs'
+ },
+ {
+ 'title': 'Material Color Picker',
+ 'type' : 'nav-item',
+ 'icon' : 'settings_input_component',
+ 'url' : '/components/material-color-picker'
+ },
+ {
+ 'title': 'Navigation',
+ 'type' : 'nav-item',
+ 'icon' : 'settings_input_component',
+ 'url' : '/components/navigation'
+ },
+ {
+ 'title': 'Price Tables',
+ 'type' : 'nav-item',
+ 'icon' : 'settings_input_component',
+ 'url' : '/components/price-tables'
+ },
+ {
+ 'title': 'Search Bar',
+ 'type' : 'nav-item',
+ 'icon' : 'settings_input_component',
+ 'url' : '/components/search-bar'
+ },
+ {
+ 'title': 'Shortcuts',
+ 'type' : 'nav-item',
+ 'icon' : 'settings_input_component',
+ 'url' : '/components/shortcuts'
+ },
+ {
+ 'title': 'Widget',
+ 'type' : 'nav-item',
+ 'icon' : 'settings_input_component',
+ 'url' : '/components/widget'
+ },
+ {
+ 'title' : '3rd Party components',
+ 'icon' : 'settings_input_component',
+ 'type' : 'nav-collapse',
+ 'children': [
+ {
+ 'title' : 'Datatables',
+ 'type' : 'nav-collapse',
+ 'icon' : 'border_all',
+ 'children': [
+ {
+ 'title': 'ngx-datatable',
+ 'type' : 'nav-item',
+ 'url' : '/components-third-party/datatables/ngx-datatable'
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
];
}
}
diff --git a/src/index.html b/src/index.html
index ee0a4856..1f20b133 100644
--- a/src/index.html
+++ b/src/index.html
@@ -183,7 +183,7 @@
-
+