purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Page Layouts) Removed mat-sidenav from page layouts, now all Fuse page layouts uses Fuse Sidebar

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-10 20:00:34 +03:00
parent c2970e34ba
commit 73a81699ec
88 changed files with 2134 additions and 1819 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.html → src/@fuse/components/demo/demo-sidebar/demo-sidebar.component.html
View File

@ -1,99 +1,99 @@
<div class="demo-sidenav">
<div class="demo-sidebar">
<mat-list>
<h3 matSubheader>Sidenav Demo</h3>
<h3 matSubheader>Sidebar Demo</h3>
<mat-list-item>
<span>Sidenav Item 1</span>
<span>Sidebar Item 1</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 2</span>
<span>Sidebar Item 2</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 3</span>
<span>Sidebar Item 3</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 4</span>
<span>Sidebar Item 4</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 5</span>
<span>Sidebar Item 5</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 6</span>
<span>Sidebar Item 6</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 7</span>
<span>Sidebar Item 7</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 8</span>
<span>Sidebar Item 8</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 9</span>
<span>Sidebar Item 9</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 10</span>
<span>Sidebar Item 10</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 11</span>
<span>Sidebar Item 11</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 12</span>
<span>Sidebar Item 12</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 13</span>
<span>Sidebar Item 13</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 14</span>
<span>Sidebar Item 14</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 15</span>
<span>Sidebar Item 15</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>
<span>Sidenav Item 16</span>
<span>Sidebar Item 16</span>
</mat-list-item>
</mat-list>

0
src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.scss → src/@fuse/components/demo/demo-sidebar/demo-sidebar.component.scss
View File

16
src/@fuse/components/demo/demo-sidebar/demo-sidebar.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-demo-sidebar',
templateUrl: './demo-sidebar.component.html',
styleUrls : ['./demo-sidebar.component.scss']
})
export class FuseDemoSidebarComponent
{
/**
* Constructor
*/
constructor()
{
}
}

16
src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts
View File

@ -1,16 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-demo-sidenav',
templateUrl: './demo-sidenav.component.html',
styleUrls : ['./demo-sidenav.component.scss']
})
export class FuseDemoSidenavComponent
{
/**
* Constructor
*/
constructor()
{
}
}

6
src/@fuse/components/demo/demo.module.ts
View File

@ -4,12 +4,12 @@ import { RouterModule } from '@angular/router';
import { MatDividerModule, MatListModule } from '@angular/material';
import { FuseDemoContentComponent } from './demo-content/demo-content.component';
import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';
import { FuseDemoSidebarComponent } from './demo-sidebar/demo-sidebar.component';
@NgModule({
declarations: [
FuseDemoContentComponent,
FuseDemoSidenavComponent
FuseDemoSidebarComponent
],
imports : [
RouterModule,
@ -19,7 +19,7 @@ import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'
],
exports : [
FuseDemoContentComponent,
FuseDemoSidenavComponent
FuseDemoSidebarComponent
]
})
export class FuseDemoModule

478
src/@fuse/scss/partials/_page-layouts.scss
View File

