From 880ac8aeb1ee1d91988a044477a6938923d9586e Mon Sep 17 00:00:00 2001
From: eksrha <58111764+eksrha@users.noreply.github.com>
Date: Mon, 30 Jan 2023 15:53:16 +0100
Subject: [PATCH 1/5] feat: add linting + run prettier

---
 .eslintrc.json                                |  55 ++++++++
 .github/workflows/build-gh-pages-demo.yaml    |   6 +-
 .github/workflows/pull-request.yml            |   8 +-
 .github/workflows/release.yml                 |  23 ++--
 .gitignore                                    |   3 +-
 .prettierignore                               |  44 +++++++
 .prettierrc                                   |  12 ++
 .vscode/extensions.json                       |   8 +-
 .vscode/settings.json                         |  32 +++--
 README.md                                     |  20 +--
 angular.json                                  |  26 +---
 package.json                                  |  15 ++-
 projects/lib-workspace/karma.conf.js          |  13 +-
 .../src/app/app-routing.module.ts             |   6 +-
 .../lib-workspace/src/app/app.component.html  |   6 +-
 .../lib-workspace/src/app/app.component.scss  |   1 -
 .../src/app/app.component.spec.ts             |   8 +-
 .../lib-workspace/src/app/app.component.ts    |  10 +-
 projects/lib-workspace/src/app/app.module.ts  |  17 +--
 .../src/app/content/home/home.component.html  |  10 +-
 .../src/app/content/home/home.component.ts    |   9 +-
 .../showcase-calendar-panels.component.html   |  23 ++--
 .../showcase-calendar-panels.component.ts     |   5 +-
 .../showcase-calendar-table.component.html    |   2 +-
 .../showcase-nav-frame.component.html         |  15 ++-
 .../showcase-nav-frame.component.ts           |   4 +-
 .../src/environments/environment.prod.ts      |   2 +-
 .../src/environments/environment.ts           |   2 +-
 projects/lib-workspace/src/index.html         |  30 +++--
 projects/lib-workspace/src/main.ts            |   3 +-
 projects/lib-workspace/src/palettes.scss      | 118 ++++++++---------
 projects/lib-workspace/src/polyfills.ts       |   3 +-
 projects/lib-workspace/src/styles.scss        |  34 +++--
 projects/lib-workspace/src/test.ts            |  16 ++-
 projects/lib-workspace/tsconfig.app.json      |   9 +-
 projects/lib-workspace/tsconfig.spec.json     |  14 +--
 projects/ng-mat-components/README.md          |  20 +--
 projects/ng-mat-components/_index.scss        |   6 +-
 projects/ng-mat-components/_theme.scss        |  12 +-
 projects/ng-mat-components/karma.conf.js      |  13 +-
 projects/ng-mat-components/ng-package.json    |   5 +-
 .../ng-mat-components/src/assets/menu.svg     |   5 +
 .../src/fs-calendar/_index.scss               |   2 +-
 .../src/fs-calendar/_theme.scss               |  52 ++++----
 .../calendar-panels.component.html            | 100 ++++-----------
 .../calendar-panels.component.scss            |   4 +-
 .../calendar-panels.component.spec.ts         |   5 +-
 .../calendar-panels.component.ts              |  60 ++-------
 .../fs-calendar-table.component.html          |  10 +-
 .../fs-calendar-table.component.spec.ts       |   5 +-
 .../fs-calendar-table.component.ts            |  18 +--
 .../src/fs-calendar/fs-calendar.module.ts     |  12 +-
 .../services/fs-calendar.service.ts           | 119 ++++--------------
 .../src/fs-nav-frame/_index.scss              |   2 +-
 .../src/fs-nav-frame/_theme.scss              |  32 ++---
 .../fs-nav-frame-content.directive.ts         |   6 +-
 .../fs-nav-frame-toolbar-center.directive.ts  |   6 +-
 .../fs-nav-frame-toolbar-side.directive.ts    |   6 +-
 .../fs-nav-frame-toolbar-title.directive.ts   |   6 +-
 .../fs-nav-frame/fs-nav-frame.component.html  |  44 +++----
 .../fs-nav-frame/fs-nav-frame.component.scss  |   5 +-
 .../fs-nav-frame/fs-nav-frame.component.ts    |  22 +---
 .../src/fs-nav-frame/fs-nav-frame.module.ts   |  11 +-
 .../fs-nav-frame-toolbar.component.html       |  18 +--
 .../fs-nav-frame-toolbar.component.ts         |  12 +-
 .../src/fs-nav-frame/nav-frame.modules.ts     |  13 +-
 .../services/fs-nav-frame.service.ts          |   5 +-
 projects/ng-mat-components/src/test.ts        |  16 ++-
 projects/ng-mat-components/test.scss          |  30 ++---
 projects/ng-mat-components/tsconfig.lib.json  |   5 +-
 projects/ng-mat-components/tsconfig.spec.json |  13 +-
 tailwind.config.js                            |   6 +-
 tsconfig.json                                 |  10 +-
 73 files changed, 575 insertions(+), 753 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc
 create mode 100644 projects/ng-mat-components/src/assets/menu.svg

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..59f4ec0
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,55 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:prettier/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    // NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    },
+    // NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
+    {
+      "files": ["*.html"],
+      "excludedFiles": ["*inline-template-*.component.html"],
+      "extends": ["plugin:prettier/recommended"],
+      "rules": {
+        // NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
+        "prettier/prettier": [
+          "error",
+          {
+            "parser": "angular"
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/.github/workflows/build-gh-pages-demo.yaml b/.github/workflows/build-gh-pages-demo.yaml
index 3a32bf9..3970747 100644
--- a/.github/workflows/build-gh-pages-demo.yaml
+++ b/.github/workflows/build-gh-pages-demo.yaml
@@ -3,7 +3,7 @@ name: Build GH Pages Demo
 on:
   push:
     branches:
-      - "main"
+      - 'main'
 
 jobs:
   build-gh-pages-demo:
@@ -15,7 +15,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: "16.x"
+          node-version: '16.x'
 
       - name: install packages
         run: yarn
@@ -26,7 +26,7 @@ jobs:
         uses: actions/checkout@v3
         with:
           ref: gh-pages-demo
-          path: "gh-pages-demo"
+          path: 'gh-pages-demo'
 
       - name: Clean out old dist and copy new dist
         run: |
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 53c1ddb..e44a9a5 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -15,13 +15,13 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-        
+
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: "16.x"
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@fullstack-devops"
+          node-version: '16.x'
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@fullstack-devops'
 
       - name: install packages
         run: yarn
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 3db5e17..adfbce0 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -3,12 +3,12 @@ name: Release Package
 on:
   push:
     branches:
-      - "main"
+      - 'main'
     paths-ignore:
-      - "README.md"
-      - "docs/**"
-      - ".github/ISSUE_TEMPLATE/**"
-      - ".github/PULL_REQUEST_TEMPLATE.md"
+      - 'README.md'
+      - 'docs/**'
+      - '.github/ISSUE_TEMPLATE/**'
+      - '.github/PULL_REQUEST_TEMPLATE.md'
 
 jobs:
   create_release:
@@ -26,9 +26,9 @@ jobs:
       - name: Setup node for GitHub
         uses: actions/setup-node@v3
         with:
-          node-version: "16.x"
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@fullstack-devops"
+          node-version: '16.x'
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@fullstack-devops'
 
       - name: install packages
         run: yarn
@@ -46,10 +46,9 @@ jobs:
       - name: Setup node for npmjs
         uses: actions/setup-node@v3
         with:
-          node-version: "16.x"
-          registry-url: "https://registry.npmjs.org"
-          scope: "@fullstack-devops"
-
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@fullstack-devops'
 
       - name: npm publish to npmjs
         working-directory: dist/ng-mat-components
diff --git a/.gitignore b/.gitignore
index 09d4e4f..6bcf713 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@ projects/ng-nav-frame/README.md
 npm-debug.log
 yarn-error.log
 yarn.lock
+package-lock.json
 .yarn/
 
 # IDEs and editors
@@ -47,4 +48,4 @@ testem.log
 .DS_Store
 Thumbs.db
 .yarnrc
-package-lock.json
+package-lock.json
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..e1aaa78
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,44 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+node_modules
+npm-debug.log
+yarn-error.log
+package-lock.json
+yarn.lock
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..4ce7a55
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "bracketSameLine": true,
+  "printWidth": 160,
+  "htmlWhitespaceSensitivity": "ignore"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 4b9dce2..7ac7adc 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,7 +1,11 @@
 {
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
   "recommendations": [
     "angular.ng-template",
+    "johnpapa.Angular2",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "PKief.material-icon-theme",
+    "Mikael.Angular-BeastCode",
     "bradlc.vscode-tailwindcss"
   ]
-}
\ No newline at end of file
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e466729..1f7f72a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,11 +1,9 @@
 {
+  "editor.formatOnPaste": true,
   "editor.formatOnSave": true,
-  "editor.renderWhitespace": "all",
-  "prettier.arrowParens": "avoid",
-  "prettier.printWidth": 130,
-  "editor.tabSize": 2,
-  "files.trimTrailingWhitespace": true,
-  "files.trimFinalNewlines": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  },
   "workbench.iconTheme": "material-icon-theme",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[javascript]": {
@@ -20,10 +18,24 @@
   "[yaml]": {
     "editor.defaultFormatter": "redhat.vscode-yaml"
   },
-  "[typescript]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features"
-  },
   "[scss]": {
     "editor.defaultFormatter": "vscode.css-language-features"
   },
-}
\ No newline at end of file
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "editor.formatOnSave": true
+  },
+  "[xml]": {
+    "editor.defaultFormatter": "redhat.vscode-xml"
+  }
+}
diff --git a/README.md b/README.md
index c8e5f4b..73baa7c 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,25 @@
 # ng-mat-components
-Components for @angular/material
 
+Components for @angular/material
 
 ## Installation
 
 add to your local `.npmrc` the following line to be able to use this package:
+
 ```javascript
 @fullstack-devops:registry=https://npm.pkg.github.com
 ```
 
 And install it:
- - yarn
-    ```javascript
-    yarn add @fullstack-devops/ng-mat-components
-    ```
- - npm
-    ```javascript
-    npm install @fullstack-devops/ng-mat-components
-    ```
+
+- yarn
+  ```javascript
+  yarn add @fullstack-devops/ng-mat-components
+  ```
+- npm
+  ```javascript
+  npm install @fullstack-devops/ng-mat-components
+  ```
 
 ## Documentation
 
diff --git a/angular.json b/angular.json
index 4f8c26c..83095fe 100644
--- a/angular.json
+++ b/angular.json
@@ -58,17 +58,9 @@
             "polyfills": "projects/lib-workspace/src/polyfills.ts",
             "tsConfig": "projects/lib-workspace/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "allowedCommonJsDependencies": [
-              "moment"
-            ],
-            "assets": [
-              "projects/lib-workspace/src/favicon.ico",
-              "projects/lib-workspace/src/assets"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "projects/lib-workspace/src/styles.scss"
-            ],
+            "allowedCommonJsDependencies": ["moment"],
+            "assets": ["projects/lib-workspace/src/favicon.ico", "projects/lib-workspace/src/assets"],
+            "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "projects/lib-workspace/src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -130,18 +122,12 @@
             "tsConfig": "projects/lib-workspace/tsconfig.spec.json",
             "karmaConfig": "projects/lib-workspace/karma.conf.js",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "projects/lib-workspace/src/favicon.ico",
-              "projects/lib-workspace/src/assets"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "projects/lib-workspace/src/styles.scss"
-            ],
+            "assets": ["projects/lib-workspace/src/favicon.ico", "projects/lib-workspace/src/assets"],
+            "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "projects/lib-workspace/src/styles.scss"],
             "scripts": []
           }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 97e969b..badc73b 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "build:sass": "sass projects/ng-mat-components/_index.scss:dist/css/css",
     "build:workspace": "ng build --project lib-workspace",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -29,7 +30,6 @@
     "@angular/platform-browser": "~13.3.11",
     "@angular/platform-browser-dynamic": "~13.3.11",
     "@angular/router": "~13.3.11",
-    "autoprefixer": "^10.4.13",
     "date-fns": "^2.29.3",
     "postcss": "^8.4.20",
     "rxjs": "~7.5.6",
@@ -39,10 +39,19 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~13.3.9",
+    "@angular-eslint/builder": "13.5.0",
+    "@angular-eslint/eslint-plugin": "13.5.0",
+    "@angular-eslint/eslint-plugin-template": "13.5.0",
+    "@angular-eslint/schematics": "13.5.0",
+    "@angular-eslint/template-parser": "13.5.0",
     "@angular/cli": "~13.3.9",
     "@angular/compiler-cli": "~13.3.11",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
+    "@typescript-eslint/eslint-plugin": "5.27.1",
+    "@typescript-eslint/parser": "5.27.1",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.17.0",
     "jasmine-core": "~4.0.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
@@ -50,6 +59,8 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
     "ng-packagr": "^13.0.0",
+    "prettier": "^2.8.3",
+    "prettier-eslint": "^15.0.1",
     "sass": "^1.57.1",
     "typescript": "~4.5.2"
   }
diff --git a/projects/lib-workspace/karma.conf.js b/projects/lib-workspace/karma.conf.js
index de74d0c..0f97f95 100644
--- a/projects/lib-workspace/karma.conf.js
+++ b/projects/lib-workspace/karma.conf.js
@@ -10,7 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       jasmine: {
@@ -19,18 +19,15 @@ module.exports = function (config) {
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
       },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+      suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
       dir: require('path').join(__dirname, '../../coverage/lib-workspace'),
       subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
@@ -39,6 +36,6 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };
diff --git a/projects/lib-workspace/src/app/app-routing.module.ts b/projects/lib-workspace/src/app/app-routing.module.ts
index 788e956..2bd0ee4 100644
--- a/projects/lib-workspace/src/app/app-routing.module.ts
+++ b/projects/lib-workspace/src/app/app-routing.module.ts
@@ -51,9 +51,7 @@ export const routes: FrameRoutes = [
 ];
 
 @NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
-  ],
+  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
   exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
diff --git a/projects/lib-workspace/src/app/app.component.html b/projects/lib-workspace/src/app/app.component.html
index 0dc9bec..043569a 100644
--- a/projects/lib-workspace/src/app/app.component.html
+++ b/projects/lib-workspace/src/app/app.component.html
@@ -20,9 +20,11 @@
         <input matInput placeholder="Search" type="search" />
       </mat-form-field> -->
       <div>
-        <input type="search" id="dummy-search"
+        <input
+          type="search"
+          id="dummy-search"
           class="block w-full p-2 pl-4 text-sm text-gray-900 border border-gray-300 rounded-lg"
-          placeholder="Dummy Search">
+          placeholder="Dummy Search" />
       </div>
     </fs-nav-frame-toolbar-side>
   </fs-nav-frame-toolbar>
diff --git a/projects/lib-workspace/src/app/app.component.scss b/projects/lib-workspace/src/app/app.component.scss
index 8b13789..e69de29 100644
--- a/projects/lib-workspace/src/app/app.component.scss
+++ b/projects/lib-workspace/src/app/app.component.scss
@@ -1 +0,0 @@
-
diff --git a/projects/lib-workspace/src/app/app.component.spec.ts b/projects/lib-workspace/src/app/app.component.spec.ts
index 2217842..913c540 100644
--- a/projects/lib-workspace/src/app/app.component.spec.ts
+++ b/projects/lib-workspace/src/app/app.component.spec.ts
@@ -5,12 +5,8 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
     }).compileComponents();
   });
 
diff --git a/projects/lib-workspace/src/app/app.component.ts b/projects/lib-workspace/src/app/app.component.ts
index 39684ee..9949861 100644
--- a/projects/lib-workspace/src/app/app.component.ts
+++ b/projects/lib-workspace/src/app/app.component.ts
@@ -2,12 +2,7 @@ import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 import localeDeExtra from '@angular/common/locales/extra/de';
 import { Component, OnInit } from '@angular/core';
-import {
-  FrameConfig,
-  FrameEvent,
-  FrameEvents,
-  NavUser,
-} from 'projects/ng-mat-components/src/public-api';
+import { FrameConfig, FrameEvent, FrameEvents, NavUser } from 'projects/ng-mat-components/src/public-api';
 import { routes } from './app-routing.module';
 
 @Component({
@@ -25,8 +20,7 @@ export class AppComponent implements OnInit {
     logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
   };
   navUser: NavUser = {
-    profilePicture:
-      'https://material.angular.io/assets/img/examples/shiba1.jpg',
+    profilePicture: 'https://material.angular.io/assets/img/examples/shiba1.jpg',
     name: 'Some User',
     role: 'Engineer',
   };
diff --git a/projects/lib-workspace/src/app/app.module.ts b/projects/lib-workspace/src/app/app.module.ts
index 00d96a9..8cb9da5 100644
--- a/projects/lib-workspace/src/app/app.module.ts
+++ b/projects/lib-workspace/src/app/app.module.ts
@@ -9,25 +9,14 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 import { MAT_DATE_LOCALE } from '@angular/material/core';
-import {
-  FsCalendarModule,
-  FsCalendarService,
-  FsMaterialFullModule,
-  FsNavFrameModule,
-} from 'projects/ng-mat-components/src/public-api';
+import { FsCalendarModule, FsCalendarService, FsMaterialFullModule, FsNavFrameModule } from 'projects/ng-mat-components/src/public-api';
 import { HomeComponent } from './content/home/home.component';
 import { ShowcaseCalendarPanelsComponent } from './content/showcase-calendar-panels/showcase-calendar-panels.component';
 import { ShowcaseCalendarTableComponent } from './content/showcase-calendar-table/showcase-calendar-table.component';
 import { ShowcaseNavFrameComponent } from './content/showcase-nav-frame/showcase-nav-frame.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    ShowcaseCalendarPanelsComponent,
-    ShowcaseCalendarTableComponent,
-    ShowcaseNavFrameComponent,
-  ],
+  declarations: [AppComponent, HomeComponent, ShowcaseCalendarPanelsComponent, ShowcaseCalendarTableComponent, ShowcaseNavFrameComponent],
   imports: [
     FormsModule,
     BrowserModule,
@@ -54,4 +43,4 @@ import { ShowcaseNavFrameComponent } from './content/showcase-nav-frame/showcase
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/projects/lib-workspace/src/app/content/home/home.component.html b/projects/lib-workspace/src/app/content/home/home.component.html
index 9b92680..5580b71 100644
--- a/projects/lib-workspace/src/app/content/home/home.component.html
+++ b/projects/lib-workspace/src/app/content/home/home.component.html
@@ -3,10 +3,7 @@
     <img mat-card-image src="assets/nav-frame-shot.png" alt="Screenshot of Nav Frame" />
     <mat-card-title>Nav Frame</mat-card-title>
     <mat-card-content>
-      <p>
-        Bootstrap your Nav with this nice template and start right away with
-        valuable content.
-      </p>
+      <p>Bootstrap your Nav with this nice template and start right away with valuable content.</p>
     </mat-card-content>
   </mat-card>
 
@@ -22,10 +19,7 @@
     <img mat-card-image src="assets/calendar-table-shot.png" alt="Screenshot of Calendar Table" />
     <mat-card-title>Calendar Table</mat-card-title>
     <mat-card-content>
-      <p>
-        The perfect complement to the calendar panels when it comes to several
-        independent entries.
-      </p>
+      <p>The perfect complement to the calendar panels when it comes to several independent entries.</p>
     </mat-card-content>
   </mat-card>
 </div>
diff --git a/projects/lib-workspace/src/app/content/home/home.component.ts b/projects/lib-workspace/src/app/content/home/home.component.ts
index 33cc034..5f47fe4 100644
--- a/projects/lib-workspace/src/app/content/home/home.component.ts
+++ b/projects/lib-workspace/src/app/content/home/home.component.ts
@@ -3,13 +3,10 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'lib-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css']
+  styleUrls: ['./home.component.css'],
 })
 export class HomeComponent implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+  ngOnInit() {}
 }
