FuseConfig/Navigation bootstrap/refactoring

config.model.ts

export type NavigationPositionType = 'right' | 'left' | 'top' | 'none';
export type NavigationOpenBehaviorType = 'push' | 'slide';
export type ToolbarPositionType = 'above' | 'below' | 'none';
export type FooterPositionType = 'above' | 'below' | 'none';
export type LayoutModeType = 'boxed' | 'fullwidth';
export type RouterAnimationType =
  | 'fadeIn'
  | 'slideUp'
  | 'slideDown'
  | 'slideRight'
  | 'slideLeft'
  | 'none';

interface IComponentLayoutConfig {
  position?: any;
  cssClass?: string;
}

export class FooterComponentLayoutConfig implements IComponentLayoutConfig {
  position?: FooterPositionType = 'below';
  cssClass? = 'mat-fuse-dark-900-bg';

  constructor(options?: Partial<FooterComponentLayoutConfig>) {
    Object.assign(this, options);
  }
}

export class NavigationComponentLayoutConfig implements IComponentLayoutConfig {
  position?: NavigationPositionType = 'left';
  cssClass? = 'mat-fuse-dark-700-bg';
  openBehavior?: NavigationOpenBehaviorType = 'slide';

  constructor(options?: Partial<NavigationComponentLayoutConfig>) {
    Object.assign(this, options);
  }
}

export class ToolbarComponentLayoutConfig implements IComponentLayoutConfig {
  position?: ToolbarPositionType = 'below';
  cssClass? = 'mat-white-500-bg';

  constructor(options?: Partial<ToolbarComponentLayoutConfig>) {
    Object.assign(this, options);
  }
}

class LayoutConfig {
  footer? = new FooterComponentLayoutConfig();
  navigation? = new NavigationComponentLayoutConfig();
  toolbar? = new ToolbarComponentLayoutConfig();

  constructor(options?: Partial<LayoutConfig>) {
    if (options) {
      this.footer = new FooterComponentLayoutConfig(options.footer);
      this.navigation = new NavigationComponentLayoutConfig(options.navigation);
      this.toolbar = new ToolbarComponentLayoutConfig(options.toolbar);
    }
  }
}

export class FuseConfig {
  layout? = new LayoutConfig();
  layoutMode?: LayoutModeType = 'fullwidth';
  customScrollbars? = true;
  routerAnimation?: RouterAnimationType = 'fadeIn';

  constructor(options?: Partial<FuseConfig>) {
    Object.assign(this, options);

    if (options) {
      this.layout = new LayoutConfig(options.layout);
    }
  }
}

config.service.ts

import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Platform } from '@angular/cdk/platform';

import { FuseConfig } from './config.model';

// Create the injection token for the custom config
export const FUSE_CONFIG = new InjectionToken('FUSE_CONFIG');

@Injectable()
export class FuseConfigService {
  config = new FuseConfig();
  onConfigChanged = new BehaviorSubject(this.config);

  /**
   * Constructor
   *
   * @param router
   * @param platform
   * @param config
   */
  constructor(
    private router: Router,
    public platform: Platform,
    @Inject(FUSE_CONFIG)
    @Optional()
    config: FuseConfig
  ) {
    if (config) {
      this.config = config;
    }

    /**
     * Disable Custom Scrollbars if Browser is Mobile
     */
    if (this.platform.ANDROID || this.platform.IOS) {
      this.config.customScrollbars = false;
    }

    // Reload the default settings for the
    // layout on every navigation start
    router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.setConfig(
          new FuseConfig({
            layout: this.config.layout,
          })
        );
      }
    });
  }

  /**
   * Set the new config from given object
   *
   * @param config
   */
  setConfig(config: FuseConfig): void {
    this.config = config;

    // Trigger the event
    this.onConfigChanged.next(this.config);
  }
}

fuse.module.ts

  static forRoot(
    config: FuseConfig,
    navigation: Navigation[]
  ): ModuleWithProviders {
    return {
      ngModule: FuseModule,
      providers: [
        {
          provide: FUSE_CONFIG,
          useValue: config,
        },
        {
          provide: FUSE_NAVIGATION,
          useValue: navigation,
        },
      ],
    };
  }

navigation.model.ts

export interface Navigation {
  id: string;
  title: string;
  translate?: string;
  type?: string;
  icon?: string;
  url?: string;
  function?: any;
  badge?: {
    title: string | number;
    translate?: string;
    bg?: string;
    fg?: string;
  };

  children?: Navigation[];
}