@ -153,112 +153,116 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
}
// Left sidenav - Right sidenav
&.left-sidenav,
&.right-sidenav {
// Left / Right sidebar
&.left-sidebar,
&.right-sidebar {
flex-direction: row;
> mat-sidenav-container {
// Sidebar
> .sidebar {
display: flex;
flex-direction: column;
flex: 1 1 auto;
background: none;
z-index: 2;
width: 100%;
width: 240px;
min-width: 240px;
max-width: 240px;
height: auto;
z-index: 4;
overflow-y: hidden;
@include mat-elevation(7);
.sidenav {
&.locked-open {
background: none;
box-shadow: none;
+ .center {
z-index: 5;
}
&.left-positioned {
+ .center {
margin-left: 0;
}
}
&.right-positioned {
+ .center {
margin-right: 0;
}
}
}
.header {
height: $carded-header-height;
min-height: $carded-header-height;
max-height: $carded-header-height;
@include media-breakpoint-down('sm') {
height: $carded-header-height-sm;
min-height: $carded-header-height-sm;
max-height: $carded-header-height-sm;
}
}
.content {
background: transparent;
overflow: auto;
}
}
// Center
> .center {
display: flex;
flex-direction: column;
flex: 1 1 auto;
position: relative;
z-index: 3;
margin-left: 32px;
margin-right: 32px;
.header {
display: flex;
height: $carded-header-height-without-toolbar;
min-height: $carded-header-height-without-toolbar;
max-height: $carded-header-height-without-toolbar;
@include media-breakpoint-down('sm') {
height: $carded-header-height-without-toolbar-sm;
min-height: $carded-header-height-without-toolbar-sm;
max-height: $carded-header-height-without-toolbar-sm;
}
}
.content-card {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 240px;
min-width: 240px;
max-width: 240px;
height: auto;
z-index: 4;
overflow-y: hidden;
overflow: hidden;
@include mat-elevation(7);
&.mat-is-locked-open {
background: none;
box-shadow: none;
}
.toolbar {
display: flex;
justify-content: flex-start;
align-items: center;
flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
height: $carded-toolbar-height;
min-height: $carded-toolbar-height;
max-height: $carded-toolbar-height;
.header {
height: $carded-header-height;
min-height: $carded-header-height;
max-height: $carded-header-height;
@include media-breakpoint-down('sm') {
height: $carded-header-height-sm;
min-height: $carded-header-height-sm;
max-height: $carded-header-height-sm;
.sidebar-toggle {
margin: 0 8px 0 0 !important;
padding: 0 !important;
border-radius: 0;
}
}
.content {
background: transparent;
overflow: auto;
}
}
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1 1 auto;
height: auto;
overflow: visible;
// Center
.center {
display: flex;
flex-direction: column;
flex: 1 1 auto;
position: relative;
z-index: 3;
margin-left: 32px;
margin-right: 32px;
.header {
display: flex;
height: $carded-header-height-without-toolbar;
min-height: $carded-header-height-without-toolbar;
max-height: $carded-header-height-without-toolbar;
@include media-breakpoint-down('sm') {
height: $carded-header-height-without-toolbar-sm;
min-height: $carded-header-height-without-toolbar-sm;
max-height: $carded-header-height-without-toolbar-sm;
}
}
.content-card {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: hidden;
@include mat-elevation(7);
.toolbar {
display: flex;
justify-content: flex-start;
align-items: center;
flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
height: $carded-toolbar-height;
min-height: $carded-toolbar-height;
max-height: $carded-toolbar-height;
.sidenav-toggle {
margin: 0 8px 0 0 !important;
padding: 0 !important;
border-radius: 0;
}
}
.content {
display: flex;
flex: 1 1 auto;
overflow: auto;
}
}
overflow: auto;
}
}
}
@ -267,21 +271,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
&.inner-scroll {
flex: 1 1 auto;
> mat-sidenav-container {
> .center {
flex: 1 1 auto;
> .mat-sidenav-content,
> .mat-drawer-content {
.content-card {
flex: 1 1 auto;
> .center {
> .content {
flex: 1 1 auto;
.content-card {
flex: 1 1 auto;
> .content {
flex: 1 1 auto;
}
}
}
}
}
@ -290,52 +287,43 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Tabbed
&.tabbed {
> mat-sidenav-container {
> .center {
width: calc(100% - 32px);
min-width: 0;
> .mat-sidenav-content,
> .mat-drawer-content {
width: calc(100% - 240px);
min-width: 0;
@include media-breakpoint-down('md') {
width: calc(100% - 64px);
}
.center {
width: calc(100% - 32px);
min-width: 0;
.header {
flex: 1 1 auto;
}
@include media-breakpoint-down('md') {
width: calc(100% - 64px);
}
.content-card {
.header {
flex: 1 1 auto;
}
.content {
.content-card {
.mat-tab-group {
overflow: hidden;
.content {
.mat-tab-header {
.mat-tab-group {
.mat-tab-label {
height: 64px;
}
}
.mat-tab-body {
overflow: hidden;
.mat-tab-body-content {
overflow: hidden;
.mat-tab-header {
.mat-tab-label {
height: 64px;
}
}
.mat-tab-body {
overflow: hidden;
.mat-tab-body-content {
overflow: hidden;
.tab-content {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
}
.tab-content {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
}
}
@ -346,48 +334,15 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
}
// Left sidenav
&.left-sidenav {
// Right sidebar specific
&.right-sidebar {
// Sidenav
> mat-sidenav-container {
.sidenav {
&.mat-is-locked-open {
~ .mat-sidenav-content,
~ .mat-drawer-content {
.center {
margin-left: 0;
}
}
}
}
> .sidebar {
order: 2;
}
}
// Right sidenav
&.right-sidenav {
// Sidenav
> mat-sidenav-container {
.sidenav {
order: 999;
&.mat-is-locked-open {
~ .mat-sidenav-content,
~ .mat-drawer-content {
.center {
margin-right: 0;
}
}
}
}
> .center {
order: 1;
}
}
}
@ -403,11 +358,16 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Fullwidth
&.fullwidth {
overflow: auto;
> .content {
display: flex;
flex: 1 1 auto;
}
}
&.fullwidth,
&.inner-sidenav {
min-height: 100%;
&.inner-sidebar {
//min-height: 100%;
> .header {
height: $header-height;
@ -416,107 +376,113 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
}
// Left sidenav - Right sidenav
&.left-sidenav,
&.right-sidenav {
// Left / Right sidebar
&.left-sidebar,
&.right-sidebar {
flex-direction: row;
// Single scroll
/*&.single-scroll {
// Sidebar
> .sidebar {
width: 240px;
min-width: 240px;
max-width: 240px;
z-index: 4;
@include mat-elevation(7);
> mat-sidenav-container {
flex: 1 0 auto;
&.locked-open {
background: none;
box-shadow: none;
> .mat-sidenav-content,
> .mat-drawer-content {
flex: 1 0 auto;
max-height: none;
+ .center {
z-index: 5;
}
}
}*/
// Inner Sidenav
&.inner-sidenav {
&.left-positioned {
> mat-sidenav-container {
flex: 1 1 auto;
.sidenav {
.sidenav-content {
height: 100%;
+ .center {
margin-left: 0;
}
}
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
height: auto;
&.right-positioned {
.center {
flex: 1 1 auto;
min-height: 100%;
@include mat-elevation(0);
.content {
display: flex;
flex: 1 0 auto;
}
+ .center {
margin-right: 0;
}
}
}
}
> mat-sidenav-container {
// Center
> .center {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 auto;
background: none;
z-index: 2;
width: 100%;
overflow: auto;
z-index: 3;
@include mat-elevation(7);
.sidenav {
width: 240px;
min-width: 240px;
max-width: 240px;
z-index: 51;
@include mat-elevation(7);
&.mat-is-locked-open {
width: 220px;
min-width: 220px;
max-width: 220px;
box-shadow: none;
background: transparent;
}
.sidenav-content {
height: 100%;
}
.header {
height: $header-height;
min-height: $header-height;
max-height: $header-height;
}
> .mat-sidenav-content,
> .mat-drawer-content {
.content {
display: flex;
flex: 1 1 auto;
height: auto;
overflow: visible;
max-height: 100%;
flex: 1 0 auto;
}
}
.header {
height: $header-height;
min-height: $header-height;
max-height: $header-height;
// Inner Sidebar
&.inner-sidebar {
flex-direction: column;
overflow: hidden;
height: 100%;
> .content {
display: flex;
> .sidebar {
background: none;
box-shadow: none;
}
}
}
// Inner scroll
&.inner-scroll {
flex: 1 1 auto;
> .center {
flex: 1 1 auto;
}
}
}
// Right sidebar specific
&.right-sidebar {
> .sidebar {
order: 2;
}
> .center {
order: 1;
}
// Inner sidebar
&.inner-sidebar {
> .content {
> .sidebar {
order: 2;
}
.center {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: auto;
@include mat-elevation(7);
.content {
}
> .center {
order: 1;
}
}
}

2
src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html
View File

@ -9,7 +9,7 @@
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with content scroll</h2>
<h2 class="m-0">Full width with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->

2
src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html
View File

@ -9,7 +9,7 @@
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with inner scroll</h2>
<h2 class="m-0">Full width with inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->

2
src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html
View File

@ -9,7 +9,7 @@
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with tabs and content scroll</h2>
<h2 class="m-0">Full width with tabs and content scroll</h2>
</div>
<!-- / CONTENT HEADER -->

2
src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html
View File

@ -9,7 +9,7 @@
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with tabs and inner scroll</h2>
<h2 class="m-0">Full width with tabs and inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->

62
src/app/main/ui/page-layouts/carded/left-sidebar-1/left-sidebar-1.component.html Normal file
View File

@ -0,0 +1,62 @@
<div class="page-layout carded left-sidebar">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="carded-left-sidebar-1" position="left" lockedOpen="gt-md">
<!-- SIDEBAR HEADER -->
<div class="header p-24 mat-accent-bg">
<h2 class="m-0">Sidebar header</h2>
</div>
<!-- / SIDEBAR HEADER -->
<!-- SIDEBAR CONTENT -->
<div class="content p-24">
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<h2 class="m-0">Left sidebar with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('carded-left-sidebar-1')">
<mat-icon>menu</mat-icon>
</button>
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.scss → src/app/main/ui/page-layouts/carded/left-sidebar-1/left-sidebar-1.component.scss
View File

36
src/app/main/ui/page-layouts/carded/left-sidebar-1/left-sidebar-1.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'carded-left-sidebar-1',
templateUrl: './left-sidebar-1.component.html',
styleUrls : ['./left-sidebar-1.component.scss']
})
export class CardedLeftSidebar1Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

62
src/app/main/ui/page-layouts/carded/left-sidebar-2/left-sidebar-2.component.html Normal file
View File

@ -0,0 +1,62 @@
<div class="page-layout carded left-sidebar inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="carded-left-sidebar-2" position="left" lockedOpen="gt-md">
<!-- SIDEBAR HEADER -->
<div class="header p-24 mat-accent-bg">
<h2 class="m-0">Sidebar header</h2>
</div>
<!-- / SIDEBAR HEADER -->
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<h2 class="m-0">Left sidebar with inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('carded-left-sidebar-2')">
<mat-icon>menu</mat-icon>
</button>
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.scss → src/app/main/ui/page-layouts/carded/left-sidebar-2/left-sidebar-2.component.scss
View File

36
src/app/main/ui/page-layouts/carded/left-sidebar-2/left-sidebar-2.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'carded-left-sidebar-2',
templateUrl: './left-sidebar-2.component.html',
styleUrls : ['./left-sidebar-2.component.scss']
})
export class CardedLeftSidebar2Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

144
src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-1/left-sidebar-tabbed-1.component.html Normal file
View File

@ -0,0 +1,144 @@
<div class="page-layout carded left-sidebar tabbed">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="carded-left-sidebar-tabbed-1" position="left" lockedOpen="gt-md">
<!-- SIDEBAR HEADER -->
<div class="header p-24 mat-accent-bg">
<h2 class="m-0">Sidebar header</h2>
</div>
<!-- / SIDEBAR HEADER -->
<!-- SIDEBAR CONTENT -->
<div class="content p-24">
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start start">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('carded-left-sidebar-tabbed-1')">
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Left sidenav with tabs and content scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.scss → src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-1/left-sidebar-tabbed-1.component.scss
View File

36
src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-1/left-sidebar-tabbed-1.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'carded-left-sidebar-tabbed-1',
templateUrl: './left-sidebar-tabbed-1.component.html',
styleUrls : ['./left-sidebar-tabbed-1.component.scss']
})
export class CardedLeftSidebarTabbed1Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

144
src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-2/left-sidebar-tabbed-2.component.html Normal file
View File

@ -0,0 +1,144 @@
<div class="page-layout carded left-sidebar tabbed inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="carded-left-sidebar-tabbed-2" position="left" lockedOpen="gt-md">
<!-- SIDEBAR HEADER -->
<div class="header p-24 mat-accent-bg">
<h2 class="m-0">Sidebar header</h2>
</div>
<!-- / SIDEBAR HEADER -->
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start start">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('carded-left-sidebar-tabbed-2')">
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Left sidenav with tabs and inner scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.scss → src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-2/left-sidebar-tabbed-2.component.scss
View File

36
src/app/main/ui/page-layouts/carded/left-sidebar-tabbed-2/left-sidebar-tabbed-2.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'carded-left-sidebar-tabbed-2',
templateUrl: './left-sidebar-tabbed-2.component.html',
styleUrls : ['./left-sidebar-tabbed-2.component.scss']
})
export class CardedLeftSidebarTabbed2Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

70
src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html
View File

@ -1,70 +0,0 @@
<div class="page-layout carded left-sidenav">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Left sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav-1',
templateUrl: './left-sidenav-1.component.html',
styleUrls : ['./left-sidenav-1.component.scss']
})
export class CardedLeftSidenav1Component
{
/**
* Constructor
*/
constructor()
{
}
}

70
src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
View File

@ -1,70 +0,0 @@
<div class="page-layout carded left-sidenav inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Left sidenav with inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav-2',
templateUrl: './left-sidenav-2.component.html',
styleUrls : ['./left-sidenav-2.component.scss']
})
export class CardedLeftSidenav2Component
{
/**
* Constructor
*/
constructor()
{
}
}

151
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html
View File

@ -1,151 +0,0 @@
<div class="page-layout carded left-sidenav tabbed">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<h2>Left sidenav with tabs and content scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav-tabbed-1',
templateUrl: './left-sidenav-tabbed-1.component.html',
styleUrls : ['./left-sidenav-tabbed-1.component.scss']
})
export class CardedLeftSidenavTabbed1Component
{
/**
* Constructor
*/
constructor()
{
}
}

151
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html
View File

@ -1,151 +0,0 @@
<div class="page-layout carded left-sidenav tabbed inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<h2>Left sidenav with tabs and inner scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-left-sidenav-tabbed-2',
templateUrl: './left-sidenav-tabbed-2.component.html',
styleUrls : ['./left-sidenav-tabbed-2.component.scss']
})
export class CardedLeftSidenavTabbed2Component
{
/**
* Constructor
*/
constructor()
{
}
}

62
src/app/main/ui/page-layouts/carded/right-sidebar-1/right-sidebar-1.component.html Normal file
View File

@ -0,0 +1,62 @@
<div class="page-layout carded right-sidebar">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="carded-right-sidebar-1" position="right" lockedOpen="gt-md">
<!-- SIDEBAR HEADER -->
<div class="header p-24 mat-accent-bg">
<h2 class="m-0">Sidebar header</h2>
</div>
<!-- / SIDEBAR HEADER -->
<!-- SIDEBAR CONTENT -->
<div class="content p-24">
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<h2 class="m-0">Right sidebar with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('carded-right-sidebar-1')">
<mat-icon>menu</mat-icon>
</button>
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.scss → src/app/main/ui/page-layouts/carded/right-sidebar-1/right-sidebar-1.component.scss
View File

36
src/app/main/ui/page-layouts/carded/right-sidebar-1/right-sidebar-1.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'carded-right-sidebar-1',
templateUrl: './right-sidebar-1.component.html',
styleUrls : ['./right-sidebar-1.component.scss']
})
export class CardedRightSidebar1Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

62
src/app/main/ui/page-layouts/carded/right-sidebar-2/right-sidebar-2.component.html Normal file
View File

@ -0,0 +1,62 @@
<div class="page-layout carded right-sidebar inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="carded-right-sidebar-2" position="right" lockedOpen="gt-md">
<!-- SIDEBAR HEADER -->
<div class="header p-24 mat-accent-bg">
<h2 class="m-0">Sidebar header</h2>
</div>
<!-- / SIDEBAR HEADER -->
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<h2 class="m-0">Right sidebar with inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('carded-right-sidebar-2')">
<mat-icon>menu</mat-icon>
</button>
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.scss → src/app/main/ui/page-layouts/carded/right-sidebar-2/right-sidebar-2.component.scss
View File

36
src/app/main/ui/page-layouts/carded/right-sidebar-2/right-sidebar-2.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'carded-right-sidebar-2',
templateUrl: './right-sidebar-2.component.html',
styleUrls : ['./right-sidebar-2.component.scss']
})
export class CardedRightSidebar2Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

144
src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-1/right-sidebar-tabbed-1.component.html Normal file
View File

@ -0,0 +1,144 @@
<div class="page-layout carded right-sidebar tabbed">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="carded-right-sidebar-tabbed-1" position="right" lockedOpen="gt-md">
<!-- SIDEBAR HEADER -->
<div class="header p-24 mat-accent-bg">
<h2 class="m-0">Sidebar header</h2>
</div>
<!-- / SIDEBAR HEADER -->
<!-- SIDEBAR CONTENT -->
<div class="content p-24">
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start start">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('carded-right-sidebar-tabbed-1')">
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Right sidenav with tabs and content scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.scss → src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-1/right-sidebar-tabbed-1.component.scss
View File

36
src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-1/right-sidebar-tabbed-1.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'carded-right-sidebar-tabbed-1',
templateUrl: './right-sidebar-tabbed-1.component.html',
styleUrls : ['./right-sidebar-tabbed-1.component.scss']
})
export class CardedRightSidebarTabbed1Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

144
src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-2/right-sidebar-tabbed-2.component.html Normal file
View File

@ -0,0 +1,144 @@
<div class="page-layout carded right-sidebar tabbed inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="carded-right-sidebar-tabbed-2" position="right" lockedOpen="gt-md">
<!-- SIDEBAR HEADER -->
<div class="header p-24 mat-accent-bg">
<h2 class="m-0">Sidebar header</h2>
</div>
<!-- / SIDEBAR HEADER -->
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start start">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('carded-right-sidebar-tabbed-2')">
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Right sidenav with tabs and inner scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.scss → src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-2/right-sidebar-tabbed-2.component.scss
View File

36
src/app/main/ui/page-layouts/carded/right-sidebar-tabbed-2/right-sidebar-tabbed-2.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'carded-right-sidebar-tabbed-2',
templateUrl: './right-sidebar-tabbed-2.component.html',
styleUrls : ['./right-sidebar-tabbed-2.component.scss']
})
export class CardedRightSidebarTabbed2Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

70
src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html
View File

@ -1,70 +0,0 @@
<div class="page-layout carded right-sidenav">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Right sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-right-sidenav"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="end" opened="true" mode="side"
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav-1',
templateUrl: './right-sidenav-1.component.html',
styleUrls : ['./right-sidenav-1.component.scss']
})
export class CardedRightSidenav1Component
{
/**
* Constructor
*/
constructor()
{
}
}

70
src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
View File

@ -1,70 +0,0 @@
<div class="page-layout carded right-sidenav inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Right sidenav with inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-right-sidenav"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<span>Content toolbar</span>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="end" opened="true" mode="side"
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav-2',
templateUrl: './right-sidenav-2.component.html',
styleUrls : ['./right-sidenav-2.component.scss']
})
export class CardedRightSidenav2Component
{
/**
* Constructor
*/
constructor()
{
}
}

151
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html
View File

@ -1,151 +0,0 @@
<div class="page-layout carded right-sidenav tabbed">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<h2>Right sidenav with tabs and content scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24">
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="end" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav-tabbed-1',
templateUrl: './right-sidenav-tabbed-1.component.html',
styleUrls : ['./right-sidenav-tabbed-1.component.scss']
})
export class CardedRightSidenavTabbed1Component
{
/**
* Constructor
*/
constructor()
{
}
}

151
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html
View File

@ -1,151 +0,0 @@
<div class="page-layout carded right-sidenav tabbed inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<h2>Right sidenav with tabs and inner scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="end" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'carded-right-sidenav-tabbed-2',
templateUrl: './right-sidenav-tabbed-2.component.html',
styleUrls : ['./right-sidenav-tabbed-2.component.scss']
})
export class CardedRightSidenavTabbed2Component
{
/**
* Constructor
*/
constructor()
{
}
}

127
src/app/main/ui/page-layouts/page-layouts.module.ts
View File

@ -9,24 +9,28 @@ import { CardedFullWidth1Component } from 'app/main/ui/page-layouts/carded/full-
import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/full-width-2/full-width-2.component';
import { CardedFullWidthTabbed1Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component';
import { CardedFullWidthTabbed2Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component';
import { CardedLeftSidenav1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component';
import { CardedLeftSidenav2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component';
import { CardedLeftSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component';
import { CardedLeftSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component';
import { CardedRightSidenav1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component';
import { CardedRightSidenav2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component';
import { CardedRightSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component';
import { CardedRightSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component';
import { CardedLeftSidebar1Component } from 'app/main/ui/page-layouts/carded/left-sidebar-1/left-sidebar-1.component';
import { CardedLeftSidebar2Component } from 'app/main/ui/page-layouts/carded/left-sidebar-2/left-sidebar-2.component';
import { CardedLeftSidebarTabbed1Component } from 'app/main/ui/page-layouts/carded/left-sidebar-tabbed-1/left-sidebar-tabbed-1.component';
import { CardedLeftSidebarTabbed2Component } from 'app/main/ui/page-layouts/carded/left-sidebar-tabbed-2/left-sidebar-tabbed-2.component';
import { CardedRightSidebar1Component } from 'app/main/ui/page-layouts/carded/right-sidebar-1/right-sidebar-1.component';
import { CardedRightSidebar2Component } from 'app/main/ui/page-layouts/carded/right-sidebar-2/right-sidebar-2.component';
import { CardedRightSidebarTabbed1Component } from 'app/main/ui/page-layouts/carded/right-sidebar-tabbed-1/right-sidebar-tabbed-1.component';
import { CardedRightSidebarTabbed2Component } from 'app/main/ui/page-layouts/carded/right-sidebar-tabbed-2/right-sidebar-tabbed-2.component';
import { SimpleFullWidth1Component } from 'app/main/ui/page-layouts/simple/full-width-1/full-width-1.component';
import { SimpleLeftSidenav1Component } from 'app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component';
import { SimpleLeftSidenav2Component } from 'app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component';
import { SimpleLeftSidenav3Component } from 'app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component';
import { SimpleRightSidenav1Component } from 'app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component';
import { SimpleRightSidenav2Component } from 'app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component';
import { SimpleRightSidenav3Component } from 'app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component';
import { SimpleLeftSidebar1Component } from 'app/main/ui/page-layouts/simple/left-sidebar-1/left-sidebar-1.component';
import { SimpleLeftSidebar2Component } from 'app/main/ui/page-layouts/simple/left-sidebar-2/left-sidebar-2.component';
import { SimpleLeftSidebar3Component } from 'app/main/ui/page-layouts/simple/left-sidebar-3/left-sidebar-3.component';
import { SimpleLeftSidebar4Component } from 'app/main/ui/page-layouts/simple/left-sidebar-4/left-sidebar-4.component';
import { SimpleRightSidebar1Component } from 'app/main/ui/page-layouts/simple/right-sidebar-1/right-sidebar-1.component';
import { SimpleRightSidebar2Component } from 'app/main/ui/page-layouts/simple/right-sidebar-2/right-sidebar-2.component';
import { SimpleRightSidebar3Component } from 'app/main/ui/page-layouts/simple/right-sidebar-3/right-sidebar-3.component';
import { SimpleRightSidebar4Component } from 'app/main/ui/page-layouts/simple/right-sidebar-4/right-sidebar-4.component';
import { Tabbed1Component } from 'app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component';
import { BlankComponent } from 'app/main/ui/page-layouts/blank/blank.component';
import { FuseSidebarModule } from '@fuse/components';
const routes: Routes = [
{
path : 'page-layouts/carded/full-width-1',
@ -45,64 +49,72 @@ const routes: Routes = [
component: CardedFullWidthTabbed2Component
},
{
path : 'page-layouts/carded/left-sidenav-1',
component: CardedLeftSidenav1Component
path : 'page-layouts/carded/left-sidebar-1',
component: CardedLeftSidebar1Component
},
{
path : 'page-layouts/carded/left-sidenav-tabbed-1',
component: CardedLeftSidenavTabbed1Component
path : 'page-layouts/carded/left-sidebar-tabbed-1',
component: CardedLeftSidebarTabbed1Component
},
{
path : 'page-layouts/carded/left-sidenav-2',
component: CardedLeftSidenav2Component
path : 'page-layouts/carded/left-sidebar-2',
component: CardedLeftSidebar2Component
},
{
path : 'page-layouts/carded/left-sidenav-tabbed-2',
component: CardedLeftSidenavTabbed2Component
path : 'page-layouts/carded/left-sidebar-tabbed-2',
component: CardedLeftSidebarTabbed2Component
},
{
path : 'page-layouts/carded/right-sidenav-1',
component: CardedRightSidenav1Component
path : 'page-layouts/carded/right-sidebar-1',
component: CardedRightSidebar1Component
},
{
path : 'page-layouts/carded/right-sidenav-tabbed-1',
component: CardedRightSidenavTabbed1Component
path : 'page-layouts/carded/right-sidebar-tabbed-1',
component: CardedRightSidebarTabbed1Component
},
{
path : 'page-layouts/carded/right-sidenav-2',
component: CardedRightSidenav2Component
path : 'page-layouts/carded/right-sidebar-2',
component: CardedRightSidebar2Component
},
{
path : 'page-layouts/carded/right-sidenav-tabbed-2',
component: CardedRightSidenavTabbed2Component
path : 'page-layouts/carded/right-sidebar-tabbed-2',
component: CardedRightSidebarTabbed2Component
},
{
path : 'page-layouts/simple/full-width-1',
component: SimpleFullWidth1Component
},
{
path : 'page-layouts/simple/left-sidenav-1',
component: SimpleLeftSidenav1Component
path : 'page-layouts/simple/left-sidebar-1',
component: SimpleLeftSidebar1Component
},
{
path : 'page-layouts/simple/left-sidenav-2',
component: SimpleLeftSidenav2Component
path : 'page-layouts/simple/left-sidebar-2',
component: SimpleLeftSidebar2Component
},
{
path : 'page-layouts/simple/left-sidenav-3',
component: SimpleLeftSidenav3Component
path : 'page-layouts/simple/left-sidebar-3',
component: SimpleLeftSidebar3Component
},
{
path : 'page-layouts/simple/right-sidenav-1',
component: SimpleRightSidenav1Component
path : 'page-layouts/simple/left-sidebar-4',
component: SimpleLeftSidebar4Component
},
{
path : 'page-layouts/simple/right-sidenav-2',
component: SimpleRightSidenav2Component
path : 'page-layouts/simple/right-sidebar-1',
component: SimpleRightSidebar1Component
},
{
path : 'page-layouts/simple/right-sidenav-3',
component: SimpleRightSidenav3Component
path : 'page-layouts/simple/right-sidebar-2',
component: SimpleRightSidebar2Component
},
{
path : 'page-layouts/simple/right-sidebar-3',
component: SimpleRightSidebar3Component
},
{
path : 'page-layouts/simple/right-sidebar-4',
component: SimpleRightSidebar4Component
},
{
path : 'page-layouts/simple/tabbed-1',
@ -120,21 +132,23 @@ const routes: Routes = [
CardedFullWidth2Component,
CardedFullWidthTabbed1Component,
CardedFullWidthTabbed2Component,
CardedLeftSidenav1Component,
CardedLeftSidenav2Component,
CardedLeftSidenavTabbed1Component,
CardedLeftSidenavTabbed2Component,
CardedRightSidenav1Component,
CardedRightSidenav2Component,
CardedRightSidenavTabbed1Component,
CardedRightSidenavTabbed2Component,
CardedLeftSidebar1Component,
CardedLeftSidebar2Component,
CardedLeftSidebarTabbed1Component,
CardedLeftSidebarTabbed2Component,
CardedRightSidebar1Component,
CardedRightSidebar2Component,
CardedRightSidebarTabbed1Component,
CardedRightSidebarTabbed2Component,
SimpleFullWidth1Component,
SimpleLeftSidenav1Component,
SimpleLeftSidenav2Component,
SimpleLeftSidenav3Component,
SimpleRightSidenav1Component,
SimpleRightSidenav2Component,
SimpleRightSidenav3Component,
SimpleLeftSidebar1Component,
SimpleLeftSidebar2Component,
SimpleLeftSidebar3Component,
SimpleLeftSidebar4Component,
SimpleRightSidebar1Component,
SimpleRightSidebar2Component,
SimpleRightSidebar3Component,
SimpleRightSidebar4Component,
Tabbed1Component,
BlankComponent
],
@ -146,6 +160,7 @@ const routes: Routes = [
MatSidenavModule,
MatTabsModule,
FuseSidebarModule,
FuseSharedModule,
FuseDemoModule
]

40
src/app/main/ui/page-layouts/simple/left-sidebar-1/left-sidebar-1.component.html Normal file
View File

@ -0,0 +1,40 @@
<div class="page-layout simple left-sidebar">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-left-sidebar-1" position="left" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24">
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-left-sidebar-1')">
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Left sidebar with content scroll</h2>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content mat-white-bg p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.scss → src/app/main/ui/page-layouts/simple/left-sidebar-1/left-sidebar-1.component.scss
View File

36
src/app/main/ui/page-layouts/simple/left-sidebar-1/left-sidebar-1.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'simple-left-sidebar-1',
templateUrl: './left-sidebar-1.component.html',
styleUrls : ['./left-sidebar-1.component.scss']
})
export class SimpleLeftSidebar1Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

40
src/app/main/ui/page-layouts/simple/left-sidebar-2/left-sidebar-2.component.html Normal file
View File

@ -0,0 +1,40 @@
<div class="page-layout simple left-sidebar inner-scroll">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-left-sidebar-2" position="left" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-left-sidebar-2')">
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Left sidebar with inner scroll</h2>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content mat-white-bg p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.scss → src/app/main/ui/page-layouts/simple/left-sidebar-2/left-sidebar-2.component.scss
View File

36
src/app/main/ui/page-layouts/simple/left-sidebar-2/left-sidebar-2.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'simple-left-sidebar-2',
templateUrl: './left-sidebar-2.component.html',
styleUrls : ['./left-sidebar-2.component.scss']
})
export class SimpleLeftSidebar2Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

46
src/app/main/ui/page-layouts/simple/left-sidebar-3/left-sidebar-3.component.html Normal file
View File

@ -0,0 +1,46 @@
<div class="page-layout simple left-sidebar inner-sidebar">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-left-sidebar-4')">
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Left inner sidebar with content scroll</h2>
</div>
</div>
<!-- / HEADER -->
<div class="content">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-left-sidebar-3" position="left" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center p-24" fusePerfectScrollbar>
<!-- CONTENT -->
<div class="content mat-elevation-z4 mat-white-bg p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</div>
</div>

0
src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.scss → src/app/main/ui/page-layouts/simple/left-sidebar-3/left-sidebar-3.component.scss
View File

36
src/app/main/ui/page-layouts/simple/left-sidebar-3/left-sidebar-3.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'simple-left-sidebar-4',
templateUrl: './left-sidebar-3.component.html',
styleUrls : ['./left-sidebar-3.component.scss']
})
export class SimpleLeftSidebar3Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

46
src/app/main/ui/page-layouts/simple/left-sidebar-4/left-sidebar-4.component.html Normal file
View File

@ -0,0 +1,46 @@
<div class="page-layout simple left-sidebar inner-sidebar inner-scroll">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-left-sidebar-4')">
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Left inner sidebar with inner scroll</h2>
</div>
</div>
<!-- / HEADER -->
<div class="content">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-left-sidebar-3" position="left" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center p-24" fusePerfectScrollbar>
<!-- CONTENT -->
<div class="content mat-elevation-z4 mat-white-bg p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</div>
</div>

0
src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.scss → src/app/main/ui/page-layouts/simple/left-sidebar-4/left-sidebar-4.component.scss
View File

36
src/app/main/ui/page-layouts/simple/left-sidebar-4/left-sidebar-4.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'simple-left-sidebar-4',
templateUrl: './left-sidebar-4.component.html',
styleUrls : ['./left-sidebar-4.component.scss']
})
export class SimpleLeftSidebar4Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

50
src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.html
View File

@ -1,50 +0,0 @@
<div class="page-layout simple left-sidenav">
<mat-sidenav-container>
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="simple-left-sidenav" mat-is-locked-open="gt-md">
<div class="sidenav-content p-24">
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-left-sidenav"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Left sidenav with content scroll</h2>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24 mat-white-bg">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-left-sidenav-1',
templateUrl: './left-sidenav-1.component.html',
styleUrls : ['./left-sidenav-1.component.scss']
})
export class SimpleLeftSidenav1Component
{
/**
* Constructor
*/
constructor()
{
}
}

50
src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
View File

@ -1,50 +0,0 @@
<div class="page-layout simple left-sidenav inner-scroll">
<mat-sidenav-container>
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="simple-left-sidenav-2" mat-is-locked-open="gt-md">
<div class="sidenav-content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-left-sidenav-2"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Left sidenav with inner scroll</h2>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24 mat-white-bg">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-left-sidenav-2',
templateUrl: './left-sidenav-2.component.html',
styleUrls : ['./left-sidenav-2.component.scss']
})
export class SimpleLeftSidenav2Component
{
/**
* Constructor
*/
constructor()
{
}
}

50
src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
View File

@ -1,50 +0,0 @@
<div class="page-layout simple left-sidenav inner-sidenav inner-scroll">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-left-sidenav-3"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Left inner sidenav with inner scroll</h2>
</div>
</div>
<!-- / HEADER -->
<mat-sidenav-container>
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="simple-left-sidenav-3" mat-is-locked-open="gt-md">
<div class="sidenav-content" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center p-24" fusePerfectScrollbar>
<!-- CONTENT -->
<div class="content p-24 mat-elevation-z4 mat-white-bg">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-left-sidenav-3',
templateUrl: './left-sidenav-3.component.html',
styleUrls : ['./left-sidenav-3.component.scss']
})
export class SimpleLeftSidenav3Component
{
/**
* Constructor
*/
constructor()
{
}
}

40
src/app/main/ui/page-layouts/simple/right-sidebar-1/right-sidebar-1.component.html Normal file
View File

@ -0,0 +1,40 @@
<div class="page-layout simple right-sidebar">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-right-sidebar-1" position="right" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24">
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-right-sidebar-1')">
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Right sidebar with content scroll</h2>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content mat-white-bg p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.scss → src/app/main/ui/page-layouts/simple/right-sidebar-1/right-sidebar-1.component.scss
View File

36
src/app/main/ui/page-layouts/simple/right-sidebar-1/right-sidebar-1.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'simple-right-sidebar-1',
templateUrl: './right-sidebar-1.component.html',
styleUrls : ['./right-sidebar-1.component.scss']
})
export class SimpleRightSidebar1Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

40
src/app/main/ui/page-layouts/simple/right-sidebar-2/right-sidebar-2.component.html Normal file
View File

@ -0,0 +1,40 @@
<div class="page-layout simple right-sidebar inner-scroll">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-right-sidebar-2" position="left" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-right-sidebar-2')">
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Right sidebar with inner scroll</h2>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content mat-white-bg p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</div>

0
src/app/main/ui/page-layouts/simple/right-sidebar-2/right-sidebar-2.component.scss Normal file
View File

36
src/app/main/ui/page-layouts/simple/right-sidebar-2/right-sidebar-2.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'simple-right-sidebar-2',
templateUrl: './right-sidebar-2.component.html',
styleUrls : ['./right-sidebar-2.component.scss']
})
export class SimpleRightSidebar2Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