diff --git a/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.html b/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.html
index b0e1cb6..d54c106 100644
--- a/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.html
+++ b/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.html
@@ -1,24 +1,18 @@
 <div style="display: flex; justify-content: space-around">
-  <mat-slide-toggle [(ngModel)]="placeholder">
-    Days placeholder
-  </mat-slide-toggle>
+  <mat-slide-toggle [(ngModel)]="placeholder">Days placeholder</mat-slide-toggle>
 </div>
 
 <div class="selection">
   <mat-form-field>
     <mat-label>Months before</mat-label>
     <mat-select [(ngModel)]="monthsBefore">
-      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{
-        num
-        }}</mat-option>
+      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{ num }}</mat-option>
     </mat-select>
   </mat-form-field>
   <mat-form-field>
     <mat-label>Months after</mat-label>
     <mat-select [(ngModel)]="monthsAfter">
-      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{
-        num
-        }}</mat-option>
+      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{ num }}</mat-option>
     </mat-select>
   </mat-form-field>
   <div>
@@ -27,7 +21,12 @@
 </div>
 
 <div style="height: 80%">
-  <fs-calendar-panels [placeholderDay]="placeholder" [dataSource]="dataSource" [year]="todayYear" [month]="todayMonth"
-    [monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" (selection)="testMethod($event)">
-  </fs-calendar-panels>
+  <fs-calendar-panels
+    [placeholderDay]="placeholder"
+    [dataSource]="dataSource"
+    [year]="todayYear"
+    [month]="todayMonth"
+    [monthsBefore]="monthsBefore"
+    [monthsAfter]="monthsAfter"
+    (selection)="testMethod($event)"></fs-calendar-panels>
 </div>
diff --git a/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts b/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts
index 3082b7e..b165199 100644
--- a/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts
+++ b/projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts
@@ -1,8 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {
-  CalendarEvent,
-  CalendarPanels,
-} from 'projects/ng-mat-components/src/public-api';
+import { CalendarEvent, CalendarPanels } from 'projects/ng-mat-components/src/public-api';
 
 @Component({
   selector: 'app-showcase-calendar-panels',
diff --git a/projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.html b/projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.html
index 5392b65..0e1fa4b 100644
--- a/projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.html
+++ b/projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.html
@@ -1,3 +1,3 @@
 <fs-calendar-table class="mat-elevation-z4" [dataSource]="calTableData">
-  <fs-calendar-table-name> Persons </fs-calendar-table-name>
+  <fs-calendar-table-name>Persons</fs-calendar-table-name>
 </fs-calendar-table>
diff --git a/projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.html b/projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.html
index 71331c2..25c678a 100644
--- a/projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.html
+++ b/projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.html
@@ -1,17 +1,16 @@
 <div style="height: 300px; display: flex">
   <div style="width: 100%; display: flex; justify-content: space-between">
     <p>
-      &#8593; Title can be changed vis contend projection <br /><br />
-      Note: The toolbar is optional, but then you have to implement your own
-      solution!<br />
-      This one is also slightly thinner than the original material bar in
-      height.
+      &#8593; Title can be changed vis contend projection
+      <br />
+      <br />
+      Note: The toolbar is optional, but then you have to implement your own solution!
+      <br />
+      This one is also slightly thinner than the original material bar in height.
     </p>
     <p>&#8593; use perdifined content or your own</p>
     <p>&#8593; like this search</p>
   </div>
 
-  <p style="position: absolute; top: 200px">
-    &#8592; In the sidenav you can set preregisterd entrys
-  </p>
+  <p style="position: absolute; top: 200px">&#8592; In the sidenav you can set preregisterd entrys</p>
 </div>
diff --git a/projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.ts b/projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.ts
index 1b7c2c8..244be4a 100644
--- a/projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.ts
+++ b/projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.ts
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./showcase-nav-frame.component.css'],
 })
 export class ShowcaseNavFrameComponent implements OnInit {
-  constructor() { }
+  constructor() {}
 
-  ngOnInit() { }
+  ngOnInit() {}
 }
diff --git a/projects/lib-workspace/src/environments/environment.prod.ts b/projects/lib-workspace/src/environments/environment.prod.ts
index 3612073..c966979 100644
--- a/projects/lib-workspace/src/environments/environment.prod.ts
+++ b/projects/lib-workspace/src/environments/environment.prod.ts
@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
 };
diff --git a/projects/lib-workspace/src/environments/environment.ts b/projects/lib-workspace/src/environments/environment.ts
index f56ff47..66998ae 100644
--- a/projects/lib-workspace/src/environments/environment.ts
+++ b/projects/lib-workspace/src/environments/environment.ts
@@ -3,7 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
 };
 
 /*
diff --git a/projects/lib-workspace/src/index.html b/projects/lib-workspace/src/index.html
index be1e016..1844993 100644
--- a/projects/lib-workspace/src/index.html
+++ b/projects/lib-workspace/src/index.html
@@ -1,19 +1,17 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>LibWorkspace</title>
+    <base href="." />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>LibWorkspace</title>
-  <base href=".">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-
-<body class="mat-typography">
-  <app-root></app-root>
-</body>
-
+  <body class="mat-typography">
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/projects/lib-workspace/src/main.ts b/projects/lib-workspace/src/main.ts
index c7b673c..fa4e0ae 100644
--- a/projects/lib-workspace/src/main.ts
+++ b/projects/lib-workspace/src/main.ts
@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
   .catch(err => console.error(err));
diff --git a/projects/lib-workspace/src/palettes.scss b/projects/lib-workspace/src/palettes.scss
index 332574d..00b1a7c 100644
--- a/projects/lib-workspace/src/palettes.scss
+++ b/projects/lib-workspace/src/palettes.scss
@@ -2,65 +2,67 @@
 
 /* For use in src/lib/core/theming/_palette.scss */
 $md-primary: (
-  50 : #eaefe8,
-  100 : #c9d8c5,
-  200 : #a6be9e,
-  300 : #82a377,
-  400 : #679059,
-  500 : #4c7c3c,
-  600 : #457436,
-  700 : #3c692e,
-  800 : #335f27,
-  900 : #244c1a,
-  A100 : #9fff8b,
-  A200 : #75ff58,
-  A400 : #4bff25,
-  A700 : #36ff0c,
-  contrast: (50 : #000000,
-    100 : #000000,
-    200 : #000000,
-    300 : #000000,
-    400 : #ffffff,
-    500 : #ffffff,
-    600 : #ffffff,
-    700 : #ffffff,
-    800 : #ffffff,
-    900 : #ffffff,
-    A100 : #000000,
-    A200 : #000000,
-    A400 : #000000,
-    A700 : #000000,
-  )
+  50: #eaefe8,
+  100: #c9d8c5,
+  200: #a6be9e,
+  300: #82a377,
+  400: #679059,
+  500: #4c7c3c,
+  600: #457436,
+  700: #3c692e,
+  800: #335f27,
+  900: #244c1a,
+  A100: #9fff8b,
+  A200: #75ff58,
+  A400: #4bff25,
+  A700: #36ff0c,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
 );
 
 $md-accent: (
-  50 : #edf3f3,
-  100 : #d3e0e1,
-  200 : #b5cccd,
-  300 : #97b8b9,
-  400 : #81a8aa,
-  500 : #6b999b,
-  600 : #639193,
-  700 : #588689,
-  800 : #4e7c7f,
-  900 : #3c6b6d,
-  A100 : #c2fbff,
-  A200 : #8ff8ff,
-  A400 : #5cf5ff,
-  A700 : #42f4ff,
-  contrast: (50 : #000000,
-    100 : #000000,
-    200 : #000000,
-    300 : #000000,
-    400 : #000000,
-    500 : #000000,
-    600 : #000000,
-    700 : #ffffff,
-    800 : #ffffff,
-    900 : #ffffff,
-    A100 : #000000,
-    A200 : #000000,
-    A400 : #000000,
-    A700 : #000000,
-  )
+  50: #edf3f3,
+  100: #d3e0e1,
+  200: #b5cccd,
+  300: #97b8b9,
+  400: #81a8aa,
+  500: #6b999b,
+  600: #639193,
+  700: #588689,
+  800: #4e7c7f,
+  900: #3c6b6d,
+  A100: #c2fbff,
+  A200: #8ff8ff,
+  A400: #5cf5ff,
+  A700: #42f4ff,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #000000,
+    600: #000000,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
 );
diff --git a/projects/lib-workspace/src/polyfills.ts b/projects/lib-workspace/src/polyfills.ts
index 429bb9e..e4555ed 100644
--- a/projects/lib-workspace/src/polyfills.ts
+++ b/projects/lib-workspace/src/polyfills.ts
@@ -45,8 +45,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js';  // Included with Angular CLI.
-
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
diff --git a/projects/lib-workspace/src/styles.scss b/projects/lib-workspace/src/styles.scss
index cf9ca09..b748885 100644
--- a/projects/lib-workspace/src/styles.scss
+++ b/projects/lib-workspace/src/styles.scss
@@ -1,23 +1,31 @@
 @use '@angular/material' as mat;
-@use "../../ng-mat-components" as fsc;
-@use "./palettes";
+@use '../../ng-mat-components' as fsc;
+@use './palettes';
 
 @include mat.core();
 
 // Define a dark theme
-$dark-theme: mat.define-dark-theme((color: (primary: mat.define-palette(palettes.$md-primary),
-        accent: mat.define-palette(palettes.$md-accent),
-      ),
-      // Only include `typography` and `density` in the default dark theme.
-      typography: mat.define-typography-config(),
-      density: 0,
-    ));
+$dark-theme: mat.define-dark-theme(
+  (
+    color: (
+      primary: mat.define-palette(palettes.$md-primary),
+      accent: mat.define-palette(palettes.$md-accent),
+    ),
+    // Only include `typography` and `density` in the default dark theme.
+    typography: mat.define-typography-config(),
+    density: 0,
+  )
+);
 
 // Define a light theme
-$light-theme: mat.define-light-theme((color: (primary: mat.define-palette(palettes.$md-primary),
-        accent: mat.define-palette(palettes.$md-accent),
-      ),
-    ));
+$light-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: mat.define-palette(palettes.$md-primary),
+      accent: mat.define-palette(palettes.$md-accent),
+    ),
+  )
+);
 
 // Apply the dark theme by default
 @include mat.all-component-themes($dark-theme);
diff --git a/projects/lib-workspace/src/test.ts b/projects/lib-workspace/src/test.ts
index 00025da..437ca40 100644
--- a/projects/lib-workspace/src/test.ts
+++ b/projects/lib-workspace/src/test.ts
@@ -2,23 +2,21 @@
 
 import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
     <T>(id: string): T;
     keys(): string[];
   };
 };
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
 
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
diff --git a/projects/lib-workspace/tsconfig.app.json b/projects/lib-workspace/tsconfig.app.json
index fd37f74..c3c4837 100644
--- a/projects/lib-workspace/tsconfig.app.json
+++ b/projects/lib-workspace/tsconfig.app.json
@@ -5,11 +5,6 @@
     "outDir": "../../out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
 }
diff --git a/projects/lib-workspace/tsconfig.spec.json b/projects/lib-workspace/tsconfig.spec.json
index b66a2f0..558b74c 100644
--- a/projects/lib-workspace/tsconfig.spec.json
+++ b/projects/lib-workspace/tsconfig.spec.json
@@ -3,16 +3,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/test.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }
diff --git a/projects/ng-mat-components/README.md b/projects/ng-mat-components/README.md
index c8e5f4b..73baa7c 100644
--- a/projects/ng-mat-components/README.md
+++ b/projects/ng-mat-components/README.md
@@ -1,23 +1,25 @@
 # ng-mat-components
-Components for @angular/material
 
+Components for @angular/material
 
 ## Installation
 
 add to your local `.npmrc` the following line to be able to use this package:
+
 ```javascript
 @fullstack-devops:registry=https://npm.pkg.github.com
 ```
 
 And install it:
- - yarn
-    ```javascript
-    yarn add @fullstack-devops/ng-mat-components
-    ```
- - npm
-    ```javascript
-    npm install @fullstack-devops/ng-mat-components
-    ```
+
+- yarn
+  ```javascript
+  yarn add @fullstack-devops/ng-mat-components
+  ```
+- npm
+  ```javascript
+  npm install @fullstack-devops/ng-mat-components
+  ```
 
 ## Documentation
 
diff --git a/projects/ng-mat-components/_index.scss b/projects/ng-mat-components/_index.scss
index 7f28997..9acaecc 100644
--- a/projects/ng-mat-components/_index.scss
+++ b/projects/ng-mat-components/_index.scss
@@ -1,4 +1,4 @@
-@use "sass:color";
-@use "sass:map";
+@use 'sass:color';
+@use 'sass:map';
 
-@forward "theme" show all-component-themes;
+@forward 'theme' show all-component-themes;
diff --git a/projects/ng-mat-components/_theme.scss b/projects/ng-mat-components/_theme.scss
index 747b9a2..3f9b4fb 100644
--- a/projects/ng-mat-components/_theme.scss
+++ b/projects/ng-mat-components/_theme.scss
@@ -1,22 +1,21 @@
-@use "src/fs-calendar";
-@use "src/fs-nav-frame";
+@use 'src/fs-calendar';
+@use 'src/fs-nav-frame';
 
 @mixin all-component-themes($theme) {
   // Extract whichever individual palettes you need from the theme.
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   // Gets the standard material maps of fore/background
-  $background: map-get($theme, "background");
-  $foreground: map-get($theme, "foreground");
+  $background: map-get($theme, 'background');
+  $foreground: map-get($theme, 'foreground');
 
   @include fs-calendar.fs-calendar-theme($theme);
   @include fs-nav-frame.fs-nav-frame-theme($theme);
 
   .svg-icon svg {
-    fill: map-get($foreground, "text");
+    fill: map-get($foreground, 'text');
   }
 
-
   /* Tooltip container */
   .tooltip {
     position: relative;
@@ -57,5 +56,4 @@
     visibility: visible;
     opacity: 1;
   }
-
 }
diff --git a/projects/ng-mat-components/karma.conf.js b/projects/ng-mat-components/karma.conf.js
index 1c2dd1a..134bf28 100644
--- a/projects/ng-mat-components/karma.conf.js
+++ b/projects/ng-mat-components/karma.conf.js
@@ -10,7 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       jasmine: {
@@ -19,18 +19,15 @@ module.exports = function (config) {
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
       },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+      suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
       dir: require('path').join(__dirname, '../../coverage/ng-mat-components'),
       subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
@@ -39,6 +36,6 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };
diff --git a/projects/ng-mat-components/ng-package.json b/projects/ng-mat-components/ng-package.json
index 70b716d..28fa507 100644
--- a/projects/ng-mat-components/ng-package.json
+++ b/projects/ng-mat-components/ng-package.json
@@ -4,8 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "assets": [
-    "./_index.scss",
-    "./_theming.scss"
-  ]
+  "assets": ["./_index.scss", "./_theming.scss"]
 }
diff --git a/projects/ng-mat-components/src/assets/menu.svg b/projects/ng-mat-components/src/assets/menu.svg
new file mode 100644
index 0000000..809729b
--- /dev/null
+++ b/projects/ng-mat-components/src/assets/menu.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+    fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+</svg>
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-calendar/_index.scss b/projects/ng-mat-components/src/fs-calendar/_index.scss
index befc25f..9f79221 100644
--- a/projects/ng-mat-components/src/fs-calendar/_index.scss
+++ b/projects/ng-mat-components/src/fs-calendar/_index.scss
@@ -1 +1 @@
-@forward "theme" show fs-calendar-theme;
+@forward 'theme' show fs-calendar-theme;
diff --git a/projects/ng-mat-components/src/fs-calendar/_theme.scss b/projects/ng-mat-components/src/fs-calendar/_theme.scss
index eddc0be..7b650bd 100644
--- a/projects/ng-mat-components/src/fs-calendar/_theme.scss
+++ b/projects/ng-mat-components/src/fs-calendar/_theme.scss
@@ -3,59 +3,59 @@
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   // Gets the standard material maps of fore/background
-  $background: map-get($theme, "background");
-  $foreground: map-get($theme, "foreground");
+  $background: map-get($theme, 'background');
+  $foreground: map-get($theme, 'foreground');
 
   .fs-calendar-body-today {
-    border: 1px solid map-get($foreground, "secondary-text");
+    border: 1px solid map-get($foreground, 'secondary-text');
   }
 
   .fs-calendar-switches svg {
-    fill: map-get($foreground, "base");
+    fill: map-get($foreground, 'base');
   }
 
   .placeholderDay {
-    color: map-get($foreground, "hint-text");
+    color: map-get($foreground, 'hint-text');
   }
 
   .fs-calendar-table-header tr:first-child {
-    border-bottom: solid 1px map-get($foreground, "divider");
-    color: map-get($foreground, "secondary-text");
+    border-bottom: solid 1px map-get($foreground, 'divider');
+    color: map-get($foreground, 'secondary-text');
   }
 
   .kw {
-    border-right: solid 1px map-get($foreground, "divider");
-    color: map-get($foreground, "secondary-text");
+    border-right: solid 1px map-get($foreground, 'divider');
+    color: map-get($foreground, 'secondary-text');
   }
 
   .clickable:hover {
-    background-color: map-get($primary, "lighter");
+    background-color: map-get($primary, 'lighter');
   }
 
   .weekend {
-    background-color: map-get($foreground, "divider");
+    background-color: map-get($foreground, 'divider');
   }
 
   .date-between::after,
   .selected-start::after,
   .selected-end::after {
-    border-top: dashed 1px map-get($foreground, "secondary-text");
-    border-bottom: dashed 1px map-get($foreground, "secondary-text");
+    border-top: dashed 1px map-get($foreground, 'secondary-text');
+    border-bottom: dashed 1px map-get($foreground, 'secondary-text');
   }
 
   .selected-set.date-between {
-    color: map-get($primary, "lighter-contrast");
+    color: map-get($primary, 'lighter-contrast');
   }
 
   .selected-set.date-between::after,
   .selected-set.selected-start::after,
   .selected-set.selected-end::after {
-    background-color: map-get($primary, "lighter");
+    background-color: map-get($primary, 'lighter');
   }
 
   .selected-set.selected-start,
   .selected-set.selected-end {
-    color: map-get($primary, "secondary-text");
+    color: map-get($primary, 'secondary-text');
   }
 
   .selected-start::before,
