### File

`src/app/cluster/cluster.component.ts`

### Implements

`OnInit`

### Metadata

selector | `hi-cluster`
styleUrls | `./cluster.component.scss`
templateUrl | `./cluster.component.html`

### Index

###### Properties
isNarrowView sidenav
###### Methods
ngOnInit toggleSidenav

### Constructor

`constructor(media: MediaObserver)`
Defined in src/app/cluster/cluster.component.ts:12
Parameters :
Name | Type | Optional
media | `MediaObserver` | No

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/cluster/cluster.component.ts:16
Returns : `void`

toggleSidenav
`toggleSidenav()`
Defined in src/app/cluster/cluster.component.ts:27
Returns : `void`

### Properties

isNarrowView
Type : `boolean`
Defined in src/app/cluster/cluster.component.ts:12

sidenav
Decorators : `@ViewChild('sidenav', {static: true})`
Defined in src/app/cluster/cluster.component.ts:10

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { MediaChange, MediaObserver } from '@angular/flex-layout';

    @Component({
      selector: 'hi-cluster',
      templateUrl: './cluster.component.html',
      styleUrls: ['./cluster.component.scss'],
    })
    export class ClusterComponent implements OnInit {
      @ViewChild('sidenav', { static: true }) sidenav;

      isNarrowView: boolean;

      constructor(protected media: MediaObserver) {}

      ngOnInit() {
        // auto adjust side nav only if not embed
        this.isNarrowView = this.media.isActive('xs') || this.media.isActive('sm');

        this.media.asObservable().subscribe((change: MediaChange[]) => {
          change.forEach((item) => {
            this.isNarrowView = item.mqAlias === 'xs' || item.mqAlias === 'sm';
          });
        });
      }

      toggleSidenav() {
        this.sidenav.opened ? this.sidenav.close() : this.sidenav.open();
      }
    }

    <!--
      ~ Licensed to the Apache Software Foundation (ASF) under one
      ~ or more contributor license agreements.  See the NOTICE file
      ~ distributed with this work for additional information
      ~ regarding copyright ownership.  The ASF licenses this file
      ~ to you under the Apache License, Version 2.0 (the
      ~ "License"); you may not use this file except in compliance
      ~ with the License.  You may obtain a copy of the License at
      ~
      ~     http://www.apache.org/licenses/LICENSE-2.0
      ~
      ~ Unless required by applicable law or agreed to in writing,
      ~ software distributed under the License is distributed on an
      ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
      ~ KIND, either express or implied.  See the License for the
      ~ specific language governing permissions and limitations
      ~ under the License.
      -->

    <mat-sidenav-container fxFill>
      <mat-sidenav
        #sidenav
        [mode]="isNarrowView ? 'over' : 'side'"
        [opened]="!isNarrowView"
        [disableClose]="!isNarrowView"
        class="mat-elevation-z4"
      >
        <hi-cluster-list></hi-cluster-list>
      </mat-sidenav>
      <section fxFill>
        <router-outlet></router-outlet>
      </section>
    </mat-sidenav-container>
    <button
      mat-mini-fab
      [ngClass]="['toggle-button', sidenav.opened ? 'open' : 'close']"
      color=""
      (click)="toggleSidenav()"
    >
      <mat-icon>chevron_{{ sidenav.opened ? 'left' : 'right' }}</mat-icon>
    </button>

`./cluster.component.scss`

    .mat-sidenav {
      width: 25vw;
      min-width: 200px;
    }

    .toggle-button {
      position: fixed;
      top: 50%;
      z-index: 3;
      transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
      cursor: pointer;

      &.open {
        left: calc(25vw - 20px);
      }

      &.close {
        left: -15px;
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""