46
src/app/main/ui/page-layouts/simple/right-sidebar-3/right-sidebar-3.component.html Normal file
View File

@ -0,0 +1,46 @@
<div class="page-layout simple right-sidebar inner-sidebar">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-right-sidebar-4')">
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Right inner sidebar with content scroll</h2>
</div>
</div>
<!-- / HEADER -->
<div class="content">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-right-sidebar-3" position="left" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center p-24" fusePerfectScrollbar>
<!-- CONTENT -->
<div class="content mat-elevation-z4 mat-white-bg p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</div>
</div>

0
src/app/main/ui/page-layouts/simple/right-sidebar-3/right-sidebar-3.component.scss Normal file
View File

36
src/app/main/ui/page-layouts/simple/right-sidebar-3/right-sidebar-3.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'simple-right-sidebar-4',
templateUrl: './right-sidebar-3.component.html',
styleUrls : ['./right-sidebar-3.component.scss']
})
export class SimpleRightSidebar3Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

46
src/app/main/ui/page-layouts/simple/right-sidebar-4/right-sidebar-4.component.html Normal file
View File

@ -0,0 +1,46 @@
<div class="page-layout simple right-sidebar inner-sidebar inner-scroll">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-right-sidebar-4')">
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Right inner sidebar with inner scroll</h2>
</div>
</div>
<!-- / HEADER -->
<div class="content">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-right-sidebar-3" position="left" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidebar></fuse-demo-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center p-24" fusePerfectScrollbar>
<!-- CONTENT -->
<div class="content mat-elevation-z4 mat-white-bg p-24">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</div>
</div>

