ng-ytl-zorro-antd/src/showcase/nz-demo-layout/nz-demo-layout-trigger.component.ts

An enterprise-class UI components based on Ant Design and Angular

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-layout-trigger',
  template: `
    <nz-layout>
      <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
        <div class="logo">
        </div>
        <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
          <li nz-submenu>
            <span title><i class="anticon anticon-user"></i><span class="nav-text">User</span></span>
            <ul>
              <li nz-menu-item>Tom</li>
              <li nz-menu-item>Bill</li>
              <li nz-menu-item>Alex</li>
            </ul>
          </li>
          <li nz-submenu>
            <span title><i class="anticon anticon-team"></i><span class="nav-text">Team</span></span>
            <ul>
              <li nz-menu-item>Team 1</li>
              <li nz-menu-item>Team 2</li>
            </ul>
          </li>
          <li nz-menu-item><span><i class="anticon anticon-file"></i><span class="nav-text">File</span></span></li>
        </ul>
      </nz-sider>
      <nz-layout>
        <nz-header style="background: #fff; padding:0;">
          <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>
        </nz-header>
        <nz-content style="margin:0 16px;">
          <nz-breadcrumb style="margin:12px 0;">
            <nz-breadcrumb-item>User</nz-breadcrumb-item>
            <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
          </nz-breadcrumb>
          <div style="padding:24px; background: #fff; min-height: 360px;">
            Bill is a cat.
          </div>
        </nz-content>
        <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
      </nz-layout>
    </nz-layout>
  `,
  styles  : [
      `:host ::ng-deep .logo {
      height: 32px;
      background: #333;
      border-radius: 6px;
      margin: 16px;
    }

    :host ::ng-deep .ant-layout-sider-collapsed .nav-text {
      display: none;
    }

    :host ::ng-deep .ant-layout-sider-collapsed .ant-menu-submenu-title:after {
      display: none;
    }

    :host ::ng-deep .ant-layout-sider-collapsed .anticon {
      font-size: 16px;
      margin-left: 8px;
    }

    :host ::ng-deep .trigger {
      font-size: 18px;
      line-height: 64px;
      padding: 0 16px;
      cursor: pointer;
      transition: color .3s;
    }

    :host ::ng-deep .trigger:hover {
      color: #108ee9;
    }
    `
  ]
})
export class NzDemoLayoutTriggerComponent {
  isCollapsed = false;
}