@@ -64,25 +64,27 @@
   }
 
   .blured-days::after {
-    content: "";
-    background: radial-gradient(circle at center,
-        map-get($background, "background") 0,
-        map-get($background, "background") 12px,
-        transparent 14px,
-        transparent 100%);
+    content: '';
+    background: radial-gradient(
+      circle at center,
+      map-get($background, 'background') 0,
+      map-get($background, 'background') 12px,
+      transparent 14px,
+      transparent 100%
+    );
   }
 
   .fs-calendar-table table thead tr th {
-    border-bottom: solid 1px map-get($foreground, "divider");
+    border-bottom: solid 1px map-get($foreground, 'divider');
   }
 
   .fs-calendar-table-helper,
   .fs-calendar-month {
-    background-color: map-get($background, "card");
+    background-color: map-get($background, 'card');
   }
 
   .fs-calendar-table .box-base {
-    background-color: map-get($foreground, "divider");
+    background-color: map-get($foreground, 'divider');
   }
 
   .fs-calendar-table .date-today {
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.html b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.html
index 0810233..973cf2d 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.html
+++ b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.html
@@ -1,30 +1,15 @@
 <div class="fs-calendar-helper" *ngIf="calendar != undefined">
-  <ng-container
-    *ngFor="let month of calendar.calendarPanels; let iMonth = index"
-  >
+  <ng-container *ngFor="let month of calendar.calendarPanels; let iMonth = index">
     <div class="fs-calendar-month mat-elevation-z4">
       <div class="month-header">
         <button
           mat-icon-button
           (click)="onMonthBackward()"
           class="fs-calendar-switches"
-          *ngIf="
-            dataSource.config.switches &&
-              dataSource.config.renderMode != 'annual' &&
-              iMonth == 0;
-            else elseAfterBackward
-          "
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24px"
-            height="24px"
-          >
+          *ngIf="dataSource.config.switches && dataSource.config.renderMode != 'annual' && iMonth == 0; else elseAfterBackward">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
             <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
-            />
+            <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" />
           </svg>
         </button>
         <ng-template #elseAfterBackward>
@@ -32,25 +17,14 @@
         </ng-template>
         <div>
           {{ month.monthName }}
-          {{ dataSource.config.displayYear ? month.year : "" }}
+          {{ dataSource.config.displayYear ? month.year : '' }}
         </div>
         <button
           mat-icon-button
           (click)="onMonthForward()"
           class="fs-calendar-switches"
-          *ngIf="
-            dataSource.config.switches &&
-              dataSource.config.renderMode != 'annual' &&
-              calendar.calendarPanels.length == iMonth + 1;
-            else elseAfterForward
-          "
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24px"
-            height="24px"
-          >
+          *ngIf="dataSource.config.switches && dataSource.config.renderMode != 'annual' && calendar.calendarPanels.length == iMonth + 1; else elseAfterForward">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
             <path d="M0 0h24v24H0V0z" fill="none" />
             <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
           </svg>
@@ -59,10 +33,7 @@
           <div style="width: 40px"></div>
         </ng-template>
       </div>
-      <table
-        class="fs-calendar-table"
-        [style.width]="dataSource.config.panelWidth"
-      >
+      <table class="fs-calendar-table" [style.width]="dataSource.config.panelWidth">
         <thead class="fs-calendar-table-header">
           <tr>
             <th scope="col" *ngIf="dataSource.config.calendarWeek"></th>
@@ -71,11 +42,7 @@
             </th>
           </tr>
           <tr>
-            <th
-              scope="col"
-              *ngIf="dataSource.config.calendarWeek"
-              class="kw"
-            ></th>
+            <th scope="col" *ngIf="dataSource.config.calendarWeek" class="kw"></th>
             <th scope="col" style="height: 10px"></th>
           </tr>
         </thead>
@@ -90,13 +57,8 @@
                   *ngIf="day._meta?.type == 'day'"
                   [ngClass]="dataSource.config.calendarWeek ? 'eight' : 'seven'"
                   (click)="onClick(day, 'date')"
-                  (mouseenter)="onMouseOver(day.date)"
-                >
-                  <ul
-                    class="tooltiptext"
-                    *ngIf="day.toolTip"
-                    [innerHTML]="day.toolTip"
-                  >
+                  (mouseenter)="onMouseOver(day.date)">
+                  <ul class="tooltiptext" *ngIf="day.toolTip" [innerHTML]="day.toolTip">
                     <!-- {{  }} -->
                   </ul>
                   <div
@@ -105,23 +67,15 @@
                     [class.selected-set]="getCanIBeHighlighted(day.date)"
                     [class.selected-start]="isSelectedDayStart(day.date)"
                     [class.selected-end]="isSelectedDayEnd(day.date)"
-                    [class.date-between]="getAmIBetween(day.date)"
-                  >
+                    [class.date-between]="getAmIBetween(day.date)">
                     {{ day._meta?.dayNumber }}
                   </div>
                   <div
                     class="fs-calendar-body-cell-content"
                     style="z-index: -3; border-radius: 4px"
-                    [class.weekend]="
-                      day._meta?.isWeekendDay &&
-                      day.colors?.backgroundColor != '' &&
-                      markWeekend
-                    "
-                    [class.blured-days]="
-                      bluredDays && day.colors?.backgroundColor
-                    "
-                    [ngStyle]="{ background: day.colors?.backgroundColor }"
-                  >
+                    [class.weekend]="day._meta?.isWeekendDay && day.colors?.backgroundColor != '' && markWeekend"
+                    [class.blured-days]="bluredDays && day.colors?.backgroundColor"
+                    [ngStyle]="{ background: day.colors?.backgroundColor }">
                     <!-- <ng-container
                         *ngIf="day.hasOwnProperty('badgeMode') && day.date != selectedDayStart && day.date != selectedDayEnd">
                         <span class="fs-calendar-badge fs-calendar-badge-int" *ngIf="day.badgeMode == 'Int'">
@@ -141,15 +95,9 @@
                   class="fs-calendar-body-cell kw"
                   tabindex="-1"
                   *ngIf="day._meta?.type == 'cw'"
-                  [ngClass]="dataSource.config.calendarWeek ? 'eight' : 'seven'"
-                >
-                  <div
-                    *ngIf="
-                      row[iDay + 1]._meta?.type == 'plHolder' && iRender != 0;
-                      else normalKW
-                    "
-                  >
-                    {{ placeholderDay ? day._meta?.kw : "" }}
+                  [ngClass]="dataSource.config.calendarWeek ? 'eight' : 'seven'">
+                  <div *ngIf="row[iDay + 1]._meta?.type == 'plHolder' && iRender != 0; else normalKW">
+                    {{ placeholderDay ? day._meta?.kw : '' }}
                   </div>
                   <ng-template #normalKW>
                     <div>{{ day._meta?.kw }}</div>
@@ -162,8 +110,7 @@
                   tabindex="-1"
                   (click)="onClick(day, 'placeholderDay')"
                   *ngIf="day._meta?.type == 'plHolder' && placeholderDay"
-                  [ngClass]="dataSource.config.calendarWeek ? 'eight' : 'seven'"
-                >
+                  [ngClass]="dataSource.config.calendarWeek ? 'eight' : 'seven'">
                   <div class="fs-calendar-body-cell-content">
                     {{ day._meta?.dayNumber }}
                   </div>
@@ -173,18 +120,13 @@
                   class="fs-calendar-body-cell"
                   tabindex="-1"
                   *ngIf="day._meta?.type == 'plHolder' && !placeholderDay"
-                  [ngClass]="dataSource.config.calendarWeek ? 'eight' : 'seven'"
-                >
+                  [ngClass]="dataSource.config.calendarWeek ? 'eight' : 'seven'">
                   <div></div>
                 </td>
               </ng-container>
             </tr>
             <tr>
-              <th
-                scope="col"
-                *ngIf="dataSource.config.calendarWeek"
-                class="kw"
-              ></th>
+              <th scope="col" *ngIf="dataSource.config.calendarWeek" class="kw"></th>
               <th scope="col" style="height: 5px"></th>
             </tr>
           </ng-container>
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.scss b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.scss
index ae7d797..2c4f82b 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.scss
+++ b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.scss
@@ -84,12 +84,12 @@
 }
 
 .fs-calendar-body-cell-content::before {
-  content: "";
+  content: '';
   z-index: -1;
 }
 
 .fs-calendar-body-cell-content::after {
-  content: "";
+  content: '';
   z-index: -2;
 }
 
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.spec.ts b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.spec.ts
index 96200e4..075754c 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.spec.ts
+++ b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.spec.ts
@@ -11,9 +11,8 @@ describe('CalendarPanelsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CalendarPanelsComponent ]
-    })
-    .compileComponents();
+      declarations: [CalendarPanelsComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts
index 049a0e2..fa6781e 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts
+++ b/projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts
@@ -1,18 +1,6 @@
-import {
-  Component,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
 import * as dateFns from 'date-fns';
-import {
-  CalendarEvent,
-  CalendarExtendedDay,
-  CalendarPanels,
-  CalendarPanelSum,
-} from '../calendar.models';
+import { CalendarEvent, CalendarExtendedDay, CalendarPanels, CalendarPanelSum } from '../calendar.models';
 import { FsCalendarService } from '../services/fs-calendar.service';
 
 @Component({
@@ -119,18 +107,12 @@ export class FsCalendarPanelsComponent implements OnInit {
 
   onClick(day: CalendarExtendedDay, type: string) {
     if (type === 'date' && this._dataSource.config.selectMode === 'range') {
-      if (
-        this.selectedDayStart != undefined &&
-        this.selectedDayEnd != undefined
-      ) {
+      if (this.selectedDayStart != undefined && this.selectedDayEnd != undefined) {
         this.selectedDayBetween = [];
         this.selectedDayStart = undefined;
         this.selectedDayEnd = undefined;
       }
-      if (
-        dateFns.isBefore(day.date, this.selectedDayStart as Date) ||
-        this.selectedDayStart === undefined
-      ) {
+      if (dateFns.isBefore(day.date, this.selectedDayStart as Date) || this.selectedDayStart === undefined) {
         this.selectedDayStart = day.date;
       } else {
         this.selectedDayEnd = day.date;
@@ -150,22 +132,16 @@ export class FsCalendarPanelsComponent implements OnInit {
 
   onMouseOver(dateComp: Date) {
     if (this.calendar != undefined) {
-      if (
-        this.selectedDayStart != undefined &&
-        this.selectedDayEnd == undefined
-      ) {
-        this.selectedDayBetween = this.calendar.daysAbsolute.filter((date) => {
-          return (
-            dateFns.isAfter(date, this.selectedDayStart as Date) &&
-            dateFns.isBefore(date, dateComp)
-          );
+      if (this.selectedDayStart != undefined && this.selectedDayEnd == undefined) {
+        this.selectedDayBetween = this.calendar.daysAbsolute.filter(date => {
+          return dateFns.isAfter(date, this.selectedDayStart as Date) && dateFns.isBefore(date, dateComp);
         });
       }
     }
   }
 
   getAmIBetween(date: Date): boolean {
-    const fIndex = this.selectedDayBetween.findIndex((selDate) => {
+    const fIndex = this.selectedDayBetween.findIndex(selDate => {
       return dateFns.isSameDay(selDate, date);
     });
     if (fIndex != -1) {
@@ -187,15 +163,7 @@ export class FsCalendarPanelsComponent implements OnInit {
       return dateFns.isSameDay(this.selectedDayEnd, date);
     } else {
       if (this.selectedDayBetween.length > 0) {
-        if (
-          dateFns.isSameDay(
-            dateFns.addDays(
-              this.selectedDayBetween[this.selectedDayBetween.length - 1],
-              1
-            ),
-            date
-          )
-        ) {
+        if (dateFns.isSameDay(dateFns.addDays(this.selectedDayBetween[this.selectedDayBetween.length - 1], 1), date)) {
           return true;
         }
       }
@@ -210,13 +178,9 @@ export class FsCalendarPanelsComponent implements OnInit {
   getCanIBeHighlighted(date: Date) {
     if (this.selectedDayEnd) {
       if (
-        (!dateFns.isSameDay(this.selectedDayStart as Date, date) &&
-          !dateFns.isSameDay(this.selectedDayEnd, date) &&
-          this.getAmIBetween(date)) ||
-        (dateFns.isSameDay(this.selectedDayEnd, date) &&
-          this.selectedDayEnd != undefined) ||
-        (dateFns.isSameDay(this.selectedDayStart as Date, date) &&
-          this.selectedDayStart != undefined)
+        (!dateFns.isSameDay(this.selectedDayStart as Date, date) && !dateFns.isSameDay(this.selectedDayEnd, date) && this.getAmIBetween(date)) ||
+        (dateFns.isSameDay(this.selectedDayEnd, date) && this.selectedDayEnd != undefined) ||
+        (dateFns.isSameDay(this.selectedDayStart as Date, date) && this.selectedDayStart != undefined)
       ) {
         return true;
       } else {
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.html b/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.html
index d44de2c..b2f0be9 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.html
+++ b/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.html
@@ -1,5 +1,4 @@
 <div class="fs-calendar-table-helper">
-
   <table *ngIf="!isLoading">
     <thead role="rowgroup">
       <tr>
@@ -15,8 +14,9 @@
           </button>
         </th>
         <th *ngFor="let day of currentMonth.days" [class.date-today]="isToday(day.date)">
-          {{ day._meta?.dayNumber }} <br />
-          {{ day.date | date: "EEEEEE" }}
+          {{ day._meta?.dayNumber }}
+          <br />
+          {{ day.date | date : 'EEEEEE' }}
         </th>
         <th>
           <button mat-icon-button class="fs-calendar-switches" (click)="onMonthForward()">
@@ -34,8 +34,7 @@
         <td colspan="2">{{ entry.name }}</td>
         <td *ngFor="let day of entry.data" [class.tooltip]="day.toolTip">
           <span class="tooltiptext" *ngIf="day.toolTip">{{ day.toolTip }}</span>
-          <div class="box box-base" [style.backgroundColor]="day.colors?.backgroundColor"
-            [style.color]="day.colors?.color">
+          <div class="box box-base" [style.backgroundColor]="day.colors?.backgroundColor" [style.color]="day.colors?.color">
             {{ day.char }}
           </div>
         </td>
@@ -43,5 +42,4 @@
       </tr>
     </tbody>
   </table>
-
 </div>
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.spec.ts b/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.spec.ts
index 1b21356..f3c9324 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.spec.ts
+++ b/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.spec.ts
@@ -11,9 +11,8 @@ describe('FsCalendarTableComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FsCalendarTableComponent ]
-    })
-    .compileComponents();
+      declarations: [FsCalendarTableComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts b/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts
index cf881b5..e0c9ce3 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts
+++ b/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts
@@ -18,11 +18,7 @@ export class FsCalendarTableComponent implements OnInit {
   private _yearNumber: number = dateFns.getYear(new Date());
   private _dataSource: CalendarTableEntry[] = [];
 
-  currentMonth: CalendarMonth = this.calendarService.generateMonth(
-    this._yearNumber,
-    this._monthNumber,
-    []
-  );
+  currentMonth: CalendarMonth = this.calendarService.generateMonth(this._yearNumber, this._monthNumber, []);
   tableData: CalendarTableEntry[] = [];
 
   get dataSource(): CalendarTableEntry[] {
@@ -60,19 +56,11 @@ export class FsCalendarTableComponent implements OnInit {
   }
 
   genMonthData() {
-    this.currentMonth = this.calendarService.generateMonth(
-      this._yearNumber,
-      this._monthNumber,
-      []
-    );
+    this.currentMonth = this.calendarService.generateMonth(this._yearNumber, this._monthNumber, []);
     this._dataSource.forEach((item: CalendarTableEntry, index: number) => {
       this.tableData.splice(index, 1, {
         name: item.name,
-        data: this.calendarService.generateMonth(
-          this.year,
-          this.month,
-          item.data
-        ).days,
+        data: this.calendarService.generateMonth(this.year, this.month, item.data).days,
       });
     });
   }
diff --git a/projects/ng-mat-components/src/fs-calendar/fs-calendar.module.ts b/projects/ng-mat-components/src/fs-calendar/fs-calendar.module.ts
index f065401..874a41a 100644
--- a/projects/ng-mat-components/src/fs-calendar/fs-calendar.module.ts
+++ b/projects/ng-mat-components/src/fs-calendar/fs-calendar.module.ts
@@ -7,16 +7,8 @@ import { FsCalendarTableComponent } from './calendar-table/fs-calendar-table.com
 import { FsCalendarTableNameDirective } from './directives/fs-calendar-table-name.directive';
 
 @NgModule({
-  declarations: [
-    FsCalendarPanelsComponent,
-    FsCalendarTableComponent,
-    FsCalendarTableNameDirective,
-  ],
+  declarations: [FsCalendarPanelsComponent, FsCalendarTableComponent, FsCalendarTableNameDirective],
   imports: [CommonModule, MatButtonModule, MatDividerModule],
-  exports: [
-    FsCalendarPanelsComponent,
-    FsCalendarTableComponent,
-    FsCalendarTableNameDirective,
-  ],
+  exports: [FsCalendarPanelsComponent, FsCalendarTableComponent, FsCalendarTableNameDirective],
 })
 export class FsCalendarModule {}
diff --git a/projects/ng-mat-components/src/fs-calendar/services/fs-calendar.service.ts b/projects/ng-mat-components/src/fs-calendar/services/fs-calendar.service.ts
index ff2d9d4..f6e038a 100644
--- a/projects/ng-mat-components/src/fs-calendar/services/fs-calendar.service.ts
+++ b/projects/ng-mat-components/src/fs-calendar/services/fs-calendar.service.ts
@@ -1,11 +1,6 @@
 import { Inject, Injectable } from '@angular/core';
 import * as dateFns from 'date-fns';
-import {
-  CalendarExtendedDay,
-  CalendarMonth,
-  CalendarPanel,
-  CalendarPanelSum,
-} from '../calendar.models';
+import { CalendarExtendedDay, CalendarMonth, CalendarPanel, CalendarPanelSum } from '../calendar.models';
 
 @Injectable({
   providedIn: 'root',
@@ -27,12 +22,8 @@ export class FsCalendarService {
   ): CalendarPanelSum {
     let cal: CalendarPanelSum;
 
-    monthsAfter = monthsAfter
-      ? parseInt(monthsAfter.toString(), 10)
-      : monthsAfter;
-    monthsBefore = monthsBefore
-      ? parseInt(monthsBefore.toString(), 10)
-      : monthsBefore;
+    monthsAfter = monthsAfter ? parseInt(monthsAfter.toString(), 10) : monthsAfter;
+    monthsBefore = monthsBefore ? parseInt(monthsBefore.toString(), 10) : monthsBefore;
     currMonth = currMonth ? parseInt(currMonth.toString(), 10) : currMonth;
 
     // Standard calendar
@@ -41,28 +32,20 @@ export class FsCalendarService {
       for (let index = 0; index < monthsBefore; index++) {
         const calculatedMonth = currMonth - monthsBefore + index;
         const actualYear = calculatedMonth + 1 < 1 ? year - 1 : year;
-        const actualMonth =
-          calculatedMonth + 1 < 1 ? 12 + calculatedMonth : calculatedMonth;
-        calendarPanels.push(
-          this.generatePanel(actualYear, actualMonth, calendarWeek, customDays)
-        );
+        const actualMonth = calculatedMonth + 1 < 1 ? 12 + calculatedMonth : calculatedMonth;
+        calendarPanels.push(this.generatePanel(actualYear, actualMonth, calendarWeek, customDays));
       }
-      calendarPanels.push(
-        this.generatePanel(year, currMonth, calendarWeek, customDays)
-      );
+      calendarPanels.push(this.generatePanel(year, currMonth, calendarWeek, customDays));
       for (let index = 0; index < monthsAfter; index++) {
         const calculatedMonth = currMonth + index + 1;
         const actualYear = calculatedMonth > 11 ? year + 1 : year;
-        const actualMonth =
-          calculatedMonth > 11 ? calculatedMonth - 12 : calculatedMonth;
-        calendarPanels.push(
-          this.generatePanel(actualYear, actualMonth, calendarWeek, customDays)
-        );
+        const actualMonth = calculatedMonth > 11 ? calculatedMonth - 12 : calculatedMonth;
+        calendarPanels.push(this.generatePanel(actualYear, actualMonth, calendarWeek, customDays));
       }
 
       let daysAbsolute: Date[] = [];
-      calendarPanels.forEach((panel) => {
-        panel.days.forEach((day) => {
+      calendarPanels.forEach(panel => {
+        panel.days.forEach(day => {
           daysAbsolute.push(day.date);
         });
       });
@@ -74,15 +57,10 @@ export class FsCalendarService {
       };
     } else {
       // Calendar is a full year
-      let calendarPanels = this.generatePanels(
-        year,
-        this.oneYearOfMonths,
-        calendarWeek,
-        customDays
-      );
+      let calendarPanels = this.generatePanels(year, this.oneYearOfMonths, calendarWeek, customDays);
       let daysAbsolute: Date[] = [];
-      calendarPanels.forEach((panel) => {
-        panel.days.forEach((day) => {
+      calendarPanels.forEach(panel => {
+        panel.days.forEach(day => {
           daysAbsolute.push(day.date);
         });
       });
@@ -96,26 +74,16 @@ export class FsCalendarService {
     return cal;
   }
 
-  generatePanels(
-    year: number,
-    months: number[],
-    calendarWeek: boolean,
-    customDays: CalendarExtendedDay[]
-  ): CalendarPanel[] {
+  generatePanels(year: number, months: number[], calendarWeek: boolean, customDays: CalendarExtendedDay[]): CalendarPanel[] {
     let tmpPanels: CalendarPanel[] = [];
-    months.forEach((month) => {
+    months.forEach(month => {
       tmpPanels.push(this.generatePanel(year, month, calendarWeek, customDays));
     });
     return tmpPanels;
   }
 
-  generatePanel(
-    year: number,
-    month: number,
-    calendarWeek: boolean,
-    customDays: CalendarExtendedDay[]
-  ): CalendarPanel {
-    const filtedCustomDays = customDays.filter((day) => {
+  generatePanel(year: number, month: number, calendarWeek: boolean, customDays: CalendarExtendedDay[]): CalendarPanel {
+    const filtedCustomDays = customDays.filter(day => {
       return dateFns.isSameMonth(new Date(year, month, 1), day.date);
     });
     let tmpMonth = this.generateMonth(year, month, filtedCustomDays);
@@ -132,44 +100,20 @@ export class FsCalendarService {
     let nextMonth = dateFns.addMonths(firstDayOfMonth, 1);
     // previous month
     for (let i = 0; i < dayOfWeek - 1; i++) {
-      tmpPreRender.splice(
-        0,
-        0,
-        this.generatePlaceholder(dateFns.subDays(firstDayOfMonth, i + 1))
-      );
+      tmpPreRender.splice(0, 0, this.generatePlaceholder(dateFns.subDays(firstDayOfMonth, i + 1)));
     }
     // post month
     for (let i = 0; tmpPreRender.length < 42; i++) {
-      tmpPreRender.splice(
-        tmpPreRender.length,
-        0,
-        this.generatePlaceholder(dateFns.addDays(nextMonth, i))
-      );
+      tmpPreRender.splice(tmpPreRender.length, 0, this.generatePlaceholder(dateFns.addDays(nextMonth, i)));
     }
     // CalendarWeekDays && tr rows
     if (calendarWeek) {
       tmpPreRender.splice(0, 0, this.generateWeekNumber(tmpPreRender[0].date));
       tmpPreRender.splice(8, 0, this.generateWeekNumber(tmpPreRender[8].date));
-      tmpPreRender.splice(
-        16,
-        0,
-        this.generateWeekNumber(tmpPreRender[16].date)
-      );
-      tmpPreRender.splice(
-        24,
-        0,
-        this.generateWeekNumber(tmpPreRender[24].date)
-      );
-      tmpPreRender.splice(
-        32,
-        0,
-        this.generateWeekNumber(tmpPreRender[32].date)
-      );
-      tmpPreRender.splice(
-        40,
-        0,
-        this.generateWeekNumber(tmpPreRender[40].date)
-      );
+      tmpPreRender.splice(16, 0, this.generateWeekNumber(tmpPreRender[16].date));
+      tmpPreRender.splice(24, 0, this.generateWeekNumber(tmpPreRender[24].date));
+      tmpPreRender.splice(32, 0, this.generateWeekNumber(tmpPreRender[32].date));
+      tmpPreRender.splice(40, 0, this.generateWeekNumber(tmpPreRender[40].date));
       tmpMonthRenderer.render.push(tmpPreRender.slice(0, 8));
       tmpMonthRenderer.render.push(tmpPreRender.slice(8, 16));
       tmpMonthRenderer.render.push(tmpPreRender.slice(16, 24));
@@ -215,18 +159,14 @@ export class FsCalendarService {
     };
   }
 
-  generateMonth(
-    year: number,
-    month: number,
-    customDays: CalendarExtendedDay[]
-  ): CalendarMonth {
+  generateMonth(year: number, month: number, customDays: CalendarExtendedDay[]): CalendarMonth {
     const firstDayInMonth = new Date(year, month, 1);
     const daysInMonth = dateFns.getDaysInMonth(firstDayInMonth);
     const days: CalendarExtendedDay[] = [];
 
     for (let index = 0; index < daysInMonth; index++) {
       const date = new Date(year, month, index + 1);
-      const filtedCustomDays = customDays.filter((day) => {
+      const filtedCustomDays = customDays.filter(day => {
         return dateFns.isSameDay(date, day.date);
       });
       days.push(this.generateDay(date, filtedCustomDays));
@@ -239,10 +179,7 @@ export class FsCalendarService {
     };
   }
 
-  generateDay(
-    dateToGenerate: Date,
-    customDays: CalendarExtendedDay[]
-  ): CalendarExtendedDay {
+  generateDay(dateToGenerate: Date, customDays: CalendarExtendedDay[]): CalendarExtendedDay {
     if (customDays.length == 0) {
       return {
         date: dateToGenerate,
@@ -315,9 +252,7 @@ export class FsCalendarService {
       end: dateFns.endOfWeek(now, { weekStartsOn: 1 }),
     });
     let arrOfDays: string[] = [];
-    arr.map((a) =>
-      arrOfDays.push(dateFns.format(a, 'EEEEEE', { locale: this.appLocale }))
-    );
+    arr.map(a => arrOfDays.push(dateFns.format(a, 'EEEEEE', { locale: this.appLocale })));
     return arrOfDays;
   }
 }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/_index.scss b/projects/ng-mat-components/src/fs-nav-frame/_index.scss
index 19cb565..79db6a3 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/_index.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/_index.scss
@@ -1 +1 @@
-@forward "theme" show fs-nav-frame-theme;
+@forward 'theme' show fs-nav-frame-theme;
diff --git a/projects/ng-mat-components/src/fs-nav-frame/_theme.scss b/projects/ng-mat-components/src/fs-nav-frame/_theme.scss
index 908e2fb..73f25bd 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/_theme.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/_theme.scss
@@ -3,33 +3,33 @@
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   // Gets the standard material maps of fore/background
-  $background: map-get($theme, "background");
-  $foreground: map-get($theme, "foreground");
+  $background: map-get($theme, 'background');
+  $foreground: map-get($theme, 'foreground');
 
   .fs-nav-frame-toolbar-logo,
   .fs-nav-frame-toolbar-logo .logo-span {
-    background-color: map-get($background, "app-bar");
-    color: map-get($foreground, "text");
+    background-color: map-get($background, 'app-bar');
+    color: map-get($foreground, 'text');
   }
 
   .fs-nav-frame-toolbar {
-    background-color: map-get($background, "app-bar");
-    color: map-get($foreground, "text");
+    background-color: map-get($background, 'app-bar');
+    color: map-get($foreground, 'text');
   }
 
   .sidebar {
-    background-color: map-get($background, "app-bar");
-    color: map-get($foreground, "text");
-    border-top: 1px solid map-get($foreground, "divider");
+    background-color: map-get($background, 'app-bar');
+    color: map-get($foreground, 'text');
+    border-top: 1px solid map-get($foreground, 'divider');
   }
 
   .sidebar .profile {
-    border-top: 1px solid map-get($foreground, "divider");
+    border-top: 1px solid map-get($foreground, 'divider');
   }
 
   .sidebar .nav-links li .active::after {
-    content: "";
-    background-color: map-get($primary, "default");
+    content: '';
+    background-color: map-get($primary, 'default');
     border-radius: 8px;
     width: calc(100% - 8px);
     height: 56px;
@@ -40,8 +40,8 @@
   }
 
   .fs-nav-frame-content {
-    color: map-get($foreground, "text");
-    background-color: map-get($background, "background");
+    color: map-get($foreground, 'text');
+    background-color: map-get($background, 'background');
   }
 
   .badge[data-badge]:after {
@@ -52,13 +52,13 @@
     right: 7px;
 
     font-size: 11px;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
     font-weight: 600;
 
     text-align: center;
     line-height: 23px;
 
-    background: map-get($accent, "default");
+    background: map-get($accent, 'default');
     color: map-get($accent, default-contrast);
 
     width: 22px;
diff --git a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-content.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-content.directive.ts
index bd6735d..5538c48 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-content.directive.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-content.directive.ts
@@ -2,10 +2,8 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: 'fs-nav-frame-content, [fsNavFrameContent]',
-  host: { 'class': 'fs-nav-frame-content' },
+  host: { class: 'fs-nav-frame-content' },
 })
 export class FsNavFrameContentDirective {
-
-  constructor() { }
-
+  constructor() {}
 }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-center.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-center.directive.ts
index 84a48ef..1626cc6 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-center.directive.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-center.directive.ts
@@ -2,10 +2,8 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: 'fs-nav-frame-toolbar-center, [fsNavFrameToolbarCenter]',
-  host: { 'class': 'fs-nav-frame-toolbar-center' },
+  host: { class: 'fs-nav-frame-toolbar-center' },
 })
 export class FsNavFrameToolbarCenterDirective {
-
-  constructor() { }
-
+  constructor() {}
 }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-side.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-side.directive.ts
index 637a49b..930c33a 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-side.directive.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-side.directive.ts
@@ -2,10 +2,8 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: 'fs-nav-frame-toolbar-side, [fsNavFrameToolbarSide]',
-  host: { 'class': 'fs-nav-frame-toolbar-side' },
+  host: { class: 'fs-nav-frame-toolbar-side' },
 })
 export class FsNavFrameToolbarSideDirective {
-
-  constructor() { }
-
+  constructor() {}
 }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-title.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-title.directive.ts
index 0eb2330..8f02a2c 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-title.directive.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-title.directive.ts
@@ -2,10 +2,8 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: 'fs-nav-frame-toolbar-title, [fsNavFrameToolbarTitle]',
-  host: { 'class': 'fs-nav-frame-toolbar-title' },
+  host: { class: 'fs-nav-frame-toolbar-title' },
 })
 export class FsNavFrameToolbarTitleDirective {
-
-  constructor() { }
-
+  constructor() {}
 }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
index a4d14b6..52e790e 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
@@ -2,39 +2,33 @@
   <div class="logo-span">
     <div class="logo">
       <button mat-icon-button (click)="toggleSidemenu()">
-        <div class="logo-picture" *ngIf="frameConfig.logo != ''"
-          style="background-image: url('{{ frameConfig.logo }}');">
-
-        </div>
-        <span class="material-icons" *ngIf="frameConfig.logo === ''">
-          menu
-        </span>
+        <div class="logo-picture" *ngIf="frameConfig.logo != ''" style="background-image: url('{{ frameConfig.logo }}');"></div>
+        <span class="material-icons" *ngIf="frameConfig.logo === ''">menu</span>
       </button>
     </div>
     <div class="sidebar-name-span">
-      <span *ngIf="!isClosed">{{frameConfig.appName}}</span>
+      <span *ngIf="!isClosed">{{ frameConfig.appName }}</span>
     </div>
   </div>
 </div>
 
 <ng-content select="fs-nav-frame-toolbar"></ng-content>
 
-
 <div class="sidebar" [class.opened]="!isClosed">
   <!-- Logo / Branding -->
   <div class="app-name">
-    <span *ngIf="isClosed">{{frameConfig.appNameShort}}</span>
+    <span *ngIf="isClosed">{{ frameConfig.appNameShort }}</span>
   </div>
 
   <!-- Navigation -->
   <ul class="nav-links">
     <li>
-      <button mat-button *ngFor="let item of navList" [class.active]="item.path === isActivePath"
-        [routerLink]="item.path" (click)="closeSidebar()"> <!--  class="badge" data-badge="2" -->
+      <button mat-button *ngFor="let item of navList" [class.active]="item.path === isActivePath" [routerLink]="item.path" (click)="closeSidebar()">
+        <!--  class="badge" data-badge="2" -->
         <span class="material-icons">
-          {{item.data?.sidenavIcon}}
+          {{ item.data?.sidenavIcon }}
         </span>
-        <span class="link-name" *ngIf="!isClosed">{{item.data?.sidenavText}}</span>
+        <span class="link-name" *ngIf="!isClosed">{{ item.data?.sidenavText }}</span>
       </button>
     </li>
   </ul>
@@ -43,34 +37,24 @@
   <div class="profile" *ngIf="navUser != undefined">
     <div class="profile-pic-button-wrapper">
       <button mat-icon-button (click)="toggleSidemenu()">
-        <div class="pic" *ngIf="navUser.profilePicture != ''"
-          style="background-image: url('{{ navUser.profilePicture }}');">
-        </div>
-        <span class="material-icons" *ngIf="navUser.profilePicture === ''">
-          account_circle
-        </span>
+        <div class="pic" *ngIf="navUser.profilePicture != ''" style="background-image: url('{{ navUser.profilePicture }}');"></div>
+        <span class="material-icons" *ngIf="navUser.profilePicture === ''">account_circle</span>
       </button>
     </div>
 
-
     <div class="profile-content-wrapper" *ngIf="!isClosed">
       <div class="user-infos">
-        <span class="name">{{navUser.name}}</span>
-        <span class="role">{{navUser.role}}</span>
+        <span class="name">{{ navUser.name }}</span>
+        <span class="role">{{ navUser.role }}</span>
       </div>
       <button mat-icon-button (click)="onManageAccount()">
-        <span class="material-icons">
-          manage_accounts
-        </span>
+        <span class="material-icons">manage_accounts</span>
       </button>
       <button mat-icon-button (click)="onLogout()">
-        <span class="material-icons">
-          logout
-        </span>
+        <span class="material-icons">logout</span>
       </button>
     </div>
   </div>
 </div>
 
-
 <ng-content select="fs-nav-frame-content" [class.opened]="!isClosed"></ng-content>
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
index 7261ae8..f536368 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
@@ -156,7 +156,7 @@ $toolbar-width-opened: 264px;
 }
 
 .sidebar .profile .user-infos .role {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 
 .nav-links li {
@@ -194,6 +194,5 @@ $toolbar-width-opened: 264px;
   padding: 16px;
   transition: all 0.3s ease-in-out;
   overflow: auto;
-  box-shadow: inset 5px 2px 4px -1px rgba(0, 0, 0, 0.2),
-    4px 4px 5px 0px rgba(0, 0, 0, 0.14);
+  box-shadow: inset 5px 2px 4px -1px rgba(0, 0, 0, 0.2), 4px 4px 5px 0px rgba(0, 0, 0, 0.14);
 }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
index e90bbdf..828adaf 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
@@ -2,13 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { filter, map } from 'rxjs';
 import { FsNavFrameService } from './services/fs-nav-frame.service';
-import {
-  FrameConfig,
-  FrameEvent,
-  FrameEvents,
-  FrameRoutes,
-  NavUser,
-} from './nav-frame.modules';
+import { FrameConfig, FrameEvent, FrameEvents, FrameRoutes, NavUser } from './nav-frame.modules';
 
 @Component({
   selector: 'fs-nav-frame',
@@ -33,26 +27,22 @@ export class FsNavFrameComponent implements OnInit {
   isActivePath: string = '';
   navList: FrameRoutes = [];
 
-  constructor(
-    private frameService: FsNavFrameService,
-    private router: Router,
-    private activatedRoute: ActivatedRoute
-  ) { }
+  constructor(private frameService: FsNavFrameService, private router: Router, private activatedRoute: ActivatedRoute) {}
 
   ngOnInit(): void {
-    this.navList = this.appRoutes.filter((elm) => {
+    this.navList = this.appRoutes.filter(elm => {
       return elm.data?.displaySidemenu === true;
     });
     this.router.events
       .pipe(
-        filter((event) => event instanceof NavigationEnd),
+        filter(event => event instanceof NavigationEnd),
         map(() => {
           const child = this.activatedRoute.firstChild;
           return child;
         })
       )
       .subscribe((ttl: ActivatedRoute | null) => {
-        ttl?.url.subscribe((obj) => {
+        ttl?.url.subscribe(obj => {
           this.isActivePath = obj[0].path;
         });
       });
@@ -65,7 +55,7 @@ export class FsNavFrameComponent implements OnInit {
 
   closeSidebar() {
     if (!this.isClosed) {
-      this.toggleSidemenu()
+      this.toggleSidemenu();
     }
   }
 
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts
index 646eb28..a04d9d3 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts
@@ -15,14 +15,7 @@ import { FsNavFrameComponent } from './fs-nav-frame.component';
 import { FsNavFrameToolbarComponent } from './nav-frame-toolbar/fs-nav-frame-toolbar.component';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    RouterModule,
-    MatIconModule,
-    MatButtonModule,
-  ],
+  imports: [CommonModule, BrowserModule, BrowserAnimationsModule, RouterModule, MatIconModule, MatButtonModule],
   exports: [
     FsNavFrameComponent,
     FsNavFrameToolbarComponent,
@@ -40,4 +33,4 @@ import { FsNavFrameToolbarComponent } from './nav-frame-toolbar/fs-nav-frame-too
     FsNavFrameContentDirective,
   ],
 })
-export class FsNavFrameModule { }
+export class FsNavFrameModule {}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.html b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.html
index 3f58639..dda77cf 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.html
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.html
@@ -1,11 +1,11 @@
 <div class="fs-nav-frame-toolbar-wrapper">
-    <div>
-        <ng-content select="fs-nav-frame-toolbar-title"></ng-content>
-    </div>
-    <div>
-        <ng-content select="fs-nav-frame-toolbar-center"></ng-content>
-    </div>
-    <div>
-        <ng-content select="fs-nav-frame-toolbar-side"></ng-content>
-    </div>
+  <div>
+    <ng-content select="fs-nav-frame-toolbar-title"></ng-content>
+  </div>
+  <div>
+    <ng-content select="fs-nav-frame-toolbar-center"></ng-content>
+  </div>
+  <div>
+    <ng-content select="fs-nav-frame-toolbar-side"></ng-content>
+  </div>
 </div>
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.ts b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.ts
index eb4bb32..8740215 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.ts
@@ -1,12 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewEncapsulation,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FsNavFrameService } from '../services/fs-nav-frame.service';
 
 @Component({
@@ -34,7 +26,7 @@ export class FsNavFrameToolbarComponent implements OnInit, OnDestroy {
     });
   }
 
-  ngOnInit() { }
+  ngOnInit() {}
 
   ngOnDestroy() {
     this.frameService.isMenuClosed.unsubscribe();
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts b/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
index af01efa..8b7d03b 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
@@ -75,18 +75,11 @@ type StringOfLength<Min, Max> = string & {
 
 // This is a type guard function which can be used to assert that a string
 // is of type StringOfLength<Min,Max>
-const isStringOfLength = <Min extends number, Max extends number>(
-  str: string,
-  min: Min,
-  max: Max
-): str is StringOfLength<Min, Max> => str.length >= min && str.length <= max;
+const isStringOfLength = <Min extends number, Max extends number>(str: string, min: Min, max: Max): str is StringOfLength<Min, Max> =>
+  str.length >= min && str.length <= max;
 
 // type constructor function
-export const stringOfLength = <Min extends number, Max extends number>(
-  input: unknown,
-  min: Min,
-  max: Max
-): StringOfLength<Min, Max> => {
+export const stringOfLength = <Min extends number, Max extends number>(input: unknown, min: Min, max: Max): StringOfLength<Min, Max> => {
   if (typeof input !== 'string') {
     throw new Error('invalid input');
   }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts b/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts
index 40b2af4..29a012e 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts
@@ -1,11 +1,10 @@
 import { EventEmitter, Injectable } from '@angular/core';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class FsNavFrameService {
-
   isMenuClosed = new EventEmitter<boolean>();
 
-  constructor() { }
+  constructor() {}
 }
diff --git a/projects/ng-mat-components/src/test.ts b/projects/ng-mat-components/src/test.ts
index bcca659..a10d3a7 100644
--- a/projects/ng-mat-components/src/test.ts
+++ b/projects/ng-mat-components/src/test.ts
@@ -3,23 +3,21 @@
 import 'zone.js';
 import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
     <T>(id: string): T;
     keys(): string[];
   };
 };
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
 
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
diff --git a/projects/ng-mat-components/test.scss b/projects/ng-mat-components/test.scss
index 395fb96..653b716 100644
--- a/projects/ng-mat-components/test.scss
+++ b/projects/ng-mat-components/test.scss
@@ -1,6 +1,6 @@
-@use "sass:map";
-@use "../../node_modules/@angular/material" as mat;
-@use "./index" as fsc;
+@use 'sass:map';
+@use '../../node_modules/@angular/material' as mat;
+@use './index' as fsc;
 
 // @include mat.core();
 
@@ -10,22 +10,24 @@ $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 // The "warn" palette is optional and defaults to red if not specified.
 $my-warn: mat.define-palette(mat.$red-palette);
 
-$my-theme: mat.define-light-theme((color: (primary: $my-primary,
-        accent: $my-accent,
-        warn: $my-warn,
-      ),
-      typography: mat.define-typography-config(),
-      density: 0,
-    ));
-
+$my-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $my-primary,
+      accent: $my-accent,
+      warn: $my-warn,
+    ),
+    typography: mat.define-typography-config(),
+    density: 0,
+  )
+);
 
 // Extract whichever individual palettes you need from the theme.
 $primary: map-get($my-theme, primary);
 $accent: map-get($my-theme, accent);
 // Gets the standard material maps of fore/background
-$background: map-get($my-theme, "background");
-$foreground: map-get($my-theme, "foreground");
-
+$background: map-get($my-theme, 'background');
+$foreground: map-get($my-theme, 'foreground');
 
 @media (prefers-color-scheme: dark) {
   @include fsc.all-component-themes($my-theme);
diff --git a/projects/ng-mat-components/tsconfig.lib.json b/projects/ng-mat-components/tsconfig.lib.json
index b77b13c..305b0b9 100644
--- a/projects/ng-mat-components/tsconfig.lib.json
+++ b/projects/ng-mat-components/tsconfig.lib.json
@@ -8,8 +8,5 @@
     "inlineSources": true,
     "types": []
   },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
 }
diff --git a/projects/ng-mat-components/tsconfig.spec.json b/projects/ng-mat-components/tsconfig.spec.json
index 715dd0a..fafd1e1 100644
--- a/projects/ng-mat-components/tsconfig.spec.json
+++ b/projects/ng-mat-components/tsconfig.spec.json
@@ -3,15 +3,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
+  "files": ["src/test.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 6e08aba..ae4a2b5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./projects/lib-workspace/src/**/*.{html,ts}",
-  ],
+  content: ['./projects/lib-workspace/src/**/*.{html,ts}'],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};
diff --git a/tsconfig.json b/tsconfig.json
index 0b7f692..6d47bba 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,10 +12,7 @@
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "paths": {
-      "ng-mat-components": [
-        "dist/ng-mat-components/ng-mat-components",
-        "dist/ng-mat-components"
-      ]
+      "ng-mat-components": ["dist/ng-mat-components/ng-mat-components", "dist/ng-mat-components"]
     },
     "declaration": false,
     "downlevelIteration": true,
@@ -24,10 +21,7 @@
     "importHelpers": true,
     "target": "es2017",
     "module": "es2020",
-    "lib": [
-      "es2020",
-      "dom"
-    ]
+    "lib": ["es2020", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

From 5bc6478a82a24776c76049c876b157d12f7d1fbb Mon Sep 17 00:00:00 2001
From: eksrha <58111764+eksrha@users.noreply.github.com>
Date: Mon, 30 Jan 2023 16:11:48 +0100
Subject: [PATCH 2/5] add app version

---
 .../lib-workspace/src/app/app.component.html  |  2 +-
 .../lib-workspace/src/app/app.component.ts    |  8 ++++----
 .../fs-nav-frame/fs-nav-frame.component.html  | 14 +++++--------
 .../fs-nav-frame/fs-nav-frame.component.scss  | 20 +++++++++++++++----
 .../fs-nav-frame/fs-nav-frame.component.ts    |  8 +++-----
 .../src/fs-nav-frame/nav-frame.modules.ts     | 12 +++++------
 6 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/projects/lib-workspace/src/app/app.component.html b/projects/lib-workspace/src/app/app.component.html
index 043569a..df71c97 100644
--- a/projects/lib-workspace/src/app/app.component.html
+++ b/projects/lib-workspace/src/app/app.component.html
@@ -1,4 +1,4 @@
-<fs-nav-frame [frameConfig]="frameConfig" [navUser]="navUser" [appRoutes]="appRoutes" (event)="onEvent($event)">
+<fs-nav-frame [navFrameConfig]="navFrameConfig" [navUser]="navUser" [appRoutes]="appRoutes" (event)="onEvent($event)">
   <fs-nav-frame-toolbar>
     <fs-nav-frame-toolbar-title>Current App Title</fs-nav-frame-toolbar-title>
 
diff --git a/projects/lib-workspace/src/app/app.component.ts b/projects/lib-workspace/src/app/app.component.ts
index 9949861..f98fbeb 100644
--- a/projects/lib-workspace/src/app/app.component.ts
+++ b/projects/lib-workspace/src/app/app.component.ts
@@ -2,7 +2,7 @@ import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 import localeDeExtra from '@angular/common/locales/extra/de';
 import { Component, OnInit } from '@angular/core';
-import { FrameConfig, FrameEvent, FrameEvents, NavUser } from 'projects/ng-mat-components/src/public-api';
+import { FrameEvent, FrameEvents, NavFrameConfig, NavUser } from 'projects/ng-mat-components/src/public-api';
 import { routes } from './app-routing.module';
 
 @Component({
@@ -14,10 +14,10 @@ export class AppComponent implements OnInit {
   title = 'FS DevOps`s ng mat components';
   appRoutes = routes;
 
-  frameConfig: FrameConfig = {
+  navFrameConfig: NavFrameConfig = {
     appName: 'Dummy App',
-    // appNameShort: stringOfLength('DUMMY', 0, 6),
-    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
+    appVersion: '0.0.0',
+    // logoSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
   };
   navUser: NavUser = {
     profilePicture: 'https://material.angular.io/assets/img/examples/shiba1.jpg',
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
index 52e790e..c77ecea 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
@@ -2,12 +2,13 @@
   <div class="logo-span">
     <div class="logo">
       <button mat-icon-button (click)="toggleSidemenu()">
-        <div class="logo-picture" *ngIf="frameConfig.logo != ''" style="background-image: url('{{ frameConfig.logo }}');"></div>
-        <span class="material-icons" *ngIf="frameConfig.logo === ''">menu</span>
+        <div class="logo-picture" *ngIf="navFrameConfig.logoSrc != ('' || undefined)" style="background-image: url('{{ navFrameConfig.logoSrc }}');"></div>
+        <span class="material-icons" *ngIf="navFrameConfig.logoSrc == ('' || undefined)">menu</span>
       </button>
     </div>
-    <div class="sidebar-name-span">
-      <span *ngIf="!isClosed">{{ frameConfig.appName }}</span>
+    <div class="sidebar-span">
+      <span class="app-name" *ngIf="!isClosed">{{ navFrameConfig.appName }}</span>
+      <span class="app-version" *ngIf="!isClosed">{{ navFrameConfig.appVersion }}</span>
     </div>
   </div>
 </div>
@@ -15,11 +16,6 @@
 <ng-content select="fs-nav-frame-toolbar"></ng-content>
 
 <div class="sidebar" [class.opened]="!isClosed">
-  <!-- Logo / Branding -->
-  <div class="app-name">
-    <span *ngIf="isClosed">{{ frameConfig.appNameShort }}</span>
-  </div>
-
   <!-- Navigation -->
   <ul class="nav-links">
     <li>
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
index f536368..4b00b5e 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
@@ -94,8 +94,6 @@ $toolbar-width-opened: 264px;
   bottom: 0;
   width: $toolbar-width-closed;
   transition: all 0.3s ease-in-out;
-  // box-shadow: 5px 2px 4px -1px rgba(0, 0, 0, 0.2),
-  //  4px 4px 5px 0px rgba(0, 0, 0, 0.14);
 }
 
 .sidebar .nav-links {
@@ -104,7 +102,6 @@ $toolbar-width-opened: 264px;
   overflow: auto;
 }
 
-.sidebar-name-span,
 .profile-content-wrapper {
   width: calc(100% - $toolbar-width-closed);
   display: flex;
@@ -112,6 +109,21 @@ $toolbar-width-opened: 264px;
   align-items: center;
 }
 
+.sidebar-span {
+  width: calc(100% - 4rem);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  .app-name {
+    font-size: 1.5rem;
+  }
+
+  .app-version {
+    font-size: 1rem;
+  }
+}
+
 .sidebar-name-span span,
 .profile-content-wrapper span {
   font-size: 1.5rem;
@@ -195,4 +207,4 @@ $toolbar-width-opened: 264px;
   transition: all 0.3s ease-in-out;
   overflow: auto;
   box-shadow: inset 5px 2px 4px -1px rgba(0, 0, 0, 0.2), 4px 4px 5px 0px rgba(0, 0, 0, 0.14);
-}
+}
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
index 828adaf..6748bf4 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
@@ -1,8 +1,8 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { filter, map } from 'rxjs';
+import { FrameEvent, FrameEvents, FrameRoutes, NavFrameConfig, NavUser } from './nav-frame.modules';
 import { FsNavFrameService } from './services/fs-nav-frame.service';
-import { FrameConfig, FrameEvent, FrameEvents, FrameRoutes, NavUser } from './nav-frame.modules';
 
 @Component({
   selector: 'fs-nav-frame',
@@ -17,10 +17,8 @@ export class FsNavFrameComponent implements OnInit {
 
   @Input() navUser: NavUser | undefined;
   @Input() appRoutes: FrameRoutes = [];
-  @Input() frameConfig: FrameConfig = {
-    appName: 'Dummy App',
-    // appNameShort: stringOfLength('DUMMY', 0, 6),
-    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
+  @Input() navFrameConfig: NavFrameConfig = {
+    appName: 'Demo App',
   };
 
   isClosed: boolean = true;
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts b/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
index 8b7d03b..53c0a87 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
@@ -1,16 +1,16 @@
 import { Data, Route } from '@angular/router';
 
 /**
- *  @interface NavItem
+ *  @interface NavFrameConfig
  *
  *  @appName             {string}     displayed app name, shows only in opened mode
- *  @appNameShort        {string}     displayed short app name, only 6 chars allowed!
- *  @logo                {string}     link to logo, can be relative or full URL
+ *  @appVersion          {string}     (optional) display app version
+ *  @logoSrc             {string}     (optional) link to logo, can be relative or full URL
  */
-export interface FrameConfig {
+export interface NavFrameConfig {
   appName: string;
-  appNameShort?: StringOfLength<0, 6>;
-  logo: string;
+  appVersion?: string;
+  logoSrc?: string;
 }
 
 export enum FrameEvents {

From 115305ebaf768383392601d5a5e6b195f67761c3 Mon Sep 17 00:00:00 2001
From: eksrha <58111764+eksrha@users.noreply.github.com>
Date: Tue, 31 Jan 2023 21:54:23 +0100
Subject: [PATCH 3/5] update theaming

---
 package.json                                  |   3 +-
 .../lib-workspace/src/app/app.component.ts    |   6 +-
 projects/lib-workspace/src/styles.scss        |  35 +-
 projects/ng-mat-components/_index.scss        |   4 +-
 projects/ng-mat-components/_theme.scss        | 396 +++++++++++++++++-
 .../fs-calendar-table.component.scss          |   5 +-
 .../src/fs-nav-frame/_index.scss              |   2 +-
 .../src/fs-nav-frame/_theme.scss              |   2 +-
 .../fs-nav-frame/fs-nav-frame.component.html  |   7 +-
 .../fs-nav-frame/fs-nav-frame.component.scss  |  22 +-
 .../src/fs-nav-frame/nav-frame.modules.ts     |   6 +-
 11 files changed, 444 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index badc73b..1014b81 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "build:workspace": "ng build --project lib-workspace",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
+    "format": "prettier --write .",
     "lint": "ng lint"
   },
   "private": true,
@@ -64,4 +65,4 @@
     "sass": "^1.57.1",
     "typescript": "~4.5.2"
   }
-}
+}
\ No newline at end of file
diff --git a/projects/lib-workspace/src/app/app.component.ts b/projects/lib-workspace/src/app/app.component.ts
index f98fbeb..9ee5d4d 100644
--- a/projects/lib-workspace/src/app/app.component.ts
+++ b/projects/lib-workspace/src/app/app.component.ts
@@ -16,13 +16,13 @@ export class AppComponent implements OnInit {
 
   navFrameConfig: NavFrameConfig = {
     appName: 'Dummy App',
-    appVersion: '0.0.0',
+    // appVersion: '0.0.0',
     // logoSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
   };
   navUser: NavUser = {
-    profilePicture: 'https://material.angular.io/assets/img/examples/shiba1.jpg',
+    // profilePicture: 'https://material.angular.io/assets/img/examples/shiba1.jpg',
     name: 'Some User',
-    role: 'Engineer',
+    subname: 'Engineer',
   };
 
   ngOnInit() {
diff --git a/projects/lib-workspace/src/styles.scss b/projects/lib-workspace/src/styles.scss
index b748885..48c7142 100644
--- a/projects/lib-workspace/src/styles.scss
+++ b/projects/lib-workspace/src/styles.scss
@@ -4,28 +4,23 @@
 
 @include mat.core();
 
+@include fsc.normalize();
+@include fsc.core();
+
 // Define a dark theme
-$dark-theme: mat.define-dark-theme(
-  (
-    color: (
-      primary: mat.define-palette(palettes.$md-primary),
-      accent: mat.define-palette(palettes.$md-accent),
-    ),
-    // Only include `typography` and `density` in the default dark theme.
-    typography: mat.define-typography-config(),
-    density: 0,
-  )
-);
+$dark-theme: mat.define-dark-theme((color: (primary: mat.define-palette(palettes.$md-primary),
+        accent: mat.define-palette(palettes.$md-accent),
+      ),
+      // Only include `typography` and `density` in the default dark theme.
+      typography: mat.define-typography-config(),
+      density: 0,
+    ));
 
 // Define a light theme
-$light-theme: mat.define-light-theme(
-  (
-    color: (
-      primary: mat.define-palette(palettes.$md-primary),
-      accent: mat.define-palette(palettes.$md-accent),
-    ),
-  )
-);
+$light-theme: mat.define-light-theme((color: (primary: mat.define-palette(palettes.$md-primary),
+        accent: mat.define-palette(palettes.$md-accent),
+      ),
+    ));
 
 // Apply the dark theme by default
 @include mat.all-component-themes($dark-theme);
@@ -40,4 +35,4 @@ $light-theme: mat.define-light-theme(
 }
 
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
\ No newline at end of file
diff --git a/projects/ng-mat-components/_index.scss b/projects/ng-mat-components/_index.scss
index 9acaecc..d4affbd 100644
--- a/projects/ng-mat-components/_index.scss
+++ b/projects/ng-mat-components/_index.scss
@@ -1,4 +1,6 @@
 @use 'sass:color';
 @use 'sass:map';
 
-@forward 'theme' show all-component-themes;
+@forward 'theme' show all-component-themes,
+core,
+normalize;
\ No newline at end of file
diff --git a/projects/ng-mat-components/_theme.scss b/projects/ng-mat-components/_theme.scss
index 3f9b4fb..66d7485 100644
--- a/projects/ng-mat-components/_theme.scss
+++ b/projects/ng-mat-components/_theme.scss
@@ -16,6 +16,18 @@
     fill: map-get($foreground, 'text');
   }
 
+}
+
+@mixin core() {
+
+  .glassplane {
+    /* From https://css.glass */
+    background: rgba(255, 255, 255, 0.18);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(5.8px);
+    -webkit-backdrop-filter: blur(5.8px);
+  }
+
   /* Tooltip container */
   .tooltip {
     position: relative;
@@ -34,7 +46,7 @@
 
     /* Position the tooltip text */
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     bottom: 125%;
     left: 50%;
     margin-left: -60px;
@@ -57,3 +69,385 @@
     opacity: 1;
   }
 }
+
+@mixin normalize() {
+  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+  /* Document
+   ========================================================================== */
+
+  /**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+  html {
+    line-height: 1.15;
+    /* 1 */
+    -webkit-text-size-adjust: 100%;
+    /* 2 */
+  }
+
+  /* Sections
+   ========================================================================== */
+
+  /**
+ * Remove the margin in all browsers.
+ */
+
+  body {
+    margin: 0;
+  }
+
+  /**
+ * Render the `main` element consistently in IE.
+ */
+
+  main {
+    display: block;
+  }
+
+  /**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+   ========================================================================== */
+
+  /**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+  hr {
+    box-sizing: content-box;
+    /* 1 */
+    height: 0;
+    /* 1 */
+    overflow: visible;
+    /* 2 */
+  }
+
+  /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+  pre {
+    font-family: monospace, monospace;
+    /* 1 */
+    font-size: 1em;
+    /* 2 */
+  }
+
+  /* Text-level semantics
+   ========================================================================== */
+
+  /**
+ * Remove the gray background on active links in IE 10.
+ */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+  abbr[title] {
+    border-bottom: none;
+    /* 1 */
+    text-decoration: underline;
+    /* 2 */
+    text-decoration: underline dotted;
+    /* 2 */
+  }
+
+  /**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace;
+    /* 1 */
+    font-size: 1em;
+    /* 2 */
+  }
+
+  /**
+ * Add the correct font size in all browsers.
+ */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+   ========================================================================== */
+
+  /**
+ * Remove the border on images inside links in IE 10.
+ */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+   ========================================================================== */
+
+  /**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+    /* 1 */
+    font-size: 100%;
+    /* 1 */
+    line-height: 1.15;
+    /* 1 */
+    margin: 0;
+    /* 2 */
+  }
+
+  /**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+  button,
+  input {
+    /* 1 */
+    overflow: visible;
+  }
+
+  /**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+  button,
+  select {
+    /* 1 */
+    text-transform: none;
+  }
+
+  /**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+  }
+
+  /**
+ * Remove the inner border and padding in Firefox.
+ */
+
+  button::-moz-focus-inner,
+  [type='button']::-moz-focus-inner,
+  [type='reset']::-moz-focus-inner,
+  [type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+  button:-moz-focusring,
+  [type='button']:-moz-focusring,
+  [type='reset']:-moz-focusring,
+  [type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+ * Correct the padding in Firefox.
+ */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+  legend {
+    box-sizing: border-box;
+    /* 1 */
+    color: inherit;
+    /* 2 */
+    display: table;
+    /* 1 */
+    max-width: 100%;
+    /* 1 */
+    padding: 0;
+    /* 3 */
+    white-space: normal;
+    /* 1 */
+  }
+
+  /**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+  [type='checkbox'],
+  [type='radio'] {
+    box-sizing: border-box;
+    /* 1 */
+    padding: 0;
+    /* 2 */
+  }
+
+  /**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+  [type='number']::-webkit-inner-spin-button,
+  [type='number']::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+  [type='search'] {
+    -webkit-appearance: textfield;
+    /* 1 */
+    outline-offset: -2px;
+    /* 2 */
+  }
+
+  /**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+  [type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    /* 1 */
+    font: inherit;
+    /* 2 */
+  }
+
+  /* Interactive
+   ========================================================================== */
+
+  /*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+  details {
+    display: block;
+  }
+
+  /*
+ * Add the correct display in all browsers.
+ */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+   ========================================================================== */
+
+  /**
+ * Add the correct display in IE 10+.
+ */
+
+  template {
+    display: none;
+  }
+
+  /**
+ * Add the correct display in IE 10.
+ */
+
+  [hidden] {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.scss b/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.scss
index eff7a77..d881c06 100644
--- a/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.scss
+++ b/projects/ng-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.scss
@@ -1,6 +1,5 @@
 .fs-calendar-table-helper {
-  margin: 8px;
-  padding: 8px;
+  padding: 1rem;
   border-radius: 4px;
 }
 
@@ -53,4 +52,4 @@ table tr td:not(:first-child) {
   font-size: 16px;
   font-weight: bold;
   line-height: 23px;
-}
+}
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-nav-frame/_index.scss b/projects/ng-mat-components/src/fs-nav-frame/_index.scss
index 79db6a3..7509386 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/_index.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/_index.scss
@@ -1 +1 @@
-@forward 'theme' show fs-nav-frame-theme;
+@forward 'theme' show fs-nav-frame-theme;
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-nav-frame/_theme.scss b/projects/ng-mat-components/src/fs-nav-frame/_theme.scss
index 73f25bd..ec75d5d 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/_theme.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/_theme.scss
@@ -66,4 +66,4 @@
 
     border-radius: 50%;
   }
-}
+}
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
index c77ecea..ad74cdb 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
@@ -33,15 +33,15 @@
   <div class="profile" *ngIf="navUser != undefined">
     <div class="profile-pic-button-wrapper">
       <button mat-icon-button (click)="toggleSidemenu()">
-        <div class="pic" *ngIf="navUser.profilePicture != ''" style="background-image: url('{{ navUser.profilePicture }}');"></div>
-        <span class="material-icons" *ngIf="navUser.profilePicture === ''">account_circle</span>
+        <div class="pic" *ngIf="navUser.profilePicture != ('' || undefined)" style="background-image: url('{{ navUser.profilePicture }}');"></div>
+        <span class="material-icons" style="font-size: 3rem" *ngIf="navUser.profilePicture == ('' || undefined)">account_circle</span>
       </button>
     </div>
 
     <div class="profile-content-wrapper" *ngIf="!isClosed">
       <div class="user-infos">
         <span class="name">{{ navUser.name }}</span>
-        <span class="role">{{ navUser.role }}</span>
+        <span class="role">{{ navUser.subname }}</span>
       </div>
       <button mat-icon-button (click)="onManageAccount()">
         <span class="material-icons">manage_accounts</span>
@@ -53,4 +53,5 @@
   </div>
 </div>
 
+<div class="glassplane" [class.opened]="!isClosed"></div>
 <ng-content select="fs-nav-frame-content" [class.opened]="!isClosed"></ng-content>
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
index 4b00b5e..39fb21c 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
@@ -5,7 +5,7 @@ $toolbar-width-opened: 264px;
 // Toolbar-logo
 .fs-nav-frame-toolbar-logo {
   position: fixed;
-  z-index: 1;
+  z-index: 2;
   top: 0;
   left: 0;
   width: $toolbar-width-closed;
@@ -15,14 +15,12 @@ $toolbar-width-opened: 264px;
 
 ::ng-deep .fs-nav-frame-toolbar {
   position: fixed;
-  z-index: 1;
+  z-index: 2;
   top: 0;
   left: $toolbar-width-closed;
   transition: all 0.3s ease-in-out;
   right: 0;
   height: $toolbar-height;
-  // box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-  //   0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
 }
 
 ::ng-deep .fs-nav-frame-content.opened,
@@ -88,7 +86,7 @@ $toolbar-width-opened: 264px;
 
 .sidebar {
   position: fixed;
-  z-index: 1;
+  z-index: 2;
   top: $toolbar-height;
   left: 0;
   bottom: 0;
@@ -194,7 +192,7 @@ $toolbar-width-opened: 264px;
 }
 
 .nav-links li button .link-name {
-  margin-left: 16px;
+  margin-left: 1rem;
 }
 
 ::ng-deep .fs-nav-frame-content {
@@ -203,8 +201,18 @@ $toolbar-width-opened: 264px;
   left: $toolbar-width-closed;
   right: 0;
   bottom: 0;
-  padding: 16px;
+  padding: 1rem;
   transition: all 0.3s ease-in-out;
   overflow: auto;
   box-shadow: inset 5px 2px 4px -1px rgba(0, 0, 0, 0.2), 4px 4px 5px 0px rgba(0, 0, 0, 0.14);
+}
+
+.glassplane.opened {
+  position: absolute;
+  top: 3rem;
+  left: 4rem;
+  transition: all 0.3s ease-in-out;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
 }
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts b/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
index 53c0a87..37635d4 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
@@ -33,13 +33,13 @@ export interface FrameEvent {
  *  @interface NavUser
  *
  *  @name                 {string}     displayed name of user
- *  @role                 {string}     displayed role of user (can be empty)
+ *  @subname              {string}     displayed role of user (can be empty)
  *  @profilePicture       {string}     profile Picture (can be empty)
  */
 export interface NavUser {
   name: string;
-  role: string;
-  profilePicture: string;
+  subname: string;
+  profilePicture?: string;
 }
 
 interface FrameRouteData extends Data {

From 18db1e8106a0c9aa25824ac5f21265ce62936ba1 Mon Sep 17 00:00:00 2001
From: eksrha <58111764+eksrha@users.noreply.github.com>
Date: Thu, 2 Feb 2023 15:00:39 +0100
Subject: [PATCH 4/5] very great improvements

---
 package.json                                  |   3 +-
 .../src/app/app-routing.module.ts             |  25 +-
 .../lib-workspace/src/app/app.component.html  |  30 +-
 .../lib-workspace/src/app/app.component.ts    |  84 ++++--
 projects/lib-workspace/src/styles.scss        |   2 +
 .../ng-mat-components/src/assets/menu.svg     |   5 -
 .../src/fs-nav-frame/_theme.scss              |  25 +-
 .../src/fs-nav-frame/_variables.scss          |   3 +
 .../fs-nav-frame-sidebar.directive.ts         |   9 +
 .../fs-nav-frame-toolbar-side.directive.ts    |   9 -
 .../fs-nav-frame-toolbar-title.directive.ts   |   9 -
 .../fs-nav-frame/fs-nav-frame.component.html  |  84 +++---
 .../fs-nav-frame/fs-nav-frame.component.scss  | 271 ++++++++----------
 .../fs-nav-frame/fs-nav-frame.component.ts    |  74 ++---
 .../src/fs-nav-frame/fs-nav-frame.module.ts   |  36 ++-
 .../src/fs-nav-frame/fs-nav-frame.modules.ts  |  38 +++
 .../fs-nav-user-profile-actions.directive.ts  |   9 +
 .../fs-nav-user-profile-name.directive.ts     |   9 +
 .../fs-nav-user-profile-subname.directive.ts  |   9 +
 .../fs-nav-user-profile.component.html        |  20 ++
 .../fs-nav-user-profile.component.scss        |  67 +++++
 .../fs-nav-user-profile.component.ts          |  27 ++
 .../fs-nav-frame-toolbar-center.directive.ts  |   0
 .../fs-nav-frame-toolbar-end.directive.ts     |   9 +
 .../fs-nav-frame-toolbar-start.directive.ts   |   9 +
 .../fs-nav-frame-toolbar.component.html       |  10 +-
 .../fs-nav-frame-toolbar.component.scss       |  20 +-
 .../fs-nav-frame-toolbar.component.ts         |  22 +-
 .../src/fs-nav-frame/nav-frame.modules.ts     |  92 ------
 .../src/fs-nav-frame/public-api.ts            |   8 +-
 .../services/fs-nav-frame.service.ts          |  15 +
 31 files changed, 588 insertions(+), 445 deletions(-)
 delete mode 100644 projects/ng-mat-components/src/assets/menu.svg
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/_variables.scss
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-sidebar.directive.ts
 delete mode 100644 projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-side.directive.ts
 delete mode 100644 projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-title.directive.ts
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.modules.ts
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-actions.directive.ts
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-name.directive.ts
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-subname.directive.ts
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.html
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.scss
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.ts
 rename projects/ng-mat-components/src/fs-nav-frame/{ => nav-frame-toolbar}/directives/fs-nav-frame-toolbar-center.directive.ts (100%)
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-end.directive.ts
 create mode 100644 projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive.ts
 delete mode 100644 projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts

diff --git a/package.json b/package.json
index 1014b81..d0bf66b 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
   },
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --disable-host-check",
+    "start": "ng serve",
+    "start:codespace": "ng serve --disable-host-check",
     "watch:scss": "sass --watch projects/ng-mat-components/test.scss:dist/css/css",
     "prebuild": "cp README.md projects/ng-mat-components/",
     "build": "ng build --project ng-mat-components",
diff --git a/projects/lib-workspace/src/app/app-routing.module.ts b/projects/lib-workspace/src/app/app-routing.module.ts
index 2bd0ee4..2b4278a 100644
--- a/projects/lib-workspace/src/app/app-routing.module.ts
+++ b/projects/lib-workspace/src/app/app-routing.module.ts
@@ -1,47 +1,26 @@
 import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule } from '@angular/router';
-import { FrameRoutes } from 'projects/ng-mat-components/src/public-api';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './content/home/home.component';
 import { ShowcaseCalendarPanelsComponent } from './content/showcase-calendar-panels/showcase-calendar-panels.component';
 import { ShowcaseCalendarTableComponent } from './content/showcase-calendar-table/showcase-calendar-table.component';
 import { ShowcaseNavFrameComponent } from './content/showcase-nav-frame/showcase-nav-frame.component';
 
-export const routes: FrameRoutes = [
+export const routes: Routes = [
   {
     path: 'home',
     component: HomeComponent,
-    data: {
-      displaySidemenu: true,
-      sidenavIcon: 'home',
-      sidenavText: 'Home',
-    },
   },
   {
     path: 'nav-frame',
     component: ShowcaseNavFrameComponent,
-    data: {
-      displaySidemenu: true,
-      sidenavIcon: 'pivot_table_chart',
-      sidenavText: 'Ui Frame',
-    },
   },
   {
     path: 'calendar-panels',
     component: ShowcaseCalendarPanelsComponent,
-    data: {
-      displaySidemenu: true,
-      sidenavIcon: 'calendar_month',
-      sidenavText: 'Calendar',
-    },
   },
   {
     path: 'calendar-table',
     component: ShowcaseCalendarTableComponent,
-    data: {
-      displaySidemenu: true,
-      sidenavIcon: 'event_note',
-      sidenavText: 'Calendar Table',
-    },
   },
   {
     path: '**',
diff --git a/projects/lib-workspace/src/app/app.component.html b/projects/lib-workspace/src/app/app.component.html
index df71c97..5eedff4 100644
--- a/projects/lib-workspace/src/app/app.component.html
+++ b/projects/lib-workspace/src/app/app.component.html
@@ -1,6 +1,7 @@
-<fs-nav-frame [navFrameConfig]="navFrameConfig" [navUser]="navUser" [appRoutes]="appRoutes" (event)="onEvent($event)">
+<fs-nav-frame [navFrameConfig]="navFrameConfig" [navRoutes]="navRoutes">
   <fs-nav-frame-toolbar>
-    <fs-nav-frame-toolbar-title>Current App Title</fs-nav-frame-toolbar-title>
+    <!-- <ng-template #tbcontent>hallo</ng-template> -->
+    <fs-nav-frame-toolbar-start>Current App Title</fs-nav-frame-toolbar-start>
 
     <fs-nav-frame-toolbar-center>
       <button mat-icon-button>
@@ -14,11 +15,7 @@
       </button>
     </fs-nav-frame-toolbar-center>
 
-    <fs-nav-frame-toolbar-side>
-      <!-- <a>Test the side</a> -->
-      <!-- <mat-form-field appearance="outline">
-        <input matInput placeholder="Search" type="search" />
-      </mat-form-field> -->
+    <fs-nav-frame-toolbar-end>
       <div>
         <input
           type="search"
@@ -26,9 +23,26 @@
           class="block w-full p-2 pl-4 text-sm text-gray-900 border border-gray-300 rounded-lg"
           placeholder="Dummy Search" />
       </div>
-    </fs-nav-frame-toolbar-side>
+    </fs-nav-frame-toolbar-end>
   </fs-nav-frame-toolbar>
 
+  <!-- <fs-nav-frame-sidebar> -->
+  <fs-nav-user-profile profilePicture="https://material.angular.io/assets/img/examples/shiba1.jpg">
+    <!--  profilePicture="https://material.angular.io/assets/img/examples/shiba1.jpg" -->
+    <fs-nav-user-profile-name>Some User</fs-nav-user-profile-name>
+    <fs-nav-user-profile-subname>Enginer</fs-nav-user-profile-subname>
+
+    <fs-nav-user-profile-actions>
+      <button mat-icon-button>
+        <mat-icon>manage_accounts</mat-icon>
+      </button>
+      <button mat-icon-button>
+        <mat-icon>logout</mat-icon>
+      </button>
+    </fs-nav-user-profile-actions>
+  </fs-nav-user-profile>
+  <!-- </fs-nav-frame-sidebar> -->
+
   <fs-nav-frame-content>
     <router-outlet></router-outlet>
   </fs-nav-frame-content>
diff --git a/projects/lib-workspace/src/app/app.component.ts b/projects/lib-workspace/src/app/app.component.ts
index 9ee5d4d..d29697f 100644
--- a/projects/lib-workspace/src/app/app.component.ts
+++ b/projects/lib-workspace/src/app/app.component.ts
@@ -2,8 +2,7 @@ import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 import localeDeExtra from '@angular/common/locales/extra/de';
 import { Component, OnInit } from '@angular/core';
-import { FrameEvent, FrameEvents, NavFrameConfig, NavUser } from 'projects/ng-mat-components/src/public-api';
-import { routes } from './app-routing.module';
+import { NavFrameConfig, NavRoutes } from 'projects/ng-mat-components/src/public-api';
 
 @Component({
   selector: 'app-root',
@@ -12,34 +11,71 @@ import { routes } from './app-routing.module';
 })
 export class AppComponent implements OnInit {
   title = 'FS DevOps`s ng mat components';
-  appRoutes = routes;
+  navRoutes: NavRoutes = [
+    {
+      title: 'Home',
+      icon: 'home',
+      path: 'home',
+      description: 'Home - Overview',
+    },
+    {
+      title: 'Nav Frame',
+      icon: 'pivot_table_chart',
+      path: 'nav-frame',
+      description: 'Nav Frame - Showcase',
+    },
+    {
+      title: 'Calendar Panels',
+      icon: 'calendar_month',
+      path: 'calendar-panels',
+      description: 'Calendar Panels - Showcase',
+    },
+    {
+      title: 'Calendar Table',
+      icon: 'event_note',
+      path: 'calendar-table',
+      description: 'Calendar Table - Showcase',
+    },
+    {
+      title: 'Context is very looooooong',
+      icon: 'article',
+      path: 'not-set',
+      description: 'Very loooong context',
+    },
+    {
+      title: 'With children',
+      icon: 'family_restroom',
+      path: 'not-set',
+      description: 'Something with children!',
+      childrens: [
+        {
+          title: 'Test',
+          path: 'test',
+        },
+        {
+          title: 'Test2',
+          path: 'test2',
+        },
+      ],
+    },
+    {
+      title: 'Badge -> nice',
+      icon: 'badge',
+      path: 'not-set',
+      badgeNumber: 4,
+      description: 'There is a badge',
+    },
+  ];
 
   navFrameConfig: NavFrameConfig = {
-    appName: 'Dummy App',
-    // appVersion: '0.0.0',
+    appName: 'Demo App',
+    appVersion: '0.0.0',
     // logoSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
   };
-  navUser: NavUser = {
-    // profilePicture: 'https://material.angular.io/assets/img/examples/shiba1.jpg',
-    name: 'Some User',
-    subname: 'Engineer',
-  };
+
+  constructor() {}
 
   ngOnInit() {
     registerLocaleData(localeDe, 'de-DE', localeDeExtra);
   }
-
-  onEvent(frameEvent: FrameEvent) {
-    switch (frameEvent.type) {
-      case FrameEvents.MANAGE_ACCOUNT:
-        console.log('Manage Account called, do something...');
-        break;
-      case FrameEvents.LOGOUT:
-        console.log('Logout called, do something...');
-        break;
-      default:
-        console.error(`unknown event fetched: ${JSON.stringify(event)}`);
-        break;
-    }
-  }
 }
diff --git a/projects/lib-workspace/src/styles.scss b/projects/lib-workspace/src/styles.scss
index 48c7142..5406d7f 100644
--- a/projects/lib-workspace/src/styles.scss
+++ b/projects/lib-workspace/src/styles.scss
@@ -7,6 +7,8 @@
 @include fsc.normalize();
 @include fsc.core();
 
+mat.$theme-ignore-duplication-warnings: true;
+
 // Define a dark theme
 $dark-theme: mat.define-dark-theme((color: (primary: mat.define-palette(palettes.$md-primary),
         accent: mat.define-palette(palettes.$md-accent),
diff --git a/projects/ng-mat-components/src/assets/menu.svg b/projects/ng-mat-components/src/assets/menu.svg
deleted file mode 100644
index 809729b..0000000
--- a/projects/ng-mat-components/src/assets/menu.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-    fill="currentColor">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
-</svg>
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-nav-frame/_theme.scss b/projects/ng-mat-components/src/fs-nav-frame/_theme.scss
index ec75d5d..10064ab 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/_theme.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/_theme.scss
@@ -6,8 +6,7 @@
   $background: map-get($theme, 'background');
   $foreground: map-get($theme, 'foreground');
 
-  .fs-nav-frame-toolbar-logo,
-  .fs-nav-frame-toolbar-logo .logo-span {
+  .fs-nav-frame-logo {
     background-color: map-get($background, 'app-bar');
     color: map-get($foreground, 'text');
   }
@@ -27,16 +26,18 @@
     border-top: 1px solid map-get($foreground, 'divider');
   }
 
-  .sidebar .nav-links li .active::after {
+  $nav-link-border: 5px;
+
+  .sidebar .nav-links li.active::after {
     content: '';
-    background-color: map-get($primary, 'default');
-    border-radius: 8px;
-    width: calc(100% - 8px);
-    height: 56px;
     position: absolute;
-    top: 4px;
-    left: 4px;
+    top: calc($nav-link-border / 2);
+    left: calc($nav-link-border / 2);
     z-index: -1;
+    width: calc(100% - $nav-link-border);
+    height: calc(4rem - $nav-link-border);
+    border-radius: $nav-link-border;
+    background-color: map-get($primary, 'default');
   }
 
   .fs-nav-frame-content {
@@ -44,12 +45,12 @@
     background-color: map-get($background, 'background');
   }
 
-  .badge[data-badge]:after {
+  .badge[data-badge]::before {
     content: attr(data-badge);
 
     position: absolute;
-    top: 12px;
-    right: 7px;
+    top: 8px;
+    left: 8px;
 
     font-size: 11px;
     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
diff --git a/projects/ng-mat-components/src/fs-nav-frame/_variables.scss b/projects/ng-mat-components/src/fs-nav-frame/_variables.scss
new file mode 100644
index 0000000..0fcbe06
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/_variables.scss
@@ -0,0 +1,3 @@
+$toolbar-height: 3rem;
+$sidebar-width-closed: 4rem;
+$sidebar-width-opened: 18rem;
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-sidebar.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-sidebar.directive.ts
new file mode 100644
index 0000000..a94e4e6
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-sidebar.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'fs-nav-frame-sidebar, [fsNavFrameSidebar]',
+  host: { class: 'fs-nav-frame-sidebar' },
+})
+export class FsNavFrameSidebarDirective {
+  constructor() {}
+}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-side.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-side.directive.ts
deleted file mode 100644
index 930c33a..0000000
--- a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-side.directive.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: 'fs-nav-frame-toolbar-side, [fsNavFrameToolbarSide]',
-  host: { class: 'fs-nav-frame-toolbar-side' },
-})
-export class FsNavFrameToolbarSideDirective {
-  constructor() {}
-}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-title.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-title.directive.ts
deleted file mode 100644
index 8f02a2c..0000000
--- a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-title.directive.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: 'fs-nav-frame-toolbar-title, [fsNavFrameToolbarTitle]',
-  host: { class: 'fs-nav-frame-toolbar-title' },
-})
-export class FsNavFrameToolbarTitleDirective {
-  constructor() {}
-}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
index ad74cdb..4f10603 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.html
@@ -1,15 +1,13 @@
-<div class="fs-nav-frame-toolbar-logo" [class.opened]="!isClosed">
-  <div class="logo-span">
-    <div class="logo">
-      <button mat-icon-button (click)="toggleSidemenu()">
-        <div class="logo-picture" *ngIf="navFrameConfig.logoSrc != ('' || undefined)" style="background-image: url('{{ navFrameConfig.logoSrc }}');"></div>
-        <span class="material-icons" *ngIf="navFrameConfig.logoSrc == ('' || undefined)">menu</span>
-      </button>
-    </div>
-    <div class="sidebar-span">
-      <span class="app-name" *ngIf="!isClosed">{{ navFrameConfig.appName }}</span>
-      <span class="app-version" *ngIf="!isClosed">{{ navFrameConfig.appVersion }}</span>
-    </div>
+<div class="fs-nav-frame-logo" [class.opened]="!isClosed">
+  <div class="logo-wrapper">
+    <button mat-icon-button (click)="toggleSidemenu()">
+      <div class="logo-picture" *ngIf="navFrameConfig.logoSrc != ('' || undefined)" style="background-image: url('{{ navFrameConfig.logoSrc }}');"></div>
+      <span class="material-icons" *ngIf="navFrameConfig.logoSrc == ('' || undefined)">menu</span>
+    </button>
+  </div>
+  <div class="app-info-wrapper" [class.opened]="!isClosed">
+    <span class="app-name" *ngIf="!isClosed">{{ navFrameConfig.appName }}</span>
+    <span class="app-version" *ngIf="!isClosed">{{ navFrameConfig.appVersion }}</span>
   </div>
 </div>
 
@@ -17,41 +15,39 @@
 
 <div class="sidebar" [class.opened]="!isClosed">
   <!-- Navigation -->
-  <ul class="nav-links">
-    <li>
-      <button mat-button *ngFor="let item of navList" [class.active]="item.path === isActivePath" [routerLink]="item.path" (click)="closeSidebar()">
-        <!--  class="badge" data-badge="2" -->
-        <span class="material-icons">
-          {{ item.data?.sidenavIcon }}
-        </span>
-        <span class="link-name" *ngIf="!isClosed">{{ item.data?.sidenavText }}</span>
-      </button>
-    </li>
-  </ul>
+  <ng-container *ngTemplateOutlet="navLinks || defaultNavLinksTemplate; context: { $implicit: navRoutes }"></ng-container>
 
   <!-- User Profile -->
-  <div class="profile" *ngIf="navUser != undefined">
-    <div class="profile-pic-button-wrapper">
-      <button mat-icon-button (click)="toggleSidemenu()">
-        <div class="pic" *ngIf="navUser.profilePicture != ('' || undefined)" style="background-image: url('{{ navUser.profilePicture }}');"></div>
-        <span class="material-icons" style="font-size: 3rem" *ngIf="navUser.profilePicture == ('' || undefined)">account_circle</span>
-      </button>
-    </div>
+  <ng-content select="fs-nav-user-profile"></ng-content>
+</div>
 
-    <div class="profile-content-wrapper" *ngIf="!isClosed">
-      <div class="user-infos">
-        <span class="name">{{ navUser.name }}</span>
-        <span class="role">{{ navUser.subname }}</span>
-      </div>
-      <button mat-icon-button (click)="onManageAccount()">
-        <span class="material-icons">manage_accounts</span>
+<div class="glassplane" [class.opened]="!isClosed" (click)="closeSidebar()"></div>
+<ng-content select="fs-nav-frame-content" [class.opened]="!isClosed"></ng-content>
+
+<!-- Navigation defaut template -->
+<ng-template #defaultNavLinksTemplate let-navLinks>
+  <ul class="nav-links">
+    <li *ngFor="let item of navRoutes" [class.active]="item.path === isActivePath">
+      <!--  class="badge" data-badge="2" -->
+      <button mat-button [routerLink]="item.path" (click)="closeSidebar()">
+        <mat-icon [class.badge]="item.badgeNumber" [attr.data-badge]="item.badgeNumber != undefined ? item.badgeNumber : false">
+          {{ item.icon }}
+        </mat-icon>
+        <span class="link-name" *ngIf="!isClosed">{{ item.title }}</span>
       </button>
-      <button mat-icon-button (click)="onLogout()">
-        <span class="material-icons">logout</span>
+      <button mat-icon-button [attr.aria-label]="'Expand menu for' + item.title" *ngIf="!isClosed && item.childrens" (click)="item.open = !item.open">
+        <mat-icon>expand_more</mat-icon>
       </button>
-    </div>
-  </div>
-</div>
 
-<div class="glassplane" [class.opened]="!isClosed"></div>
-<ng-content select="fs-nav-frame-content" [class.opened]="!isClosed"></ng-content>
+      <ng-container *ngIf="item.open">
+        <ul class="nav-links-l2">
+          <li *ngFor="let chItems of item.childrens">
+            <button mat-button [routerLink]="chItems.path" (click)="closeSidebar()">
+              {{ chItems.title }}
+            </button>
+          </li>
+        </ul>
+      </ng-container>
+    </li>
+  </ul>
+</ng-template>
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
index 39fb21c..35683d4 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss
@@ -1,23 +1,65 @@
-$toolbar-height: 3rem;
-$toolbar-width-closed: 4rem;
-$toolbar-width-opened: 264px;
+@use './_variables' as *;
 
-// Toolbar-logo
-.fs-nav-frame-toolbar-logo {
+// logo
+.fs-nav-frame-logo {
   position: fixed;
   z-index: 2;
   top: 0;
   left: 0;
-  width: $toolbar-width-closed;
+  width: $sidebar-width-closed;
   height: $toolbar-height;
   transition: all 0.3s ease-in-out;
+  display: grid;
+  grid-template-columns: $sidebar-width-closed 1fr;
+
+  .logo-wrapper {
+    width: $sidebar-width-closed;
+    height: $toolbar-height;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .logo-picture {
+      background-size: cover;
+      height: 40px;
+      width: 40px;
+      flex-shrink: 0;
+      object-fit: cover;
+    }
+
+    .material-icons {
+      font-size: 32px;
+    }
+  }
+
+  .app-info-wrapper {
+    position: relative;
+    height: $toolbar-height;
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+
+    .app-name {
+      font-size: 1.2rem;
+    }
+
+    .app-version {
+      padding: 0 1rem;
+      font-size: .9rem;
+    }
+  }
+
+
+  .app-info-wrapper.opened {
+    display: flex;
+  }
 }
 
 ::ng-deep .fs-nav-frame-toolbar {
   position: fixed;
   z-index: 2;
   top: 0;
-  left: $toolbar-width-closed;
+  left: $sidebar-width-closed;
   transition: all 0.3s ease-in-out;
   right: 0;
   height: $toolbar-height;
@@ -25,63 +67,12 @@ $toolbar-width-opened: 264px;
 
 ::ng-deep .fs-nav-frame-content.opened,
 ::ng-deep .fs-nav-frame-toolbar.opened {
-  left: $toolbar-width-opened !important;
+  left: $sidebar-width-opened;
 }
 
 .sidebar.opened,
-.fs-nav-frame-toolbar-logo.opened {
-  width: $toolbar-width-opened !important;
-}
-
-.fs-nav-frame-toolbar-logo .logo-span {
-  width: 100%;
-  height: $toolbar-height;
-  white-space: nowrap;
-  display: flex;
-  justify-content: space-between;
-}
-
-.fs-nav-frame-toolbar-logo .logo-span .logo {
-  width: $toolbar-width-closed;
-  height: $toolbar-height;
-  display: flex;
-  justify-content: center;
-}
-
-.profile-pic-button-wrapper {
-  width: 64px;
-  height: 64px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  button {
-    width: 48px;
-    height: 48px;
-    line-height: 48px;
-  }
-
-  .pic {
-    background-size: cover;
-    height: 48px;
-    width: 48px;
-    flex-shrink: 0;
-    object-fit: cover;
-    border-radius: 50%;
-  }
-}
-
-.fs-nav-frame-toolbar-logo .logo-span .logo .logo-picture {
-  background-size: cover;
-  height: 48px;
-  width: 48px;
-  flex-shrink: 0;
-  object-fit: cover;
-}
-
-.fs-nav-frame-toolbar-logo .logo-span .logo button {
-  width: $toolbar-height;
-  height: $toolbar-height;
+.fs-nav-frame-logo.opened {
+  width: $sidebar-width-opened;
 }
 
 .sidebar {
@@ -90,115 +81,79 @@ $toolbar-width-opened: 264px;
   top: $toolbar-height;
   left: 0;
   bottom: 0;
-  width: $toolbar-width-closed;
-  transition: all 0.3s ease-in-out;
-}
-
-.sidebar .nav-links {
-  height: 100%;
-  padding: 0 0 150px 0;
-  overflow: auto;
-}
-
-.profile-content-wrapper {
-  width: calc(100% - $toolbar-width-closed);
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.sidebar-span {
-  width: calc(100% - 4rem);
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-
-  .app-name {
-    font-size: 1.5rem;
-  }
-
-  .app-version {
-    font-size: 1rem;
-  }
-}
-
-.sidebar-name-span span,
-.profile-content-wrapper span {
-  font-size: 1.5rem;
-}
-
-.sidebar .profile {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  bottom: 0;
-  height: $toolbar-width-closed;
+  width: $sidebar-width-closed;
   transition: all 0.3s ease-in-out;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.sidebar .profile .profile-picture-wrapper {
-  width: $toolbar-width-closed;
-  display: flex;
-  justify-content: center;
-}
 
-.sidebar .profile .profile-picture {
-  background-size: cover;
-  height: 40px;
-  width: 40px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  object-fit: cover;
+  display: grid;
+  // grid-template-rows: 3rem 1fr 4rem;
+  grid-template-rows: 1fr 4rem;
 }
 
-.sidebar .profile .user-infos {
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-  width: 100%;
-}
-
-.sidebar .profile .user-infos .name {
-  font-size: 1rem;
-}
-
-.sidebar .profile .user-infos .role {
-  font-size: 0.8rem;
-}
-
-.nav-links li {
-  position: relative;
+ul {
   list-style: none;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
 }
 
-.nav-links li button {
-  width: 100%;
-  height: 64px;
-}
-
-.nav-links li button {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.nav-links li button .material-icons {
-  padding-left: 4px;
-}
-
-.nav-links li button .link-name {
-  margin-left: 1rem;
+.sidebar .nav-links {
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+
+  >li {
+    position: relative;
+    display: inline-grid;
+    grid-template-columns: 1fr 3rem;
+    align-items: center;
+    width: 100%;
+
+    >button:nth-child(1) {
+      width: 100%;
+      height: $sidebar-width-closed;
+      display: inline-flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      ::ng-deep span:nth-child(1) {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .material-icons {
+        padding-left: 4px;
+      }
+
+      .link-name {
+        margin-left: 1rem;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    button:nth-child(2) {
+      height: 3rem;
+      width: 3rem;
+    }
+
+    .nav-links-l2 {
+      li {
+        button {
+          width: 100%;
+          display: inline-flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+      }
+    }
+  }
 }
 
 ::ng-deep .fs-nav-frame-content {
   position: fixed;
   top: $toolbar-height;
-  left: $toolbar-width-closed;
+  left: $sidebar-width-closed;
   right: 0;
   bottom: 0;
   padding: 1rem;
@@ -209,8 +164,8 @@ $toolbar-width-opened: 264px;
 
 .glassplane.opened {
   position: absolute;
-  top: 3rem;
-  left: 4rem;
+  top: $toolbar-height;
+  left: $sidebar-width-closed;
   transition: all 0.3s ease-in-out;
   right: 0;
   bottom: 0;
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
index 6748bf4..e37840f 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts
@@ -1,8 +1,9 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ContentChild, ElementRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { filter, map } from 'rxjs';
-import { FrameEvent, FrameEvents, FrameRoutes, NavFrameConfig, NavUser } from './nav-frame.modules';
-import { FsNavFrameService } from './services/fs-nav-frame.service';
+import { NavFrameConfig, NavRoutes } from './fs-nav-frame.modules';
+import { FsNavFrameService, MenuState } from './services/fs-nav-frame.service';
 
 @Component({
   selector: 'fs-nav-frame',
@@ -12,25 +13,43 @@ import { FsNavFrameService } from './services/fs-nav-frame.service';
     class: 'fs-nav-frame',
   },
 })
-export class FsNavFrameComponent implements OnInit {
-  @Output() event = new EventEmitter<FrameEvent>();
-
-  @Input() navUser: NavUser | undefined;
-  @Input() appRoutes: FrameRoutes = [];
+export class FsNavFrameComponent implements OnInit, OnDestroy {
+  @Input() navRoutes: NavRoutes = [];
   @Input() navFrameConfig: NavFrameConfig = {
     appName: 'Demo App',
   };
 
+  @ContentChild('navLinks') navLinks: TemplateRef<any> | undefined;
+
+  profileContentElement!: HTMLElement | null;
   isClosed: boolean = true;
   isActivePath: string = '';
-  navList: FrameRoutes = [];
 
-  constructor(private frameService: FsNavFrameService, private router: Router, private activatedRoute: ActivatedRoute) {}
+  constructor(
+    private elementRef: ElementRef,
+    private frameService: FsNavFrameService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private titleService: Title
+  ) {}
 
   ngOnInit(): void {
-    this.navList = this.appRoutes.filter(elm => {
-      return elm.data?.displaySidemenu === true;
+    this.frameService.menuStateEvent.subscribe((state: MenuState) => {
+      if (state == MenuState.OPENED) {
+        this.frameService.menuState = MenuState.OPENED;
+        this.isClosed = false;
+        if (this.profileContentElement != null) {
+          this.profileContentElement.classList.add('opened');
+        }
+      } else {
+        this.frameService.menuState = MenuState.CLOSED;
+        this.isClosed = true;
+        if (this.profileContentElement != null) {
+          this.profileContentElement.classList.remove('opened');
+        }
+      }
     });
+
     this.router.events
       .pipe(
         filter(event => event instanceof NavigationEnd),
@@ -46,34 +65,25 @@ export class FsNavFrameComponent implements OnInit {
       });
   }
 
+  ngAfterViewInit() {
+    this.profileContentElement = (<HTMLElement>this.elementRef.nativeElement).querySelector('.fs-nav-user-profile .profile-content-wrapper');
+  }
+
+  ngOnDestroy(): void {
+    this.frameService.menuStateEvent.unsubscribe();
+  }
+
   toggleSidemenu() {
-    this.frameService.isMenuClosed.emit(!this.isClosed);
-    this.isClosed = !this.isClosed;
+    this.frameService.switchMenuState();
   }
 
   closeSidebar() {
-    if (!this.isClosed) {
-      this.toggleSidemenu();
+    if (this.frameService.menuState == MenuState.OPENED) {
+      this.frameService.switchMenuState();
     }
   }
 
   isNavActive(name: string): boolean {
     return name === this.isActivePath;
   }
-
-  onManageAccount(): void {
-    const frameEvent: FrameEvent = {
-      type: FrameEvents.MANAGE_ACCOUNT,
-      data: {},
-    };
-    this.event.emit(frameEvent);
-  }
-
-  onLogout(): void {
-    const frameEvent: FrameEvent = {
-      type: FrameEvents.LOGOUT,
-      data: {},
-    };
-    this.event.emit(frameEvent);
-  }
 }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts
index a04d9d3..7cce4ad 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts
@@ -7,30 +7,50 @@ import { RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
-import { FsNavFrameToolbarCenterDirective } from './directives/fs-nav-frame-toolbar-center.directive';
-import { FsNavFrameToolbarSideDirective } from './directives/fs-nav-frame-toolbar-side.directive';
-import { FsNavFrameToolbarTitleDirective } from './directives/fs-nav-frame-toolbar-title.directive';
+import { MatListModule } from '@angular/material/list';
 import { FsNavFrameContentDirective } from './directives/fs-nav-frame-content.directive';
+import { FsNavFrameSidebarDirective } from './directives/fs-nav-frame-sidebar.directive';
 import { FsNavFrameComponent } from './fs-nav-frame.component';
+import { FsNavUserProfileActionsDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-actions.directive';
+import { FsNavUserProfileNameDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-name.directive';
+import { FsNavUserProfileSubNameDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-subname.directive';
+import { FsNavUserProfileComponent } from './fs-nav-user-profile/fs-nav-user-profile.component';
+import { FsNavFrameToolbarCenterDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-center.directive';
+import { FsNavFrameToolbarEndDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-end.directive';
+import { FsNavFrameToolbarStartDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive';
 import { FsNavFrameToolbarComponent } from './nav-frame-toolbar/fs-nav-frame-toolbar.component';
 
 @NgModule({
-  imports: [CommonModule, BrowserModule, BrowserAnimationsModule, RouterModule, MatIconModule, MatButtonModule],
+  imports: [CommonModule, BrowserModule, BrowserAnimationsModule, RouterModule, MatIconModule, MatButtonModule, MatListModule],
   exports: [
     FsNavFrameComponent,
     FsNavFrameToolbarComponent,
+    FsNavFrameToolbarStartDirective,
     FsNavFrameToolbarCenterDirective,
-    FsNavFrameToolbarSideDirective,
-    FsNavFrameToolbarTitleDirective,
+    FsNavFrameToolbarEndDirective,
+
+    FsNavFrameSidebarDirective,
     FsNavFrameContentDirective,
+
+    FsNavUserProfileComponent,
+    FsNavUserProfileNameDirective,
+    FsNavUserProfileSubNameDirective,
+    FsNavUserProfileActionsDirective,
   ],
   declarations: [
     FsNavFrameComponent,
     FsNavFrameToolbarComponent,
+    FsNavFrameToolbarStartDirective,
     FsNavFrameToolbarCenterDirective,
-    FsNavFrameToolbarSideDirective,
-    FsNavFrameToolbarTitleDirective,
+    FsNavFrameToolbarEndDirective,
+
+    FsNavFrameSidebarDirective,
     FsNavFrameContentDirective,
+
+    FsNavUserProfileComponent,
+    FsNavUserProfileNameDirective,
+    FsNavUserProfileSubNameDirective,
+    FsNavUserProfileActionsDirective,
   ],
 })
 export class FsNavFrameModule {}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.modules.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.modules.ts
new file mode 100644
index 0000000..95d5f04
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.modules.ts
@@ -0,0 +1,38 @@
+/**
+ *  @interface NavFrameConfig
+ *
+ *  @appName             {string}     displayed app name, shows only in opened mode
+ *  @appVersion          {string}     (optional) display app version
+ *  @logoSrc             {string}     (optional) link to logo, can be relative or full URL
+ */
+export interface NavFrameConfig {
+  appName: string;
+  appVersion?: string;
+  logoSrc?: string;
+}
+
+export interface NavItem {
+  title: string;
+  path: string;
+}
+
+/**
+ *  @interface NavRoute
+ *
+ */
+export interface Navigation {
+  icon: string;
+  title: string;
+  path: string;
+  description: string;
+  badgeNumber?: number;
+  childrens?: NavItem[];
+  open?: boolean;
+  [key: string]: any;
+}
+
+/**
+ *  @type NavRoutes
+ *
+ */
+export type NavRoutes = Navigation[];
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-actions.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-actions.directive.ts
new file mode 100644
index 0000000..6a5afac
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-actions.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'fs-nav-user-profile-actions, [fsNavUserProfileActions]',
+  host: { class: 'fs-nav-user-profile-actions' },
+})
+export class FsNavUserProfileActionsDirective {
+  constructor() {}
+}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-name.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-name.directive.ts
new file mode 100644
index 0000000..7f23593
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-name.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'fs-nav-user-profile-name, [fsNavUserProfileName]',
+  host: { class: 'fs-nav-user-profile-name' },
+})
+export class FsNavUserProfileNameDirective {
+  constructor() {}
+}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-subname.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-subname.directive.ts
new file mode 100644
index 0000000..976b466
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/directives/fs-nav-user-profile-subname.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'fs-nav-user-profile-subname, [fsNavUserProfileSubName]',
+  host: { class: 'fs-nav-user-profile-subname' },
+})
+export class FsNavUserProfileSubNameDirective {
+  constructor() {}
+}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.html b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.html
new file mode 100644
index 0000000..88a26fa
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.html
@@ -0,0 +1,20 @@
+<div class="profile-pic-button-wrapper">
+  <button mat-icon-button (click)="toggleSidemenu()">
+    <div class="pic" *ngIf="profilePicture != ''" style="background-image: url('{{ profilePicture }}');"></div>
+    <span class="material-icons default-profile-pic" *ngIf="profilePicture == ''">account_circle</span>
+  </button>
+</div>
+
+<div class="profile-content-wrapper" [class.opened]="opened">
+  <div class="user-infos">
+    <ng-content select="fs-nav-user-profile-name"></ng-content>
+    <ng-content select="fs-nav-user-profile-subname"></ng-content>
+  </div>
+  <ng-content select="fs-nav-user-profile-actions"></ng-content>
+  <!-- <button mat-icon-button (click)="onManageAccount()">
+      <span class="material-icons">manage_accounts</span>
+    </button>
+    <button mat-icon-button (click)="onLogout()">
+      <span class="material-icons">logout</span>
+    </button> -->
+</div>
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.scss b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.scss
new file mode 100644
index 0000000..65182df
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.scss
@@ -0,0 +1,67 @@
+fs-nav-user-profile {
+    position: relative;
+    height: 4rem;
+    display: grid;
+    grid-template-columns: 4rem 1fr;
+}
+
+.profile-pic-button-wrapper {
+    width: 4rem;
+    height: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    button {
+        width: 4rem;
+        height: 4rem;
+        line-height: 4rem;
+
+        .pic {
+            height: 3rem;
+            width: 3rem;
+            margin-left: auto;
+            margin-right: auto;
+            background-size: cover;
+            flex-shrink: 0;
+            object-fit: cover;
+            border-radius: 50%;
+        }
+
+        .default-profile-pic {
+            font-size: 3rem;
+        }
+    }
+}
+
+.profile-content-wrapper {
+    position: relative;
+    height: 4rem;
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+
+    .user-infos {
+        height: 2rem;
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        .fs-nav-user-profile-name {
+            font-size: 1rem;
+        }
+
+        .fs-nav-user-profile-subname {
+            font-size: .7rem;
+        }
+    }
+
+    .fs-nav-user-profile-actions {
+        display: inline-flex;
+        justify-content: space-around;
+    }
+}
+
+.profile-content-wrapper.opened {
+    display: flex;
+}
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.ts b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.ts
new file mode 100644
index 0000000..6e6b676
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.ts
@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { FsNavFrameService } from '../services/fs-nav-frame.service';
+
+@Component({
+  selector: 'fs-nav-user-profile',
+  templateUrl: './fs-nav-user-profile.component.html',
+  styleUrls: ['./fs-nav-user-profile.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'fs-nav-user-profile',
+  },
+})
+export class FsNavUserProfileComponent implements OnInit {
+  @Output() onClickProfile = new EventEmitter<any>();
+
+  @Input() profilePicture: string = '';
+  @Input() opened: boolean = false;
+
+  constructor(private frameService: FsNavFrameService) {}
+
+  ngOnInit(): void {}
+
+  toggleSidemenu() {
+    this.frameService.switchMenuState();
+  }
+}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-center.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-center.directive.ts
similarity index 100%
rename from projects/ng-mat-components/src/fs-nav-frame/directives/fs-nav-frame-toolbar-center.directive.ts
rename to projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-center.directive.ts
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-end.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-end.directive.ts
new file mode 100644
index 0000000..06d34a8
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-end.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'fs-nav-frame-toolbar-end, [fsNavFrameToolbarEnd]',
+  host: { class: 'fs-nav-frame-toolbar-end' },
+})
+export class FsNavFrameToolbarEndDirective {
+  constructor() {}
+}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive.ts b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive.ts
new file mode 100644
index 0000000..e0c2b99
--- /dev/null
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive.ts
@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'fs-nav-frame-toolbar-start, [fsNavFrameToolbarStart]',
+  host: { class: 'fs-nav-frame-toolbar-start' },
+})
+export class FsNavFrameToolbarStartDirective {
+  constructor() {}
+}
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.html b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.html
index dda77cf..538a056 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.html
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.html
@@ -1,11 +1,15 @@
 <div class="fs-nav-frame-toolbar-wrapper">
+  <ng-container *ngTemplateOutlet="tbcontent || defaultToolbarTemplate"></ng-container>
+</div>
+
+<ng-template #defaultToolbarTemplate>
   <div>
-    <ng-content select="fs-nav-frame-toolbar-title"></ng-content>
+    <ng-content select="fs-nav-frame-toolbar-start"></ng-content>
   </div>
   <div>
     <ng-content select="fs-nav-frame-toolbar-center"></ng-content>
   </div>
   <div>
-    <ng-content select="fs-nav-frame-toolbar-side"></ng-content>
+    <ng-content select="fs-nav-frame-toolbar-end"></ng-content>
   </div>
-</div>
+</ng-template>
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.scss b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.scss
index 55bddda..10796b8 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.scss
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.scss
@@ -1,9 +1,25 @@
+@use '../_variables' as *;
+
+.fs-nav-frame-toolbar {
+  position: fixed;
+  z-index: 2;
+  top: 0;
+  left: $sidebar-width-closed;
+  transition: all 0.3s ease-in-out;
+  right: 0;
+  height: $toolbar-height;
+  padding: 0 1rem;
+}
+
+.fs-nav-frame-toolbar.opened {
+  left: $sidebar-width-opened;
+}
+
 .fs-nav-frame-toolbar-wrapper {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 1rem;
 }
 
 .mat-badge-medium.mat-badge-above .mat-badge-content {
@@ -16,4 +32,4 @@
 
 button.mat-badge {
   margin: 0 4px;
-}
+}
\ No newline at end of file
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.ts b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.ts
index 8740215..bd33bc7 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FsNavFrameService } from '../services/fs-nav-frame.service';
+import { ChangeDetectionStrategy, Component, ContentChild, HostBinding, OnDestroy, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { FsNavFrameService, MenuState } from '../services/fs-nav-frame.service';
 
 @Component({
   selector: 'fs-nav-frame-toolbar',
@@ -12,23 +12,23 @@ import { FsNavFrameService } from '../services/fs-nav-frame.service';
   },
 })
 export class FsNavFrameToolbarComponent implements OnInit, OnDestroy {
-  @Input() menuOpened: boolean = false;
+  @ContentChild('tbcontent') tbcontent: TemplateRef<any> | undefined;
 
   @HostBinding('class') openedClass = '';
 
-  constructor(private frameService: FsNavFrameService) {
-    this.frameService.isMenuClosed.subscribe((bool: boolean) => {
-      if (bool) {
-        this.openedClass = '';
-      } else {
+  constructor(private frameService: FsNavFrameService) {}
+
+  ngOnInit() {
+    this.frameService.menuStateEvent.subscribe((state: MenuState) => {
+      if (state == MenuState.OPENED) {
         this.openedClass = 'opened';
+      } else {
+        this.openedClass = '';
       }
     });
   }
 
-  ngOnInit() {}
-
   ngOnDestroy() {
-    this.frameService.isMenuClosed.unsubscribe();
+    this.frameService.menuStateEvent.unsubscribe();
   }
 }
diff --git a/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts b/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
deleted file mode 100644
index 37635d4..0000000
--- a/projects/ng-mat-components/src/fs-nav-frame/nav-frame.modules.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Data, Route } from '@angular/router';
-
-/**
- *  @interface NavFrameConfig
- *
- *  @appName             {string}     displayed app name, shows only in opened mode
- *  @appVersion          {string}     (optional) display app version
- *  @logoSrc             {string}     (optional) link to logo, can be relative or full URL
- */
-export interface NavFrameConfig {
-  appName: string;
-  appVersion?: string;
-  logoSrc?: string;
-}
-
-export enum FrameEvents {
-  MANAGE_ACCOUNT = 'EVENT_MANAGE_ACCOUNT',
-  LOGOUT = 'EVENT_LOGOUT',
-}
-
-/**
- *  @interface FrameEvent
- *
- *  @type                {string}     eventtype which got fired
- *  @data                {string}     data which get send with event
- */
-export interface FrameEvent {
-  type: FrameEvents;
-  data: any;
-}
-
-/**
- *  @interface NavUser
- *
- *  @name                 {string}     displayed name of user
- *  @subname              {string}     displayed role of user (can be empty)
- *  @profilePicture       {string}     profile Picture (can be empty)
- */
-export interface NavUser {
-  name: string;
-  subname: string;
-  profilePicture?: string;
-}
-
-interface FrameRouteData extends Data {
-  /**
-   * sould this route be visable in sidenav
-   */
-  displaySidemenu: boolean;
-  /**
-   * displayed text, shows only in opened mode
-   */
-  sidenavText: string;
-  /**
-   * displayed icon, use **only** material-icons!
-   */
-  sidenavIcon: string;
-  /**
-   * ...
-   */
-  roles?: string[];
-  /**
-   * App title dynamic
-   */
-  title?: string;
-}
-interface FrameRoute extends Route {
-  data?: FrameRouteData;
-}
-export type FrameRoutes = FrameRoute[];
-
-type StringOfLength<Min, Max> = string & {
-  readonly StringOfLength: unique symbol; // this is the phantom type
-};
-
-// This is a type guard function which can be used to assert that a string
-// is of type StringOfLength<Min,Max>
-const isStringOfLength = <Min extends number, Max extends number>(str: string, min: Min, max: Max): str is StringOfLength<Min, Max> =>
-  str.length >= min && str.length <= max;
-
-// type constructor function
-export const stringOfLength = <Min extends number, Max extends number>(input: unknown, min: Min, max: Max): StringOfLength<Min, Max> => {
-  if (typeof input !== 'string') {
-    throw new Error('invalid input');
-  }
-
-  if (!isStringOfLength(input, min, max)) {
-    throw new Error('input is not between specified min and max');
-  }
-
-  return input; // the type of input here is now StringOfLength<Min,Max>
-};
diff --git a/projects/ng-mat-components/src/fs-nav-frame/public-api.ts b/projects/ng-mat-components/src/fs-nav-frame/public-api.ts
index a6dc692..0427795 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/public-api.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/public-api.ts
@@ -2,11 +2,11 @@
  * Public API Surface of ng-mat-components
  */
 
-export { FsNavFrameToolbarCenterDirective } from './directives/fs-nav-frame-toolbar-center.directive';
-export { FsNavFrameToolbarSideDirective } from './directives/fs-nav-frame-toolbar-side.directive';
-export { FsNavFrameToolbarTitleDirective } from './directives/fs-nav-frame-toolbar-title.directive';
 export { FsNavFrameContentDirective } from './directives/fs-nav-frame-content.directive';
 export { FsNavFrameComponent } from './fs-nav-frame.component';
 export { FsNavFrameModule } from './fs-nav-frame.module';
+export * from './fs-nav-frame.modules';
+export { FsNavFrameToolbarCenterDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-center.directive';
+export { FsNavFrameToolbarEndDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-end.directive';
+export { FsNavFrameToolbarStartDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive';
 export { FsNavFrameToolbarComponent } from './nav-frame-toolbar/fs-nav-frame-toolbar.component';
-export * from './nav-frame.modules';
diff --git a/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts b/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts
index 29a012e..7c48984 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts
@@ -1,10 +1,25 @@
 import { EventEmitter, Injectable } from '@angular/core';
 
+export enum MenuState {
+  CLOSED = 'closed',
+  OPENED = 'opened',
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class FsNavFrameService {
   isMenuClosed = new EventEmitter<boolean>();
+  menuState: MenuState = MenuState.CLOSED;
+  menuStateEvent = new EventEmitter<MenuState>();
 
   constructor() {}
+
+  switchMenuState() {
+    if (this.menuState == MenuState.OPENED) {
+      this.menuStateEvent.emit(MenuState.CLOSED);
+    } else {
+      this.menuStateEvent.emit(MenuState.OPENED);
+    }
+  }
 }

From 02ba1761ad014129911a4ac486d1b7fea753a37c Mon Sep 17 00:00:00 2001
From: Eike Haller <58111764+eksrha@users.noreply.github.com>
Date: Thu, 2 Feb 2023 14:25:43 +0000
Subject: [PATCH 5/5] fix missed imports

---
 projects/ng-mat-components/src/fs-nav-frame/public-api.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/projects/ng-mat-components/src/fs-nav-frame/public-api.ts b/projects/ng-mat-components/src/fs-nav-frame/public-api.ts
index 0427795..15f0db5 100644
--- a/projects/ng-mat-components/src/fs-nav-frame/public-api.ts
+++ b/projects/ng-mat-components/src/fs-nav-frame/public-api.ts
@@ -3,10 +3,17 @@
  */
 
 export { FsNavFrameContentDirective } from './directives/fs-nav-frame-content.directive';
+export { FsNavFrameSidebarDirective } from './directives/fs-nav-frame-sidebar.directive';
 export { FsNavFrameComponent } from './fs-nav-frame.component';
 export { FsNavFrameModule } from './fs-nav-frame.module';
 export * from './fs-nav-frame.modules';
+export { FsNavUserProfileActionsDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-actions.directive';
+export { FsNavUserProfileNameDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-name.directive';
+export { FsNavUserProfileSubNameDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-subname.directive';
+export { FsNavUserProfileComponent } from './fs-nav-user-profile/fs-nav-user-profile.component';
 export { FsNavFrameToolbarCenterDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-center.directive';
 export { FsNavFrameToolbarEndDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-end.directive';
 export { FsNavFrameToolbarStartDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive';
 export { FsNavFrameToolbarComponent } from './nav-frame-toolbar/fs-nav-frame-toolbar.component';
+
+