feat(header): add subheader mode when header is placed on a side of…

… sidebar (#555)

Closes #554

src/app/app.component.ts

@@ -10,11 +10,38 @@ import { Component } from '@angular/core';
  selector: 'nb-app-root',
  styleUrls: ['./app.component.scss'],
  template: `
- <div class="framework-options-bar" dir="ltr">
- <nb-layout-direction-toggle></nb-layout-direction-toggle>
- <nb-layout-theme-toggle></nb-layout-theme-toggle>
+ <div class="options-bar" dir="ltr">
+ <ng-container *ngIf="optionsVisible">
+ <nb-layout-direction-toggle></nb-layout-direction-toggle>
+ <nb-layout-theme-toggle></nb-layout-theme-toggle>
+ </ng-container>
+ <button (click)="toggle()" [class.fixed]="!optionsVisible" class="options-show">
+ <ng-container *ngIf="optionsVisible">hide</ng-container>
+ <ng-container *ngIf="!optionsVisible">show</ng-container>
+ </button>
  </div>
  <router-outlet></router-outlet>
  `,
+ styles: [`
+ .options-bar {
+ display: flex;
+ align-items: center;
+ }
+ .options-show {
+ margin-left: auto;
+ }
+ .options-show.fixed {
+ position: fixed;
+ right: 0;
+ top: 0;
+ }
+ `],
 })
-export class NbAppComponent {}
+export class NbAppComponent {
+
+ optionsVisible = true;
+
+ toggle() {
+ this.optionsVisible = !this.optionsVisible;
+ }
+}

src/framework/theme/components/layout/_layout.component.theme.scss

@@ -198,4 +198,10 @@
  }
  }
  }
+
+ nb-layout.with-subheader {
+ nb-sidebar .main-container {
+ box-shadow: none; // so that we don't have a shadow over the header in this mode
+ }
+ }
 }

src/framework/theme/components/layout/layout.component.ts

@@ -6,7 +6,7 @@
 
 import {
  AfterViewInit, Component, ComponentFactoryResolver, ElementRef, HostBinding, HostListener, Input, OnDestroy,
- Renderer2, ViewChild, ViewContainerRef, OnInit, ComponentFactory, Inject, PLATFORM_ID,
+ Renderer2, ViewChild, ViewContainerRef, OnInit, ComponentFactory, Inject, PLATFORM_ID, forwardRef,
 } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
