A new and improved self-creating navigation menu

link-menu.component.html

<div class="toggle-container" (click)="openMenu()">
    <span *ngIf="toggleHeader" class="sm-only">{{ toggleHeader }}</span>
    <ces-svg class="icon-toggle sm-only" [ngClass]="showMenu ? 'fade-out' : 'fade-in'" [type]="toggleIcon"
    ></ces-svg>
</div>


<div class="link-menu sm-only" [ngClass]="showMenu ? classShow : classHide">
    <div class="menu-header">
        <span *ngIf="menuHeader">{{ menuHeader }}</span>
        <ces-svg class="icon-close" type="x-circle" (click)="closeMenu()"></ces-svg>
    </div>

    <ces-link-button *ngFor="let link of links;" class="link override-color" [path]="link.path" [title]="link.title"
        [activeSelfOnly]="link.activeSelfOnly" [queryParams]="queryParams" (click)="onSelectLinkRequest(link.label)">
        <ces-svg class="icon" [type]="link.icon"></ces-svg> <span>{{ link.label }}</span>
    </ces-link-button>
</div>

<div class="link-menu-md md-only {{ class }}" [ngClass]="allowToggle ? 'fade-out' : 'fade-in'">
    <ces-link-button *ngFor="let link of links" class="button-menu" [path]="link.path" [title]="link.title"
        [activeSelfOnly]="link.activeSelfOnly" [queryParams]="queryParams" (click)="onSelectLinkRequest(link.label)">
        <ces-svg class="icon" [type]="link.icon"></ces-svg> <span>{{ link.label }}</span>
    </ces-link-button>
</div>

link-menu.component.scss

@import "src/assets/styles/containers.scss";

$icon-close: 2rem;

.link-menu {
    background: $color-button;
    padding-bottom: 1.5rem;
    border-radius: $border-radius;
    margin: 0 auto;
    width: 90vw;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
}

.link {
    background: $color-button-light;
    color: $color-button-light-text;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0;
    border-bottom: $border;
    transition: 1s background, 1s color;

    &:first-of-type {
        border-top: $border;
    }

    &:hover {
        background: $color-button-active;
        color: $color-button-light-text;
        cursor: pointer;
    }

    &.active {
        background: $color-button-active;
        color: $color-button-active-text;
    }
}

.toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    line-height: 1.2rem;
}

span {
    font-size: $p-md;
    padding-right: 0.5rem;
    text-transform: lowercase;
    line-height: 1.2;
}

.icon {
    width: $button-icon-sm;
    height: $button-icon-sm;
    display: inline-block;
    margin-right: 0.5rem;
    padding-left: 0.5rem;
}

.icon-close {
    width: $icon-close;
    height: $icon-close;
    margin-left: 0.5rem;
    transition: 1s color;

    &:hover {
        color: $color-hyperlink-active;
        cursor: pointer;
    }
}

.icon-toggle {
    width: $button-icon-sm;
    height: $button-icon-sm;
    color: $color-button-active;
    float: right;

    &:hover {
        cursor: pointer;
    }
}

@media (min-width: $breakpoint-md) {
    .link-menu-md {
        display: flex;
        flex-wrap: wrap;
        justify-content: inherit;

        .icon {
            width: $button-icon-sm;
            height: $button-icon-sm;
        }
    
        span {
            font-size: $p-md;
        }

        .button-menu {
            margin-left: 0.5rem;
            margin-bottom: 0.5rem;
            width: 12rem;

            span {
                text-align: right;
            }
        }
    }


}

link-menu.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ActivatedRoute, Router, Routes, Route } from '@angular/router';
import { AnimationType } from 'projects/animation/src/public-api';
import { DataService } from 'projects/data/src/public-api';
import { ScreenDeviceSize, ScreenService } from 'projects/screen/src/public-api';
import { Observable, of, Subscription } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import { LinkMenu, LinkMenuOrderBy } from '../link';
import { LinkService } from '../link.service';


@Component({
  selector: 'ces-link-menu',
  templateUrl: './link-menu.component.html',
  styleUrls: ['./link-menu.component.scss']
})
export class LinkMenuComponent implements OnInit {

  showMenu: boolean = false;
  screen$: Subscription;
  screen: ScreenDeviceSize;
  classShow: AnimationType = 'fade-in';
  classHide: AnimationType = 'display-none';

  @Input() detectRoutes: boolean = true;
  @Input() links: LinkMenu[] = [];
  @Input() allowToggle: boolean = true;
  @Input() toggleIcon: string = 'ellipsis-vertical';
  @Input() animationHide: AnimationType = 'slide-right-hide';
  @Input() animationShow: AnimationType = 'slide-left-show';
  @Input() menuHeader: string;
  @Input() toggleHeader: string;
  @Input() first: string;
  @Input() orderBy: LinkMenuOrderBy = 'label';
  @Input() class: string;

  @Output() onSelectLink: EventEmitter<string> = new EventEmitter();
  
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private screenService: ScreenService,
    private dataService: DataService,
    private linkService: LinkService
  ) { }

  ngOnInit(): void {
    if (this.detectRoutes) {
      let config: Route[];
   
      if (this.route.snapshot?.routeConfig?.children) {
        config = this.route.snapshot.routeConfig.children;
      }
      else if (this.router.config) {
        config = this.router.config;
      }
      this.createMenu(config).subscribe(links => {
        let sorted: LinkMenu[] = links;
     
        if (this.orderBy !== 'none') {
         sorted = this.dataService.sortArrayOfObjects(links, this.orderBy);
        }
        
        if (this.first) {
          sorted = this.dataService.moveElementToFirst(sorted, 'label', this.first);
        }

        this.links = sorted;
   
      })
    }

    this.screen$ = this.screenService.screenSize$.pipe(distinctUntilChanged()).subscribe((size: ScreenDeviceSize) => {
      this.screen = size;
      this.classHide = 'display-none';
      this.classShow = 'fade-in';
      if (size === 'small') {
        this.allowToggle = true;
      }

      else {
        this.allowToggle = false;
      }
    })
  }

  ngOnDestroy() {
    this.screen$?.unsubscribe();
  }

  createMenu(routes: Routes): Observable<LinkMenu[]> {
    let links: LinkMenu[] = [];
    routes.forEach(route => {
      if (route.data?.menu?.label) {
        links.push({
          path: route.path,
          title: route.data.meta.title,
          label: route.data.menu.label,
          icon: route.data.menu.icon,
          activeSelfOnly: route.data.menu.activeSelfOnly
        });
      }
    });
    return of(links);
  }

  onSelectLinkRequest(path: string) {
    this.onSelectLink.emit(path);
    this.linkService.setActiveMenuLink(path);
    this.closeMenu();
  }

  closeMenu() {
    if (this.allowToggle) {
      this.showMenu = false;
    }
  }

  openMenu() {
    this.classShow = this.animationShow;
    this.classHide = this.animationHide;
    this.showMenu = true;
  }

}