0
src/app/main/ui/page-layouts/simple/right-sidebar-4/right-sidebar-4.component.scss Normal file
View File

36
src/app/main/ui/page-layouts/simple/right-sidebar-4/right-sidebar-4.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component } from '@angular/core';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'simple-right-sidebar-4',
templateUrl: './right-sidebar-4.component.html',
styleUrls : ['./right-sidebar-4.component.scss']
})
export class SimpleRightSidebar4Component
{
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseSidebarService: FuseSidebarService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}

50
src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.html
View File

@ -1,50 +0,0 @@
<div class="page-layout simple right-sidenav" fusePerfectScrollbar>
<mat-sidenav-container>
<!-- CENTER -->
<div class="center" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-right-sidenav"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Right sidenav with content scroll</h2>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24 mat-white-bg">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="end" opened="true" mode="side"
fuseMatSidenavHelper="simple-right-sidenav" mat-is-locked-open="gt-md">
<div class="sidenav-content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-right-sidenav-1',
templateUrl: './right-sidenav-1.component.html',
styleUrls : ['./right-sidenav-1.component.scss']
})
export class SimpleRightSidenav1Component
{
/**
* Constructor
*/
constructor()
{
}
}

50
src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
View File

@ -1,50 +0,0 @@
<div class="page-layout simple right-sidenav inner-scroll">
<mat-sidenav-container>
<!-- CENTER -->
<div class="center" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-right-sidenav-2"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Right sidenav with inner scroll</h2>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24 mat-white-bg">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="end" opened="true" mode="side"
fuseMatSidenavHelper="simple-right-sidenav-2" mat-is-locked-open="gt-md">
<div class="sidenav-content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-right-sidenav-2',
templateUrl: './right-sidenav-2.component.html',
styleUrls : ['./right-sidenav-2.component.scss']
})
export class SimpleRightSidenav2Component
{
/**
* Constructor
*/
constructor()
{
}
}