@@ -69,6 +69,18 @@ export class NbLayoutColumnComponent {
  *
  * @stacked-example(Fixed Header, layout/layout-fixed-header.component)
  *
+ * In a pair with sidebar it is possible to setup a configuration when header is placed on a side of the sidebar
+ * and not on top of it. To achieve this simply put a `subheader` property to the header like this:
+ * ```html
+ * <nb-layout-header subheader></nb-layout-header>
+ * ```
+ * @stacked-example(Subheader, layout/layout-sidebar-subheader.component)
+ * Note that in such configuration sidebar shadow is removed and header cannot be make `fixed`.
+ *
+ * Same way you can put both `fixed` and `clipped` headers adding creating a sub-header for your app:
+ *
+ * @stacked-example(Subheader, layout/layout-subheader.component)
+ *
  * @styles
  *
  * header-font-family
@@ -90,6 +102,11 @@ export class NbLayoutColumnComponent {
 export class NbLayoutHeaderComponent {
 
  @HostBinding('class.fixed') fixedValue: boolean;
+ @HostBinding('class.subheader') subheaderValue: boolean;
+
+ // tslint:disable-next-line
+ constructor(@Inject(forwardRef(() => NbLayoutComponent)) private layout: NbLayoutComponent) {
+ }
 
  /**
  * Makes the header sticky to the top of the nb-layout.
@@ -99,6 +116,18 @@ export class NbLayoutHeaderComponent {
  set fixed(val: boolean) {
  this.fixedValue = convertToBoolProperty(val);
  }
+
+ /**
+ * Places header on a side of the sidebar, and not above.
+ * Disables fixed mode for this header and remove a shadow from the sidebar.
+ * @param {boolean} val
+ */
+ @Input()
+ set subheader(val: boolean) {
+ this.subheaderValue = convertToBoolProperty(val);
+ this.fixedValue = false;
+ this.layout.withSubheader = this.subheaderValue;
+ }
 }
 
 /**
@@ -221,10 +250,11 @@ export class NbLayoutFooterComponent {
  <ng-template #layoutTopDynamicArea></ng-template>
  <div class="scrollable-container" #scrollableContainer>
  <div class="layout">
- <ng-content select="nb-layout-header"></ng-content>
+ <ng-content select="nb-layout-header:not([subheader])"></ng-content>
  <div class="layout-container">
  <ng-content select="nb-sidebar"></ng-content>
  <div class="content" [class.center]="centerValue">
+ <ng-content select="nb-layout-header[subheader]"></ng-content>
  <div class="columns">
  <ng-content select="nb-layout-column"></ng-content>
  </div>
@@ -241,6 +271,7 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
 
  @HostBinding('class.window-mode') windowModeValue: boolean = false;
  @HostBinding('class.with-scroll') withScrollValue: boolean = false;
+ @HostBinding('class.with-subheader') withSubheader: boolean = false;
 
  /**
  * Defines whether the layout columns will be centered after some width

src/framework/theme/components/sidebar/sidebar.component.ts

@@ -61,6 +61,14 @@ export class NbSidebarFooterComponent {
  *
  * Sidebar also supports a `responsive` behavior, listening to window size change and changing its size respectably.
  *
+ * In a pair with header it is possible to setup a configuration when header is placed on a side of the sidebar
+ * and not on top of it. To achieve this simply put a `subheader` property to the header like this:
+ * ```html
+ * <nb-layout-header subheader></nb-layout-header>
+ * ```
+ * @stacked-example(Subheader, layout/layout-sidebar-subheader.component)
+ * Note that in such configuration sidebar shadow is removed and header cannot be make `fixed`.
+ *
  * @additional-example(Right Sidebar, sidebar/sidebar-right.component)
  * @additional-example(Fixed Sidebar, sidebar/sidebar-fixed.component)
  *

src/playground/layout/layout-sidebar-subheader.component.html

@@ -0,0 +1,10 @@
+<nb-layout>
+
+ <nb-layout-header subheader>
+ <a href="#" (click)="toggle()"><i class="nb-menu"></i></a>
+ </nb-layout-header>
+
+ <nb-sidebar></nb-sidebar>
+
+ <nb-layout-column>Layout Content</nb-layout-column>
+</nb-layout>

src/playground/layout/layout-sidebar-subheader.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { NbSidebarService } from '@nebular/theme';
+
+@Component({
+ selector: 'nb-layout-sidebar-subheader',
+ templateUrl: './layout-sidebar-subheader.component.html',
+ styles: [`
+ :host nb-layout-header a {
+ font-size: 2rem;
+ text-decoration: none;
+ }
+ :host nb-layout-column {
+ height: 50vw;
+ }
+ :host nb-layout-column:first-child {
+ background: #f4f4f7;
+ }
+ `],
+})
+
+export class NbLayoutSidebarSubheaderComponent {
+
+ constructor(private sidebarService: NbSidebarService) {
+ }
+
+ toggle() {
+ this.sidebarService.toggle(true);
+ return false;
+ }
+}

src/playground/layout/layout-subheader.component.html

@@ -0,0 +1,17 @@
+<nb-layout>
+ <nb-layout-header fixed>
+ <a href="#" (click)="toggle()"><i class="nb-menu"></i></a>
+ </nb-layout-header>
+
+ <nb-layout-header subheader>
+ <nb-actions>
+ <nb-action icon="nb-home"></nb-action>
+ <nb-action icon="nb-search"></nb-action>
+ <nb-action icon="nb-edit"></nb-action>
+ </nb-actions>
+ </nb-layout-header>
+
+ <nb-sidebar></nb-sidebar>
+
+ <nb-layout-column>Layout Content</nb-layout-column>
+</nb-layout>

src/playground/layout/layout-subheader.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { NbSidebarService } from '@nebular/theme';
+
+@Component({
+ selector: 'nb-layout-subheader',
+ templateUrl: './layout-subheader.component.html',
+ styles: [`
+ :host nb-layout-header a {
+ font-size: 2rem;
+ text-decoration: none;
+ }
+ :host nb-layout-column {
+ height: 50vw;
+ }
+ :host nb-layout-column:first-child {
+ background: #f4f4f7;
+ }
+ `],
+})
+
+export class NbLayoutSubheaderComponent {
+
+ constructor(private sidebarService: NbSidebarService) {
+ }
+
+ toggle() {
+ this.sidebarService.toggle(true);
+ return false;
+ }
+}

src/playground/playground-routing.module.ts

@@ -123,6 +123,8 @@ import { NbAccordionShowcaseComponent } from './accordion/accordion-showcase.com
 import { NbAccordionTestComponent } from './accordion/accordion-test.component';
 import { NbAccordionMultiComponent } from './accordion/accordion-multi.component';
 import { NbAccordionToggleComponent } from './accordion/accordion-toggle.component';
+import { NbLayoutSidebarSubheaderComponent } from './layout/layout-sidebar-subheader.component';
+import { NbLayoutSubheaderComponent } from './layout/layout-subheader.component';
 
 export const routes: Routes = [
  {
@@ -578,6 +580,14 @@ export const routes: Routes = [
  path: 'layout-fixed-header.component',
  component: NbLayoutFixedHeaderComponent,
  },
+ {
+ path: 'layout-sidebar-subheader.component',
+ component: NbLayoutSidebarSubheaderComponent,
+ },
+ {
+ path: 'layout-subheader.component',
+ component: NbLayoutSubheaderComponent,
+ },
  {
  path: 'layout-column-left.component',
  component: NbLayoutColumnLeftComponent,

src/playground/playground.module.ts

@@ -151,6 +151,8 @@ import { NbAccordionShowcaseComponent } from './accordion/accordion-showcase.com
 import { NbAccordionTestComponent } from './accordion/accordion-test.component';
 import { NbAccordionToggleComponent } from './accordion/accordion-toggle.component';
 import { NbAccordionMultiComponent } from './accordion/accordion-multi.component';
+import { NbLayoutSidebarSubheaderComponent } from './layout/layout-sidebar-subheader.component';
+import { NbLayoutSubheaderComponent } from './layout/layout-subheader.component';
 
 export const NB_MODULES = [
  NbCardModule,
@@ -199,6 +201,8 @@ export const NB_EXAMPLE_COMPONENTS = [
  NbLayoutShowcaseComponent,
  NbLayoutWFooterComponent,
  NbLayoutFixedHeaderComponent,
+ NbLayoutSidebarSubheaderComponent,
+ NbLayoutSubheaderComponent,
  NbLayoutColumnLeftComponent,
  NbLayoutTestComponent,
  NbLayoutHeaderTestComponent,