File

src/app/cluster/cluster.component.ts

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

constructor(media: MediaObserver)
Parameters :
Name Type Optional
media MediaObserver No

Methods

ngOnInit
ngOnInit()
Returns : void
toggleSidenav
toggleSidenav()
Returns : void

Properties

isNarrowView
Type : boolean
sidenav
Decorators :
@ViewChild('sidenav', {static: true})
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 ""