50
src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
View File

@ -1,50 +0,0 @@
<div class="page-layout simple right-sidenav inner-sidenav inner-scroll">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="simple-right-sidenav-3"
fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<div>
<h2>Right inner sidenav with content scroll</h2>
</div>
</div>
<!-- / HEADER -->
<mat-sidenav-container>
<!-- CENTER -->
<div class="center p-24" fusePerfectScrollbar>
<!-- CONTENT -->
<div class="content p-24 mat-elevation-z4 mat-white-bg">
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="end" opened="true" mode="side"
fuseMatSidenavHelper="simple-right-sidenav-3" mat-is-locked-open="gt-md">
<div class="sidenav-content" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

17
src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts
View File

@ -1,17 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector : 'simple-right-sidenav-3',
templateUrl: './right-sidenav-3.component.html',
styleUrls : ['./right-sidenav-3.component.scss']
})
export class SimpleRightSidenav3Component
{
/**
* Constructor
*/
constructor()
{
}
}

100
src/app/navigation/navigation.ts
View File

@ -432,52 +432,52 @@ export const navigation: FuseNavigation[] = [
url : '/ui/page-layouts/carded/full-width-tabbed-2'
},
{
id : 'left-sidenav-1',
title: 'Left Sidenav #1',
id : 'left-sidebar-1',
title: 'Left Sidebar #1',
type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-1'
url : '/ui/page-layouts/carded/left-sidebar-1'
},
{
id : 'left-sidenav-2',
title: 'Left Sidenav #2',
id : 'left-sidebar-2',
title: 'Left Sidebar #2',
type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-2'
url : '/ui/page-layouts/carded/left-sidebar-2'
},
{
id : 'left-sidenav-tabbed-1',
title: 'Left Sidenav Tabbed #1',
id : 'left-sidebar-tabbed-1',
title: 'Left Sidebar Tabbed #1',
type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-tabbed-1'
url : '/ui/page-layouts/carded/left-sidebar-tabbed-1'
},
{
id : 'left-sidenav-tabbed-2',
title: 'Left Sidenav Tabbed #2',
id : 'left-sidebar-tabbed-2',
title: 'Left Sidebar Tabbed #2',
type : 'item',
url : '/ui/page-layouts/carded/left-sidenav-tabbed-2'
url : '/ui/page-layouts/carded/left-sidebar-tabbed-2'
},
{
id : 'right-sidenav-1',
title: 'Right Sidenav #1',
id : 'right-sidebar-1',
title: 'Right Sidebar #1',
type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-1'
url : '/ui/page-layouts/carded/right-sidebar-1'
},
{
id : 'right-sidenav-2',
title: 'Right Sidenav #2',
id : 'right-sidebar-2',
title: 'Right Sidebar #2',
type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-2'
url : '/ui/page-layouts/carded/right-sidebar-2'
},
{
id : 'right-sidenav-tabbed-1',
title: 'Right Sidenav Tabbed #1',
id : 'right-sidebar-tabbed-1',
title: 'Right Sidebar Tabbed #1',
type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-tabbed-1'
url : '/ui/page-layouts/carded/right-sidebar-tabbed-1'
},
{
id : 'right-sidenav-tabbed-2',
title: 'Right Sidenav Tabbed #2',
id : 'right-sidebar-tabbed-2',
title: 'Right Sidebar Tabbed #2',
type : 'item',
url : '/ui/page-layouts/carded/right-sidenav-tabbed-2'
url : '/ui/page-layouts/carded/right-sidebar-tabbed-2'
}
]
},
@ -486,7 +486,7 @@ export const navigation: FuseNavigation[] = [
title : 'Simple',
type : 'collapsable',
badge : {
title: '8',
title: '10',
bg : '#525e8a',
fg : '#FFFFFF'
},
@ -498,40 +498,52 @@ export const navigation: FuseNavigation[] = [
url : '/ui/page-layouts/simple/full-width-1'
},
{
id : 'left-sidenav-1',
title: 'Left Sidenav #1',
id : 'left-sidebar-1',
title: 'Left Sidebar #1',
type : 'item',
url : '/ui/page-layouts/simple/left-sidenav-1'
url : '/ui/page-layouts/simple/left-sidebar-1'
},
{
id : 'left-sidenav-2',
title: 'Left Sidenav #2',
id : 'left-sidebar-2',
title: 'Left Sidebar #2',
type : 'item',
url : '/ui/page-layouts/simple/left-sidenav-2'
url : '/ui/page-layouts/simple/left-sidebar-2'
},
{
id : 'left-sidenav-3',
title: 'Left Sidenav #3',
id : 'left-sidebar-3',
title: 'Left Sidebar #3',
type : 'item',
url : '/ui/page-layouts/simple/left-sidenav-3'
url : '/ui/page-layouts/simple/left-sidebar-3'
},
{
id : 'right-sidenav-1',
title: 'Right Sidenav #1',
id : 'left-sidebar-4',
title: 'Left Sidebar #4',
type : 'item',
url : '/ui/page-layouts/simple/right-sidenav-1'
url : '/ui/page-layouts/simple/left-sidebar-4'
},
{
id : 'right-sidenav-2',
title: 'Right Sidenav #2',
id : 'right-sidebar-1',
title: 'Right Sidebar #1',
type : 'item',
url : '/ui/page-layouts/simple/right-sidenav-2'
url : '/ui/page-layouts/simple/right-sidebar-1'
},
{
id : 'right-sidenav-3',
title: 'Right Sidenav #3',
id : 'right-sidebar-2',
title: 'Right Sidebar #2',
type : 'item',
url : '/ui/page-layouts/simple/right-sidenav-3'
url : '/ui/page-layouts/simple/right-sidebar-2'
},
{
id : 'right-sidebar-3',
title: 'Right Sidebar #3',
type : 'item',
url : '/ui/page-layouts/simple/right-sidebar-3'
},
{
id : 'right-sidebar-4',
title: 'Right Sidebar #4',
type : 'item',
url : '/ui/page-layouts/simple/right-sidebar-4'
},
{
id : 'tabbed-1',
@ -666,7 +678,7 @@ export const navigation: FuseNavigation[] = [
},
{
id : 'sidenav',
title: 'Sidenav',
title: 'Sidebar',
type : 'item',
url : '/components/angular-material/sidenav'
},