first commit

src/app/_layout/settings/menu-settings.service.ts

@@ -0,0 +1,60 @@
+import { Injectable, InjectionToken, Inject } from '@angular/core';
+import { Router, RoutesRecognized } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+import * as _ from 'lodash';
+
+export const MENU_SETTINGS_CONFIG = new InjectionToken('menuCustomConfig');
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MenuSettingsService {
+
+  private _configSubject: BehaviorSubject<any>;
+  private readonly _defaultConfig: any;
+
+  constructor(private _router: Router, @Inject(MENU_SETTINGS_CONFIG) private _config) {
+    // Set the default config from the user provided config (from forRoot)
+    this._defaultConfig = _config;
+
+    // Initialize the service
+    this._init();
+  }
+
+  private _init(): void {
+    // Set the config from the default config
+    this._configSubject = new BehaviorSubject(_.cloneDeep(this._defaultConfig));
+
+    // Reload the default layout config on every RoutesRecognized event
+    // if the current layout config is different from the default one
+    this._router.events
+      .pipe(filter(event => event instanceof RoutesRecognized))
+      .subscribe(() => {
+        if (!_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout)) {
+          // Clone the current config
+          const config = _.cloneDeep(this._configSubject.getValue());
+
+          // Set the config
+          this._configSubject.next(config);
+        }
+      });
+  }
+
+  set config(value) {
+    // Get the value from the behavior subject
+    let config = this._configSubject.getValue();
+
+    // Merge the new config
+    config = _.merge({}, config, value);
+
+    // Notify the observers
+    this._configSubject.next(config);
+  }
+
+  get config(): any | Observable<any> {
+    return this._configSubject.asObservable();
+  }
+
+}

src/app/_layout/settings/settings.module.ts

@@ -0,0 +1,28 @@
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+import { THEME_SETTINGS_CONFIG } from './theme-settings.service';
+import { MENU_SETTINGS_CONFIG } from './menu-settings.service';
+
+@NgModule()
+export class SettingsModule {
+  constructor(@Optional() @SkipSelf() parentModule: SettingsModule) {
+    if (parentModule) {
+      throw new Error('SettingsModule is already loaded. Import it in the AppModule only!');
+    }
+  }
+
+  static forRoot(themeConfig, menuConfig): ModuleWithProviders<SettingsModule> {
+    return {
+      ngModule: SettingsModule,
+      providers: [
+        {
+          provide: THEME_SETTINGS_CONFIG,
+          useValue: themeConfig
+        },
+        {
+          provide: MENU_SETTINGS_CONFIG,
+          useValue: menuConfig
+        }
+      ]
+    };
+  }
+}

src/app/_layout/settings/theme-settings.config.ts

@@ -0,0 +1,33 @@
+// Default theme settings configurations
+
+export const ThemeSettingsConfig = {
+  colorTheme: 'semi-dark', // light, semi-light, semi-dark, dark
+  layout: {
+    style: 'vertical', // style: 'vertical', horizontal,
+    pattern: 'fixed' // fixed, boxed, static
+  },
+  menuColor: 'menu-dark', // Vertical: [menu-dark, menu-light] , Horizontal: [navbar-dark, navbar-light]
+  navigation: 'menu-collapsible', // menu-collapsible, menu-accordation
+  menu: 'expand', // collapse, expand
+  header: 'fix', // fix, static
+  footer: 'static', // fix, static
+  customizer: 'on', // on,off
+  buybutton: 'on', // on, off
+  headerIcons: {
+    maximize: 'on', // on, off
+    search: 'on', // on, off
+    internationalization: 'on', // on, off
+    notification: 'on', // on, off
+    email: 'on' // on, off
+  },
+  brand: {
+    brand_name: 'Modern ',
+    logo: {
+      type: 'internal', // internal, url
+      value: 'assets/custom/images/logo.png' // recommended location for custom images
+      // type:'url',
+      // value:'http://evolvision.com/wp-content/uploads/2018/01/envelope4-green.png'
+    },
+  },
+  defaultTitleSuffix: 'Modern Admin - Angular 11+ Bootstrap 5 Admin Dashboard Template'
+};

src/app/_layout/settings/theme-settings.service.ts

@@ -0,0 +1,63 @@
+import { Injectable, InjectionToken, Inject } from '@angular/core';
+import { Router, RoutesRecognized } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+import * as _ from 'lodash';
+
+export const THEME_SETTINGS_CONFIG = new InjectionToken('themeCustomConfig');
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeSettingsService {
+  // Private
+  private _configSubject: BehaviorSubject<any>;
+  private readonly _defaultConfig: any;
+
+  constructor(private _router: Router, @Inject(THEME_SETTINGS_CONFIG) private _config) {
+    // Set the default config from the user provided config (from forRoot)
+    this._defaultConfig = _config;
+
+    // Initialize the service
+    this._init();
+  }
+
+  private _init(): void {
+    // Set the config from the default config
+    this._configSubject = new BehaviorSubject(_.cloneDeep(this._defaultConfig));
+
+    // Reload the default layout config on every RoutesRecognized event
+    // if the current layout config is different from the default one
+    this._router.events
+      .pipe(filter(event => event instanceof RoutesRecognized))
+      .subscribe(() => {
+        if (!_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout)) {
+          // Clone the current config
+          const config = _.cloneDeep(this._configSubject.getValue());
+
+          // Reset the layout from the default config
+          // config.layout = _.cloneDeep(this._defaultConfig.layout);
+
+          // Set the config
+          this._configSubject.next(config);
+        }
+      });
+  }
+
+  set config(value) {
+    // Get the value from the behavior subject
+    let config = this._configSubject.getValue();
+
+    // Merge the new config
+    config = _.merge({}, config, value);
+
+    // Notify the observers
+    this._configSubject.next(config);
+  }
+
+  get config(): any | Observable<any> {
+    return this._configSubject.asObservable();
+  }
+
+}