dslak_website/src/app/header/header.component.ts

import { Component, OnInit, HostListener, Inject } from '@angular/core'
import { Router, NavigationEnd } from '@angular/router'
import { Title } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common'

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  public isSticky: boolean = true
  public isMenuOpen: boolean = false
  public isFirstScroll: boolean = true

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private router: Router,
    private titleService: Title
  ) {
    router.events.subscribe((val) => {
      this.isMenuOpen = false
      this.document.body.classList.remove('no-scroll')
      //if(val.shouldActivate) { console.log('route', val) }
    })
  }

  ngOnInit(): void {
    //this.isSticky = this.router.url != '/'
  }

  @HostListener('window:scroll', ['$event'])
  onScroll(event) {
    const verticalOffset = window.pageYOffset
          || document.documentElement.scrollTop
          || document.body.scrollTop || 0

    this.isFirstScroll = this.router.url == '/'
    //this.isSticky = this.isFirstScroll ? this.isMenuOpen || verticalOffset > 10 : true
  }

  toggleMenu(): void {
    this.isMenuOpen = !this.isMenuOpen
    if(this.isMenuOpen) {
      this.isSticky = true
      this.document.body.classList.add('no-scroll')
    } else {
      this.document.body.classList.remove('no-scroll')
    }
  }

  setTitle(title): void {
    this.titleService.setTitle(`Dslak - New media arts | ${title}`)
  }

}