fix-sidenav

This package is made for use in angular but may work in other environments

Fix the height of a sidenav buy synchronising the sidenav height with the height of the conten

How to use in angular

In html

<div>
    <div #sidenav></div> <!-- Element one -->
    <div #content></div> <!-- Element to -->
</div>

In component

import { Component, OnInit, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import synchroniseHeight from 'node_modules/fix-sidenav/synchronise-height'; // The Path to node modules/fix-sidenav/synchronise-height
 
export class MyComponent implements OnInit, AfterViewInit {
    // Get the sidenav and the content element
    @ViewChild('sidenav') sidenav: ElementRef; // Element one
    @ViewChild('content') content: ElementRef; // Element to
    
    ngAfterViewInit() {
        // Run synchronise height
        synchroniseHeight(this.sidenav.nativeElement, this.content.nativeElement);
    
        // Run synchronise height on resize
        addEventListener('resize', (event)=> {
          synchroniseHeight(this.sidenav.nativeElement, this.content.nativeElement);
        });
    }
}