From 8b483ef021baffaf619766e3ae9201f3fbed3a75 Mon Sep 17 00:00:00 2001
From: Sieciech <www.sieciech@gmail.com>
Date: Mon, 26 Jul 2021 16:43:18 +0200
Subject: [PATCH 1/2] changes

---
 docker/startup.sh                             |  14 ++-
 src/frontend/angular.json                     |  12 +-
 src/frontend/package-lock.json                |  81 ++++++++++++-
 src/frontend/package.json                     |   8 +-
 src/frontend/shell                            |   4 +-
 src/frontend/src/app/app.component.html       |  49 +++++++-
 src/frontend/src/app/app.component.scss       |  19 +++
 src/frontend/src/app/app.component.ts         | 114 ++++++++++++++++--
 src/frontend/src/app/app.module.ts            |  65 +++++++---
 .../app/modules/material/material.module.ts   |  25 ++++
 .../shared/services/app/app.service.ts        |  73 +++++++++++
 .../browser-storage.service.ts                |  37 ++++++
 .../shared/services/theme/theme.service.ts    |  41 +++++++
 .../src/app/modules/shared/shared.module.ts   |  12 ++
 src/frontend/src/app/styles/dark.scss         |  33 +++++
 src/frontend/src/app/styles/light.scss        |  33 +++++
 src/frontend/src/assets/lang/en.json          |  14 +++
 src/frontend/src/assets/lang/pl.json          |  14 +++
 src/frontend/src/index.html                   |  30 +++--
 src/frontend/src/styles.scss                  |  31 +++++
 20 files changed, 660 insertions(+), 49 deletions(-)
 create mode 100644 src/frontend/src/app/modules/material/material.module.ts
 create mode 100644 src/frontend/src/app/modules/shared/services/app/app.service.ts
 create mode 100644 src/frontend/src/app/modules/shared/services/browser-storage/browser-storage.service.ts
 create mode 100644 src/frontend/src/app/modules/shared/services/theme/theme.service.ts
 create mode 100644 src/frontend/src/app/modules/shared/shared.module.ts
 create mode 100644 src/frontend/src/app/styles/dark.scss
 create mode 100644 src/frontend/src/app/styles/light.scss
 create mode 100644 src/frontend/src/assets/lang/en.json
 create mode 100644 src/frontend/src/assets/lang/pl.json

diff --git a/docker/startup.sh b/docker/startup.sh
index 19336ff..5953e49 100644
--- a/docker/startup.sh
+++ b/docker/startup.sh
@@ -1,5 +1,15 @@
 #!/bin/bash
 
+echo "> Configure cache"
+    mkdir -p /tmp/app/{vendor/node_modules}
+    ln -s /tmp/app/node_modules /web/frontend/node_modules
+    ln -s /tmp/app/vendor /web/backend/vendor
+
+echo "> Configure user"
+    useradd developer
+    chown developer:developer /web/frontend -R
+    chown developer:developer /web/backend -R
+
 echo "> Configure logs"
     mkdir -p /var/log/{apache2,nginx,pgadmin,postgresql}
     chown postgres:adm /var/log/postgresql -R
@@ -39,7 +49,7 @@ echo "> Configure symfony"
 
 echo "> Configure angular"
     cd /web/frontend
-    npm ci
+    su developer -c 'time npm ci'
 
 echo "> Starting angular"
-    ng serve --disable-host-check --host 0.0.0.0 --poll
+    su developer -c 'ng serve --disable-host-check --host 0.0.0.0 --poll'
diff --git a/src/frontend/angular.json b/src/frontend/angular.json
index 08083a6..732b756 100644
--- a/src/frontend/angular.json
+++ b/src/frontend/angular.json
@@ -48,7 +48,17 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              {
+                "input": "src/app/styles/light.scss",
+                "bundleName": "light",
+                "inject": false
+              },
+              {
+                "input": "src/app/styles/dark.scss",
+                "bundleName": "dark",
+                "inject": false
+              }
             ],
             "scripts": [],
             "vendorChunk": true,
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index f586e94..e77112f 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -291,6 +291,23 @@
         "tslib": "^2.2.0"
       }
     },
+    "@angular/cdk": {
+      "version": "12.1.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.1.3.tgz",
+      "integrity": "sha512-uCWHk/PjddNJsdrmexasphWGbf4kYtYyhUCSd4HEBrIDjYz166MTVSr3FHgn/s8/tlVou7uTnaEZM+ILWoe2iQ==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.2.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "12.1.3",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.1.3.tgz",
@@ -491,6 +508,14 @@
         "tslib": "^2.2.0"
       }
     },
+    "@angular/material": {
+      "version": "12.1.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.1.3.tgz",
+      "integrity": "sha512-ekkg3MDEN133NhcE0du7a69lFAIFyvK6Va+YRTxYQE0BCNVMTWXtGbOXZLovDMjgo1xdXwrEJrMRBeYo+FIttA==",
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "12.1.3",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.1.3.tgz",
@@ -1699,6 +1724,22 @@
         "enhanced-resolve": "5.8.2"
       }
     },
+    "@ngx-translate/core": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-13.0.0.tgz",
+      "integrity": "sha512-+tzEp8wlqEnw0Gc7jtVRAJ6RteUjXw6JJR4O65KlnxOmJrCGPI0xjV/lKRnQeU0w4i96PQs/jtpL921Wrb7PWg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@ngx-translate/http-loader": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-6.0.0.tgz",
+      "integrity": "sha512-LCekn6qCbeXWlhESCxU1rAbZz33WzDG0lI7Ig0pYC1o5YxJWrkU9y3Y4tNi+jakQ7R6YhTR2D3ox6APxDtA0wA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2725,6 +2766,16 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -2819,6 +2870,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.2.tgz",
+      "integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4978,6 +5034,13 @@
         "escape-string-regexp": "^1.0.5"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5075,6 +5138,11 @@
       "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
       "dev": true
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -7430,6 +7498,13 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.23",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
@@ -12599,7 +12674,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 80d28eb..b9be3ea 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -12,13 +12,19 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~12.1.3",
+    "@angular/cdk": "^12.1.3",
     "@angular/common": "~12.1.3",
     "@angular/compiler": "~12.1.3",
     "@angular/core": "~12.1.3",
     "@angular/forms": "~12.1.3",
+    "@angular/material": "^12.1.3",
     "@angular/platform-browser": "~12.1.3",
     "@angular/platform-browser-dynamic": "~12.1.3",
     "@angular/router": "~12.1.3",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
+    "bootstrap": "^5.0.2",
+    "font-awesome": "^4.7.0",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
@@ -27,9 +33,9 @@
     "@angular-devkit/build-angular": "~12.1.3",
     "@angular/cli": "~12.1.3",
     "@angular/compiler-cli": "~12.1.3",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
diff --git a/src/frontend/shell b/src/frontend/shell
index a2468e8..7ad2572 100644
--- a/src/frontend/shell
+++ b/src/frontend/shell
@@ -1 +1,3 @@
-docker.exe compose -p curenet exec app bash -c 'cd /web/frontend && bash'
\ No newline at end of file
+cd ../../docker
+docker.exe compose -p curenet exec app bash -c 'cd /web/frontend && bash'
+cd ../src/frontend
\ No newline at end of file
diff --git a/src/frontend/src/app/app.component.html b/src/frontend/src/app/app.component.html
index d06582e..d0de35f 100644
--- a/src/frontend/src/app/app.component.html
+++ b/src/frontend/src/app/app.component.html
@@ -1,2 +1,47 @@
-<router-outlet></router-outlet>
-It's works, you can start coding :)
\ No newline at end of file
+
+<ng-template #toolbar>
+    <mat-toolbar [color]="isDark ? null : 'primary'">
+        <button mat-icon-button (click)="toggleSidebar()">
+          <i class="fa fa-bars"></i>
+        </button>
+        <span>My App</span>
+        <span class="flex-grow-1"></span>
+        <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+          <i class="fa fa-user"></i>
+        </button>
+    </mat-toolbar>
+</ng-template>
+<ng-container *ngIf="!isMobile">
+    <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+</ng-container>
+<mat-drawer-container class="flex-grow-1">
+    <mat-drawer [mode]="sidebarMode" [opened]="isSidebarOpen" (openedChange)="onSidebarOpenedChange($event)">
+        <div class="menu">
+            <div>menu</div>
+            <div class="hide-on-side-opened">
+                <mat-form-field class="w-100 px-3">
+                    <mat-label>{{ 'APP.LANGUAGE' | translate }}</mat-label>
+                    <mat-select [formControl]="langControl">
+                      <mat-option *ngFor="let lang of langs" [value]="lang">{{ 'LANGUAGE.'+lang.toUpperCase() | translate }}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+
+                <mat-form-field class="w-100 px-3">
+                    <mat-label>{{ 'APP.THEME' | translate }}</mat-label>
+                    <mat-select [formControl]="themeControl">
+                      <mat-option *ngFor="let theme of themes" [value]="theme">{{ 'THEME.'+theme.toUpperCase() | translate }}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+            </div>
+        </div>
+    </mat-drawer>
+  
+    <ng-container *ngIf="isMobile">
+        <ng-container *ngTemplateOutlet="toolbar"></ng-container>
+    </ng-container>
+    
+    <div class="example-sidenav-content">
+      <router-outlet></router-outlet>
+        It's works, you can start coding :)
+      </div>
+  </mat-drawer-container>
\ No newline at end of file
diff --git a/src/frontend/src/app/app.component.scss b/src/frontend/src/app/app.component.scss
index e69de29..2b2b8e2 100644
--- a/src/frontend/src/app/app.component.scss
+++ b/src/frontend/src/app/app.component.scss
@@ -0,0 +1,19 @@
+:host{
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.menu{
+    width: 250px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    > :first-child{
+        flex-grow: 1;
+    }
+}
\ No newline at end of file
diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts
index c6a5451..2e120bb 100644
--- a/src/frontend/src/app/app.component.ts
+++ b/src/frontend/src/app/app.component.ts
@@ -1,10 +1,104 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
-  title = 'CureNet';
-}
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { AppService, WindowSize } from './modules/shared/services/app/app.service';
+import { ThemeService } from './modules/shared/services/theme/theme.service';
+
+enum SidebarOpenEnum {
+  Default,
+  Open,
+  Closed,
+}
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  isMobile = true;
+  title = 'CureNet';
+  sidebarOpen = SidebarOpenEnum.Default;
+  sidebarMode = 'over';
+  defaultSidebarOpen = false;
+  lang: string;
+  theme: string;
+  langs: string[] = [];
+  themes: string[] = [];
+  themeControl = new FormControl();
+  langControl = new FormControl();
+  isDark = true;
+
+  get isSidebarOpen() {
+    switch (this.sidebarOpen) {
+      case SidebarOpenEnum.Open:
+        return true;
+        break;
+      case SidebarOpenEnum.Closed:
+        return false;
+        break;
+      default:
+        return this.defaultSidebarOpen;
+        break;
+    }
+  }
+  constructor(
+    appService: AppService,
+    themeService: ThemeService,
+  ) {
+    this.themes = themeService.getThemes();
+    this.langs = appService.getLangs();
+    this.lang = appService.getLang();
+
+    this.themeControl.valueChanges.subscribe(theme => {
+      themeService.setTheme(theme);
+    });
+    this.langControl.valueChanges.subscribe(lang => {
+      appService.changeLang(lang);
+    });
+    this.onThemeChanged(themeService.getTheme());
+    themeService.themeChange.subscribe(theme => {
+      this.onThemeChanged(theme);
+    });
+    this.onResize(appService.size);
+    appService.sizeChange.subscribe(size => {
+      this.onResize(size);
+    });
+    this.onLangChanged(appService.getLang());
+    appService.langChange.subscribe(lang => {
+      this.onLangChanged(lang);
+    });
+  }
+
+  onThemeChanged(theme: string) {
+    if (theme === undefined) {
+      return;
+    }
+    this.theme = theme;
+    this.themeControl.setValue(theme);
+    this.isDark = theme.indexOf('dark') !== -1;
+  }
+
+  onResize(size: WindowSize) {
+    if (size === undefined) {
+      return;
+    }
+    this.isMobile = size.isMobile;
+    this.defaultSidebarOpen = !this.isMobile;
+    this.sidebarMode = this.isMobile ? 'over' : 'side';
+  }
+
+  onLangChanged(lang: string) {
+    if (lang === undefined) {
+      return;
+    }
+    this.lang = lang;
+    this.langControl.setValue(lang);
+  }
+
+  toggleSidebar() {
+    this.sidebarOpen = this.isSidebarOpen ? SidebarOpenEnum.Closed : SidebarOpenEnum.Open;
+  }
+
+  onSidebarOpenedChange(opened: boolean) {
+    this.sidebarOpen = opened ? SidebarOpenEnum.Open : SidebarOpenEnum.Closed;
+  }
+}
\ No newline at end of file
diff --git a/src/frontend/src/app/app.module.ts b/src/frontend/src/app/app.module.ts
index 2c3ba29..6b83379 100644
--- a/src/frontend/src/app/app.module.ts
+++ b/src/frontend/src/app/app.module.ts
@@ -1,18 +1,47 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MaterialModule } from './modules/material/material.module';
+import { AppService } from './modules/shared/services/app/app.service';
+import { ThemeService } from './modules/shared/services/theme/theme.service';
+import { BrowserStorageService } from './modules/shared/services/browser-storage/browser-storage.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, '/assets/lang/', '.json');
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MaterialModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
+  ],
+  providers: [
+    AppService,
+    ThemeService,
+    BrowserStorageService,
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/src/frontend/src/app/modules/material/material.module.ts b/src/frontend/src/app/modules/material/material.module.ts
new file mode 100644
index 0000000..5e504e5
--- /dev/null
+++ b/src/frontend/src/app/modules/material/material.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatButtonModule} from '@angular/material/button'; 
+import {MatSidenavModule} from '@angular/material/sidenav'; 
+import {MatSelectModule} from '@angular/material/select'; 
+
+const itemsToExport = [
+  MatToolbarModule,
+  MatButtonModule,
+  MatSidenavModule,
+  MatSelectModule,
+];
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    ...itemsToExport,
+  ],
+  exports: [
+    ...itemsToExport,
+  ]
+})
+export class MaterialModule { }
diff --git a/src/frontend/src/app/modules/shared/services/app/app.service.ts b/src/frontend/src/app/modules/shared/services/app/app.service.ts
new file mode 100644
index 0000000..69d4fff
--- /dev/null
+++ b/src/frontend/src/app/modules/shared/services/app/app.service.ts
@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { fromEvent, Subject } from 'rxjs';
+import { BrowserStorageService } from '../browser-storage/browser-storage.service';
+
+export class WindowSize {
+  isMobile: boolean;
+
+  constructor(
+    public width: number,
+    public height: number,
+  ) {
+    this.isMobile = this.width <= 700;
+  }
+
+  update() {
+    this.width = window.innerWidth;
+    this.height = window.innerHeight;
+  }
+
+  static generate() {
+    return new WindowSize(window.innerWidth, window.innerHeight);
+  }
+}
+
+@Injectable()
+export class AppService {
+  private lang = 'en';
+  private defaultLang = 'en';
+  langChange = new Subject<string>();
+  size: WindowSize;
+  sizeChange = new Subject<WindowSize>();
+
+  constructor(
+    browserStorageService: BrowserStorageService,
+    private translate: TranslateService,
+  ) {
+    this.langChange.subscribe(lang => {
+      this.lang = lang;
+      browserStorageService.setItem('language', lang);
+    });
+    this.sizeChange.subscribe(size => this.size = size);
+    this.sizeChange.next(WindowSize.generate());
+    let lang = browserStorageService.getItem('language');
+    if (!lang) {
+      lang = this.defaultLang;
+    }
+    this.lang = lang;
+    this.translate.setDefaultLang(this.defaultLang);
+    this.changeLang(this.lang);
+    fromEvent(window, 'resize').subscribe(e => {
+      this.sizeChange.next(WindowSize.generate());
+    })
+  }
+
+  changeLang(lang: string) {
+    if (lang !== this.lang) {
+      this.translate.use(lang);
+      this.langChange.next(lang);
+    }
+  }
+
+  getLang() {
+    return this.lang;
+  }
+
+  getLangs() {
+    return [
+      'pl',
+      'en',
+    ];
+  }
+}
diff --git a/src/frontend/src/app/modules/shared/services/browser-storage/browser-storage.service.ts b/src/frontend/src/app/modules/shared/services/browser-storage/browser-storage.service.ts
new file mode 100644
index 0000000..5ed4972
--- /dev/null
+++ b/src/frontend/src/app/modules/shared/services/browser-storage/browser-storage.service.ts
@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class BrowserStorageService {
+
+  private storage: Storage;
+  private namespace: string;
+  constructor() {
+    this.storage = localStorage;
+    this.namespace = 'default';
+  }
+
+  setNamespace(namespace: string) {
+    this.namespace = namespace;
+  }
+
+  getNamespace(namespace: string | null = null): string {
+    return namespace ?? this.namespace;
+  }
+
+  setItem(key: string, value: any, namespace: string | null = null) {
+    namespace = this.getNamespace(namespace);
+    const path = `${namespace}.${key}`;
+    this.storage.setItem(path, JSON.stringify(value));
+  }
+
+  getItem(key: string, namespace: string | null = null): any {
+    namespace = this.getNamespace(namespace);
+    const path = `${namespace}.${key}`;
+    return JSON.parse(this.storage.getItem(path) ?? 'null');
+  }
+
+  getItemOrDefault(key: string, defaultValue: any, namespace: string | null = null): any {
+    return this.getItem(key, namespace) ?? defaultValue;
+  }
+
+}
diff --git a/src/frontend/src/app/modules/shared/services/theme/theme.service.ts b/src/frontend/src/app/modules/shared/services/theme/theme.service.ts
new file mode 100644
index 0000000..f9b46e9
--- /dev/null
+++ b/src/frontend/src/app/modules/shared/services/theme/theme.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { BrowserStorageService } from '../browser-storage/browser-storage.service';
+
+@Injectable()
+export class ThemeService {
+  private theme: string;
+  themeChange = new Subject<string>();
+
+  constructor(
+    browserStorageService: BrowserStorageService,
+  ) {
+    this.themeChange.subscribe(theme => {
+      this.theme = theme;
+      browserStorageService.setItem('current-theme', theme);
+    });
+    let userTheme = browserStorageService.getItem('current-theme');
+    if (!userTheme) {
+      userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    this.setTheme(userTheme);
+  }
+
+  getTheme() {
+    return this.theme;
+  }
+
+  setTheme(theme: string) {
+    if (theme !== this.theme) {
+      this.themeChange.next(theme);
+      document.getElementById('current-theme').setAttribute('href', `/${theme}.css`);
+    }
+  }
+
+  getThemes(): string[] {
+    return [
+      'light',
+      'dark',
+    ];
+  };
+}
diff --git a/src/frontend/src/app/modules/shared/shared.module.ts b/src/frontend/src/app/modules/shared/shared.module.ts
new file mode 100644
index 0000000..76cf203
--- /dev/null
+++ b/src/frontend/src/app/modules/shared/shared.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class SharedModule { }
diff --git a/src/frontend/src/app/styles/dark.scss b/src/frontend/src/app/styles/dark.scss
new file mode 100644
index 0000000..7a5ce35
--- /dev/null
+++ b/src/frontend/src/app/styles/dark.scss
@@ -0,0 +1,33 @@
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '~@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$frontend-primary: mat.define-palette(mat.$indigo-palette);
+$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$frontend-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$frontend-theme: mat.define-dark-theme((
+  color: (
+    primary: $frontend-primary,
+    accent: $frontend-accent,
+    warn: $frontend-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($frontend-theme);
\ No newline at end of file
diff --git a/src/frontend/src/app/styles/light.scss b/src/frontend/src/app/styles/light.scss
new file mode 100644
index 0000000..d6c36cc
--- /dev/null
+++ b/src/frontend/src/app/styles/light.scss
@@ -0,0 +1,33 @@
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '~@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$frontend-primary: mat.define-palette(mat.$indigo-palette);
+$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$frontend-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$frontend-theme: mat.define-light-theme((
+  color: (
+    primary: $frontend-primary,
+    accent: $frontend-accent,
+    warn: $frontend-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($frontend-theme);
\ No newline at end of file
diff --git a/src/frontend/src/assets/lang/en.json b/src/frontend/src/assets/lang/en.json
new file mode 100644
index 0000000..b9e76de
--- /dev/null
+++ b/src/frontend/src/assets/lang/en.json
@@ -0,0 +1,14 @@
+{
+    "THEME": {
+        "LIGHT": "Light",
+        "DARK": "Dark"
+    },
+    "LANGUAGE": {
+        "PL": "Polish",
+        "EN": "English"
+    },
+    "APP": {
+        "THEME": "Theme",
+        "LANGUAGE": "Language"
+    }
+}
\ No newline at end of file
diff --git a/src/frontend/src/assets/lang/pl.json b/src/frontend/src/assets/lang/pl.json
new file mode 100644
index 0000000..50e7c97
--- /dev/null
+++ b/src/frontend/src/assets/lang/pl.json
@@ -0,0 +1,14 @@
+{
+    "THEME": {
+        "LIGHT": "Jasny",
+        "DARK": "Ciemny"
+    },
+    "LANGUAGE": {
+        "PL": "Polski",
+        "EN": "Angielski"
+    },
+    "APP": {
+        "THEME": "Motyw",
+        "LANGUAGE": "Język"
+    }
+}
\ No newline at end of file
diff --git a/src/frontend/src/index.html b/src/frontend/src/index.html
index 3af61ec..2cb199a 100644
--- a/src/frontend/src/index.html
+++ b/src/frontend/src/index.html
@@ -1,13 +1,17 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Frontend</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Frontend</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 rel="stylesheet" href="/light.css" id="current-theme">
+  <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>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/src/frontend/src/styles.scss b/src/frontend/src/styles.scss
index 90d4ee0..291f5ae 100644
--- a/src/frontend/src/styles.scss
+++ b/src/frontend/src/styles.scss
@@ -1 +1,32 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+@import "~bootstrap/dist/css/bootstrap.css";
+@import "~font-awesome/css/font-awesome.css";
+
+body .mat-drawer.mat-drawer-side {
+  visibility: visible !important;
+  transform: none !important;
+  width: 250px;
+  &,
+  & .mat-drawer-inner-container{
+    transition-duration: 400ms !important;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+    transition-property: transform, margin-left, margin-right, width !important;
+    overflow: hidden;
+  }
+  & ~ .mat-drawer-content{
+    margin-left: 250px !important;
+  }
+  &:not(.mat-drawer-opened) {
+    width: 60px;
+    .hide-on-side-opened{
+      display: none;
+    }
+    & ~ .mat-drawer-content {
+      margin-left: 60px !important;
+    }  
+  }
+}
\ No newline at end of file
-- 
2.39.5


From 3837371268bc771b80aa171fd50c12c4ed71c280 Mon Sep 17 00:00:00 2001
From: Sieciech <www.sieciech@gmail.com>
Date: Tue, 27 Jul 2021 12:51:52 +0200
Subject: [PATCH 2/2] demo homepage and ui

---
 src/frontend/src/app/app-routing.module.ts    | 112 ++++-
 src/frontend/src/app/app.component.html       |  68 ++-
 src/frontend/src/app/app.component.scss       |  74 +++-
 src/frontend/src/app/app.component.ts         |  25 +-
 .../app/modules/admin/admin-routing.module.ts |  20 +
 .../src/app/modules/admin/admin.module.ts     |  16 +
 .../app/modules/material/material.module.ts   |   8 +-
 .../not-found/not-found.component.html        |   3 +
 .../not-found/not-found.component.scss        |   0
 .../not-found/not-found.component.ts          |  15 +
 .../shared/services/app/app.service.ts        |   3 +-
 .../shared/services/theme/theme.service.ts    |  58 +--
 .../src/app/modules/shared/shared.module.ts   |  22 +-
 src/frontend/src/app/styles/_base.scss        |   6 +
 src/frontend/src/app/styles/_template.scss    | 398 ++++++++++++++++++
 src/frontend/src/app/styles/dark.scss         |  18 +-
 src/frontend/src/app/styles/light.scss        |  18 +-
 src/frontend/src/assets/lang/en.json          |  20 +-
 src/frontend/src/assets/lang/pl.json          |  20 +-
 src/frontend/src/index.html                   |   2 +-
 src/frontend/src/styles.scss                  |  13 +
 21 files changed, 824 insertions(+), 95 deletions(-)
 create mode 100644 src/frontend/src/app/modules/admin/admin-routing.module.ts
 create mode 100644 src/frontend/src/app/modules/admin/admin.module.ts
 create mode 100644 src/frontend/src/app/modules/shared/components/not-found/not-found.component.html
 create mode 100644 src/frontend/src/app/modules/shared/components/not-found/not-found.component.scss
 create mode 100644 src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts
 create mode 100644 src/frontend/src/app/styles/_base.scss
 create mode 100644 src/frontend/src/app/styles/_template.scss

diff --git a/src/frontend/src/app/app-routing.module.ts b/src/frontend/src/app/app-routing.module.ts
index d425c6f..8458c35 100644
--- a/src/frontend/src/app/app-routing.module.ts
+++ b/src/frontend/src/app/app-routing.module.ts
@@ -1,10 +1,102 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { NotFoundComponent } from './modules/shared/components/not-found/not-found.component';
+
+interface AppMenuEntry {
+  label: string;
+  icon: string;
+  path?: string;
+  matchExact?: boolean;
+  level?: number;
+}
+
+interface AppRoute extends Route {
+  menuEntries?: AppMenuEntry[];
+}
+
+export const appRoutes: AppRoute[] = [
+  {
+    path: '',
+    component: NotFoundComponent,
+    menuEntries: [
+      {
+        label: 'MENU.HOME',
+        icon: 'fa fa-home',
+        matchExact: true,
+      },
+    ],
+  },
+  {
+    path: 'profile',
+    component: NotFoundComponent,
+    menuEntries: [
+      {
+        label: 'MENU.PROFILE',
+        icon: 'fa fa-user',
+      },
+    ],
+  },
+  {
+    path: 'community',
+    component: NotFoundComponent,
+    menuEntries: [
+      {
+        label: 'MENU.COMMUNITY',
+        icon: 'fa fa-users',
+      },
+    ],
+  },
+  {
+    path: 'messages',
+    component: NotFoundComponent,
+    menuEntries: [
+      {
+        label: 'MENU.MESSAGES',
+        icon: 'fa fa-comments',
+      },
+    ],
+  },
+  {
+    path: 'tests',
+    component: NotFoundComponent,
+    menuEntries: [
+      {
+        label: 'MENU.TESTS',
+        icon: 'fa fa-heartbeat',
+      },
+    ],
+  },
+  {
+    path: 'research',
+    component: NotFoundComponent,
+    menuEntries: [
+      {
+        label: 'MENU.RESEARCH',
+        icon: 'fa fa-flask',
+      },
+    ],
+  },
+  {
+    path: 'admin',
+    loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule),
+    menuEntries: [
+      {
+        label: 'MENU.ADMIN',
+        icon: 'fa fa-id-card',
+        matchExact: true,
+      },
+      {
+        path: 'admin/users',
+        label: 'MENU.USERS',
+        icon: 'fa fa-users',
+        level: 1,
+      }
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(appRoutes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
diff --git a/src/frontend/src/app/app.component.html b/src/frontend/src/app/app.component.html
index d0de35f..175f57e 100644
--- a/src/frontend/src/app/app.component.html
+++ b/src/frontend/src/app/app.component.html
@@ -4,11 +4,8 @@
         <button mat-icon-button (click)="toggleSidebar()">
           <i class="fa fa-bars"></i>
         </button>
-        <span>My App</span>
+        <span>{{ 'APP.NAME' | translate }}</span>
         <span class="flex-grow-1"></span>
-        <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
-          <i class="fa fa-user"></i>
-        </button>
     </mat-toolbar>
 </ng-template>
 <ng-container *ngIf="!isMobile">
@@ -17,21 +14,51 @@
 <mat-drawer-container class="flex-grow-1">
     <mat-drawer [mode]="sidebarMode" [opened]="isSidebarOpen" (openedChange)="onSidebarOpenedChange($event)">
         <div class="menu">
-            <div>menu</div>
-            <div class="hide-on-side-opened">
-                <mat-form-field class="w-100 px-3">
-                    <mat-label>{{ 'APP.LANGUAGE' | translate }}</mat-label>
-                    <mat-select [formControl]="langControl">
-                      <mat-option *ngFor="let lang of langs" [value]="lang">{{ 'LANGUAGE.'+lang.toUpperCase() | translate }}</mat-option>
-                    </mat-select>
-                  </mat-form-field>
+            <div>
+                <ng-container *ngFor="let route of appRoutes">
+                    <ng-container *ngIf="route.menuEntries">
+                        <div
+                            *ngFor="let menu of route.menuEntries"
+                            class="menu-item"
+                            [attr.style]="menu.level ? 'margin-left: '+(menu.level * 20)+'px' : ''"
+                            [routerLink]="menu.path ? menu.path : route.path"
+                            routerLinkActive="active"
+                            [routerLinkActiveOptions]="{exact: menu.matchExact}">
+                                <i [class]="menu.icon" [title]="menu.label | translate"></i>
+                                <span>{{ menu.label | translate }}</span>
+                        </div>
+                    </ng-container>
+                </ng-container>
+
+            </div>
+            <div>
+                <div class="d-flex user-box">
+                    <div class="avatar" [style.background-image]="url(user.avatar)"></div>
+                    <div class="d-flex align-items-center flex-grow-1 p-2">{{ user.name }} {{ user.surname }}</div>
+                    <div class="user-menu-container">
+                        <div class="user-menu">
+                            <button mat-icon-button [matMenuTriggerFor]="usermenu">
+                                <i class="fa fa-cog"></i>
+                            </button>
+                        </div>
+                        <mat-menu #usermenu="matMenu" yPosition="above" xPosition="before" class="w-220">
+                            <mat-form-field class="w-100 px-3">
+                                <mat-label>{{ 'APP.LANGUAGE' | translate }}</mat-label>
+                                <mat-select [formControl]="langControl">
+                                    <mat-option *ngFor="let lang of langs" [value]="lang">{{ 'LANGUAGE.'+lang.toUpperCase() | translate }}</mat-option>
+                                </mat-select>
+                            </mat-form-field>
+            
+                            <mat-form-field class="w-100 px-3">
+                                <mat-label>{{ 'APP.THEME' | translate }}</mat-label>
+                                <mat-select [formControl]="themeControl">
+                                    <mat-option *ngFor="let theme of themes" [value]="theme">{{ 'THEME.'+theme.toUpperCase() | translate }}</mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </mat-menu>
+                    </div>
+                </div>
 
-                <mat-form-field class="w-100 px-3">
-                    <mat-label>{{ 'APP.THEME' | translate }}</mat-label>
-                    <mat-select [formControl]="themeControl">
-                      <mat-option *ngFor="let theme of themes" [value]="theme">{{ 'THEME.'+theme.toUpperCase() | translate }}</mat-option>
-                    </mat-select>
-                  </mat-form-field>
             </div>
         </div>
     </mat-drawer>
@@ -42,6 +69,5 @@
     
     <div class="example-sidenav-content">
       <router-outlet></router-outlet>
-        It's works, you can start coding :)
-      </div>
-  </mat-drawer-container>
\ No newline at end of file
+    </div>
+</mat-drawer-container>
\ No newline at end of file
diff --git a/src/frontend/src/app/app.component.scss b/src/frontend/src/app/app.component.scss
index 2b2b8e2..844bf98 100644
--- a/src/frontend/src/app/app.component.scss
+++ b/src/frontend/src/app/app.component.scss
@@ -1,3 +1,4 @@
+$sidebar-width: 250px;
 :host{
     position: fixed;
     top: 0px;
@@ -8,7 +9,7 @@
     flex-direction: column;
 }
 .menu{
-    width: 250px;
+    width: $sidebar-width;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
@@ -16,4 +17,75 @@
     > :first-child{
         flex-grow: 1;
     }
+    > * {
+        width: $sidebar-width;
+    }
+}
+.avatar{
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
+    background-color: rgba(0,0,0, 0.25);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.menu-item{
+    display: flex;
+    position: relative;
+    cursor: pointer;
+    padding: 10px;
+    transition-duration: 400ms !important;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+    transition-property: all !important;
+    &:after{
+        display: block;
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 0px;
+        width: 3px;
+        height: 0%;
+        background: var(--primary-color);
+        transition-duration: 400ms !important;
+        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+        transition-property: all !important;
+    }
+    &.active{
+        &:after{
+            top: 0%;
+            height: 100%;
+        }
+    }
+    i {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 10px;
+        transition: all 0.4s ease;
+    }
+    span{
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        opacity: 0.75;
+    }
+}
+.user-box{
+    padding: 6px;
+}
+.user-menu-container{
+    width: 46px;
+    .user-menu{
+        position: absolute;
+        bottom: 6px;
+        right: 6px;
+        height: 48px;
+        width: 46px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
\ No newline at end of file
diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts
index 2e120bb..446080d 100644
--- a/src/frontend/src/app/app.component.ts
+++ b/src/frontend/src/app/app.component.ts
@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { appRoutes } from './app-routing.module';
 import { AppService, WindowSize } from './modules/shared/services/app/app.service';
+import { BrowserStorageService } from './modules/shared/services/browser-storage/browser-storage.service';
 import { ThemeService } from './modules/shared/services/theme/theme.service';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 enum SidebarOpenEnum {
   Default,
@@ -26,6 +29,12 @@ export class AppComponent {
   themeControl = new FormControl();
   langControl = new FormControl();
   isDark = true;
+  appRoutes = appRoutes;
+  user = {
+      name: 'Name',
+      surname: 'Surname',
+      avatar: 'https://www.gravatar.com/avatar/81b206a89f89d5b1123b87606075c6a8?s=514&d=robohash',
+  };
 
   get isSidebarOpen() {
     switch (this.sidebarOpen) {
@@ -40,9 +49,12 @@ export class AppComponent {
         break;
     }
   }
+
   constructor(
     appService: AppService,
     themeService: ThemeService,
+    private browserStorageService: BrowserStorageService,
+    private sanitizer: DomSanitizer,
   ) {
     this.themes = themeService.getThemes();
     this.langs = appService.getLangs();
@@ -51,6 +63,7 @@ export class AppComponent {
     this.themeControl.valueChanges.subscribe(theme => {
       themeService.setTheme(theme);
     });
+    appService.changeLang(this.lang);
     this.langControl.valueChanges.subscribe(lang => {
       appService.changeLang(lang);
     });
@@ -66,6 +79,11 @@ export class AppComponent {
     appService.langChange.subscribe(lang => {
       this.onLangChanged(lang);
     });
+
+    const sidebarUserPrefference = this.browserStorageService.getItem('sidebar.open');
+    if (sidebarUserPrefference !== null) {
+      this.sidebarOpen = sidebarUserPrefference;
+    }
   }
 
   onThemeChanged(theme: string) {
@@ -82,7 +100,7 @@ export class AppComponent {
       return;
     }
     this.isMobile = size.isMobile;
-    this.defaultSidebarOpen = !this.isMobile;
+    this.defaultSidebarOpen = !size.isMobile;
     this.sidebarMode = this.isMobile ? 'over' : 'side';
   }
 
@@ -96,9 +114,14 @@ export class AppComponent {
 
   toggleSidebar() {
     this.sidebarOpen = this.isSidebarOpen ? SidebarOpenEnum.Closed : SidebarOpenEnum.Open;
+    this.browserStorageService.setItem('sidebar.open', this.sidebarOpen);
   }
 
   onSidebarOpenedChange(opened: boolean) {
     this.sidebarOpen = opened ? SidebarOpenEnum.Open : SidebarOpenEnum.Closed;
   }
+
+  url(url: string): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`url('${url}')`);
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/app/modules/admin/admin-routing.module.ts b/src/frontend/src/app/modules/admin/admin-routing.module.ts
new file mode 100644
index 0000000..af0b82e
--- /dev/null
+++ b/src/frontend/src/app/modules/admin/admin-routing.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Route } from '@angular/router';
+import { NotFoundComponent } from '../shared/components/not-found/not-found.component';
+
+const routes: Route[] = [
+  {
+    path: '',
+    component: NotFoundComponent,
+  },
+  {
+    path: 'users',
+    component: NotFoundComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AdminRoutingModule { }
diff --git a/src/frontend/src/app/modules/admin/admin.module.ts b/src/frontend/src/app/modules/admin/admin.module.ts
new file mode 100644
index 0000000..6261d17
--- /dev/null
+++ b/src/frontend/src/app/modules/admin/admin.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AdminRoutingModule } from './admin-routing.module';
+import { SharedModule } from '../shared/shared.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    AdminRoutingModule,
+    SharedModule,
+  ]
+})
+export class AdminModule { }
diff --git a/src/frontend/src/app/modules/material/material.module.ts b/src/frontend/src/app/modules/material/material.module.ts
index 5e504e5..99357e6 100644
--- a/src/frontend/src/app/modules/material/material.module.ts
+++ b/src/frontend/src/app/modules/material/material.module.ts
@@ -1,15 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatButtonModule} from '@angular/material/button'; 
-import {MatSidenavModule} from '@angular/material/sidenav'; 
-import {MatSelectModule} from '@angular/material/select'; 
+import {MatButtonModule} from '@angular/material/button';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatSelectModule} from '@angular/material/select';
+import {MatMenuModule} from '@angular/material/menu';
 
 const itemsToExport = [
   MatToolbarModule,
   MatButtonModule,
   MatSidenavModule,
   MatSelectModule,
+  MatMenuModule,
 ];
 
 @NgModule({
diff --git a/src/frontend/src/app/modules/shared/components/not-found/not-found.component.html b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.html
new file mode 100644
index 0000000..a8a991b
--- /dev/null
+++ b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.html
@@ -0,0 +1,3 @@
+<div class="m-3 p-3">
+    {{ 'ERROR.PAGE_NOT_FOUND' | translate }}
+</div>
\ No newline at end of file
diff --git a/src/frontend/src/app/modules/shared/components/not-found/not-found.component.scss b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts
new file mode 100644
index 0000000..7cb4124
--- /dev/null
+++ b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.scss']
+})
+export class NotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/frontend/src/app/modules/shared/services/app/app.service.ts b/src/frontend/src/app/modules/shared/services/app/app.service.ts
index 69d4fff..40ae29e 100644
--- a/src/frontend/src/app/modules/shared/services/app/app.service.ts
+++ b/src/frontend/src/app/modules/shared/services/app/app.service.ts
@@ -45,9 +45,8 @@ export class AppService {
     if (!lang) {
       lang = this.defaultLang;
     }
-    this.lang = lang;
     this.translate.setDefaultLang(this.defaultLang);
-    this.changeLang(this.lang);
+    this.changeLang(lang);
     fromEvent(window, 'resize').subscribe(e => {
       this.sizeChange.next(WindowSize.generate());
     })
diff --git a/src/frontend/src/app/modules/shared/services/theme/theme.service.ts b/src/frontend/src/app/modules/shared/services/theme/theme.service.ts
index f9b46e9..080d21c 100644
--- a/src/frontend/src/app/modules/shared/services/theme/theme.service.ts
+++ b/src/frontend/src/app/modules/shared/services/theme/theme.service.ts
@@ -4,38 +4,38 @@ import { BrowserStorageService } from '../browser-storage/browser-storage.servic
 
 @Injectable()
 export class ThemeService {
-  private theme: string;
-  themeChange = new Subject<string>();
+    private theme: string;
+    themeChange = new Subject<string>();
 
-  constructor(
-    browserStorageService: BrowserStorageService,
-  ) {
-    this.themeChange.subscribe(theme => {
-      this.theme = theme;
-      browserStorageService.setItem('current-theme', theme);
-    });
-    let userTheme = browserStorageService.getItem('current-theme');
-    if (!userTheme) {
-      userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    constructor(
+        browserStorageService: BrowserStorageService
+    ) {
+        this.themeChange.subscribe(theme => {
+            this.theme = theme;
+            browserStorageService.setItem('current-theme', theme);
+        });
+        let userTheme = browserStorageService.getItem('current-theme');
+        if (!userTheme) {
+            userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        this.setTheme(userTheme);
     }
-    this.setTheme(userTheme);
-  }
 
-  getTheme() {
-    return this.theme;
-  }
-
-  setTheme(theme: string) {
-    if (theme !== this.theme) {
-      this.themeChange.next(theme);
-      document.getElementById('current-theme').setAttribute('href', `/${theme}.css`);
+    getTheme() {
+        return this.theme;
     }
-  }
 
-  getThemes(): string[] {
-    return [
-      'light',
-      'dark',
-    ];
-  };
+    setTheme(theme: string) {
+        if (theme !== this.theme) {
+            this.themeChange.next(theme);
+            document.getElementById('current-theme').setAttribute('href', `/${theme}.css`);
+        }
+    }
+
+    getThemes(): string[] {
+        return [
+            'light',
+            'dark',
+        ];
+    };
 }
diff --git a/src/frontend/src/app/modules/shared/shared.module.ts b/src/frontend/src/app/modules/shared/shared.module.ts
index 76cf203..344df7e 100644
--- a/src/frontend/src/app/modules/shared/shared.module.ts
+++ b/src/frontend/src/app/modules/shared/shared.module.ts
@@ -1,12 +1,24 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
-
+import { NotFoundComponent } from './components/not-found/not-found.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpLoaderFactory } from 'src/app/app.module';
+import { HttpClient } from '@angular/common/http';
 
 @NgModule({
-  declarations: [],
+  declarations: [
+    NotFoundComponent
+  ],
   imports: [
-    CommonModule
-  ]
+    CommonModule,
+    TranslateModule.forRoot({
+        defaultLanguage: 'en',
+        loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient]
+        }
+      }),
+    ],
 })
 export class SharedModule { }
diff --git a/src/frontend/src/app/styles/_base.scss b/src/frontend/src/app/styles/_base.scss
new file mode 100644
index 0000000..300670b
--- /dev/null
+++ b/src/frontend/src/app/styles/_base.scss
@@ -0,0 +1,6 @@
+@use 'sass:map';
+
+$primary-color: map.get($theme, color, primary, 500);
+body {
+    --primary-color: #{$primary-color};
+}
\ No newline at end of file
diff --git a/src/frontend/src/app/styles/_template.scss b/src/frontend/src/app/styles/_template.scss
new file mode 100644
index 0000000..8d184f4
--- /dev/null
+++ b/src/frontend/src/app/styles/_template.scss
@@ -0,0 +1,398 @@
+$theme: (
+  color: (
+    primary: (
+      50: #e8eaf6,
+      100: #c5cae9,
+      200: #9fa8da,
+      300: #7986cb,
+      400: #5c6bc0,
+      500: #3f51b5,
+      600: #3949ab,
+      700: #303f9f,
+      800: #283593,
+      900: #1a237e,
+      A100: #8c9eff,
+      A200: #536dfe,
+      A400: #3d5afe,
+      A700: #304ffe,
+      contrast: (
+        50: rgba(0, 0, 0, 0.87),
+        100: rgba(0, 0, 0, 0.87),
+        200: rgba(0, 0, 0, 0.87),
+        300: white,
+        400: white,
+        500: white,
+        600: white,
+        700: white,
+        800: white,
+        900: white,
+        A100: rgba(0, 0, 0, 0.87),
+        A200: white,
+        A400: white,
+        A700: white,
+      ),
+      default: #3f51b5,
+      lighter: #c5cae9,
+      darker: #303f9f,
+      text: #3f51b5,
+      default-contrast: white,
+      lighter-contrast: rgba(0, 0, 0, 0.87),
+      darker-contrast: white,
+      "50-contrast": rgba(0, 0, 0, 0.87),
+      "100-contrast": rgba(0, 0, 0, 0.87),
+      "200-contrast": rgba(0, 0, 0, 0.87),
+      "300-contrast": white,
+      "400-contrast": white,
+      "500-contrast": white,
+      "600-contrast": white,
+      "700-contrast": white,
+      "800-contrast": white,
+      "900-contrast": white,
+      "A100-contrast": rgba(0, 0, 0, 0.87),
+      "A200-contrast": white,
+      "A400-contrast": white,
+      "A700-contrast": white,
+      "contrast-contrast": null,
+    ),
+    accent: (
+      50: #fce4ec,
+      100: #f8bbd0,
+      200: #f48fb1,
+      300: #f06292,
+      400: #ec407a,
+      500: #e91e63,
+      600: #d81b60,
+      700: #c2185b,
+      800: #ad1457,
+      900: #880e4f,
+      A100: #ff80ab,
+      A200: #ff4081,
+      A400: #f50057,
+      A700: #c51162,
+      contrast: (
+        50: rgba(0, 0, 0, 0.87),
+        100: rgba(0, 0, 0, 0.87),
+        200: rgba(0, 0, 0, 0.87),
+        300: rgba(0, 0, 0, 0.87),
+        400: rgba(0, 0, 0, 0.87),
+        500: white,
+        600: white,
+        700: white,
+        800: white,
+        900: white,
+        A100: rgba(0, 0, 0, 0.87),
+        A200: white,
+        A400: white,
+        A700: white,
+      ),
+      default: #ff4081,
+      lighter: #ff80ab,
+      darker: #f50057,
+      text: #ff4081,
+      default-contrast: white,
+      lighter-contrast: rgba(0, 0, 0, 0.87),
+      darker-contrast: white,
+      "50-contrast": rgba(0, 0, 0, 0.87),
+      "100-contrast": rgba(0, 0, 0, 0.87),
+      "200-contrast": rgba(0, 0, 0, 0.87),
+      "300-contrast": rgba(0, 0, 0, 0.87),
+      "400-contrast": rgba(0, 0, 0, 0.87),
+      "500-contrast": white,
+      "600-contrast": white,
+      "700-contrast": white,
+      "800-contrast": white,
+      "900-contrast": white,
+      "A100-contrast": rgba(0, 0, 0, 0.87),
+      "A200-contrast": white,
+      "A400-contrast": white,
+      "A700-contrast": white,
+      "contrast-contrast": null,
+    ),
+    warn: (
+      50: #ffebee,
+      100: #ffcdd2,
+      200: #ef9a9a,
+      300: #e57373,
+      400: #ef5350,
+      500: #f44336,
+      600: #e53935,
+      700: #d32f2f,
+      800: #c62828,
+      900: #b71c1c,
+      A100: #ff8a80,
+      A200: #ff5252,
+      A400: #ff1744,
+      A700: #d50000,
+      contrast: (
+        50: rgba(0, 0, 0, 0.87),
+        100: rgba(0, 0, 0, 0.87),
+        200: rgba(0, 0, 0, 0.87),
+        300: rgba(0, 0, 0, 0.87),
+        400: rgba(0, 0, 0, 0.87),
+        500: white,
+        600: white,
+        700: white,
+        800: white,
+        900: white,
+        A100: rgba(0, 0, 0, 0.87),
+        A200: white,
+        A400: white,
+        A700: white,
+      ),
+      default: #f44336,
+      lighter: #ffcdd2,
+      darker: #d32f2f,
+      text: #f44336,
+      default-contrast: white,
+      lighter-contrast: rgba(0, 0, 0, 0.87),
+      darker-contrast: white,
+      "50-contrast": rgba(0, 0, 0, 0.87),
+      "100-contrast": rgba(0, 0, 0, 0.87),
+      "200-contrast": rgba(0, 0, 0, 0.87),
+      "300-contrast": rgba(0, 0, 0, 0.87),
+      "400-contrast": rgba(0, 0, 0, 0.87),
+      "500-contrast": white,
+      "600-contrast": white,
+      "700-contrast": white,
+      "800-contrast": white,
+      "900-contrast": white,
+      "A100-contrast": rgba(0, 0, 0, 0.87),
+      "A200-contrast": white,
+      "A400-contrast": white,
+      "A700-contrast": white,
+      "contrast-contrast": null,
+    ),
+    is-dark: true,
+    foreground: (
+      base: white,
+      divider: rgba(255, 255, 255, 0.12),
+      dividers: rgba(255, 255, 255, 0.12),
+      disabled: rgba(255, 255, 255, 0.5),
+      disabled-button: rgba(255, 255, 255, 0.3),
+      disabled-text: rgba(255, 255, 255, 0.5),
+      elevation: black,
+      hint-text: rgba(255, 255, 255, 0.5),
+      secondary-text: rgba(255, 255, 255, 0.7),
+      icon: white,
+      icons: white,
+      text: white,
+      slider-min: white,
+      slider-off: rgba(255, 255, 255, 0.3),
+      slider-off-active: rgba(255, 255, 255, 0.3),
+    ),
+    background: (
+      status-bar: black,
+      app-bar: #212121,
+      background: #303030,
+      hover: rgba(255, 255, 255, 0.04),
+      card: #424242,
+      dialog: #424242,
+      disabled-button: rgba(255, 255, 255, 0.12),
+      raised-button: #424242,
+      focused-button: rgba(255, 255, 255, 0.12),
+      selected-button: #212121,
+      selected-disabled-button: #424242,
+      disabled-button-toggle: black,
+      unselected-chip: #616161,
+      disabled-list-option: black,
+      tooltip: #616161,
+    ),
+  ),
+  primary: (
+    50: #e8eaf6,
+    100: #c5cae9,
+    200: #9fa8da,
+    300: #7986cb,
+    400: #5c6bc0,
+    500: #3f51b5,
+    600: #3949ab,
+    700: #303f9f,
+    800: #283593,
+    900: #1a237e,
+    A100: #8c9eff,
+    A200: #536dfe,
+    A400: #3d5afe,
+    A700: #304ffe,
+    contrast: (
+      50: rgba(0, 0, 0, 0.87),
+      100: rgba(0, 0, 0, 0.87),
+      200: rgba(0, 0, 0, 0.87),
+      300: white,
+      400: white,
+      500: white,
+      600: white,
+      700: white,
+      800: white,
+      900: white,
+      A100: rgba(0, 0, 0, 0.87),
+      A200: white,
+      A400: white,
+      A700: white,
+    ),
+    default: #3f51b5,
+    lighter: #c5cae9,
+    darker: #303f9f,
+    text: #3f51b5,
+    default-contrast: white,
+    lighter-contrast: rgba(0, 0, 0, 0.87),
+    darker-contrast: white,
+    "50-contrast": rgba(0, 0, 0, 0.87),
+    "100-contrast": rgba(0, 0, 0, 0.87),
+    "200-contrast": rgba(0, 0, 0, 0.87),
+    "300-contrast": white,
+    "400-contrast": white,
+    "500-contrast": white,
+    "600-contrast": white,
+    "700-contrast": white,
+    "800-contrast": white,
+    "900-contrast": white,
+    "A100-contrast": rgba(0, 0, 0, 0.87),
+    "A200-contrast": white,
+    "A400-contrast": white,
+    "A700-contrast": white,
+    "contrast-contrast": null,
+  ),
+  accent: (
+    50: #fce4ec,
+    100: #f8bbd0,
+    200: #f48fb1,
+    300: #f06292,
+    400: #ec407a,
+    500: #e91e63,
+    600: #d81b60,
+    700: #c2185b,
+    800: #ad1457,
+    900: #880e4f,
+    A100: #ff80ab,
+    A200: #ff4081,
+    A400: #f50057,
+    A700: #c51162,
+    contrast: (
+      50: rgba(0, 0, 0, 0.87),
+      100: rgba(0, 0, 0, 0.87),
+      200: rgba(0, 0, 0, 0.87),
+      300: rgba(0, 0, 0, 0.87),
+      400: rgba(0, 0, 0, 0.87),
+      500: white,
+      600: white,
+      700: white,
+      800: white,
+      900: white,
+      A100: rgba(0, 0, 0, 0.87),
+      A200: white,
+      A400: white,
+      A700: white,
+    ),
+    default: #ff4081,
+    lighter: #ff80ab,
+    darker: #f50057,
+    text: #ff4081,
+    default-contrast: white,
+    lighter-contrast: rgba(0, 0, 0, 0.87),
+    darker-contrast: white,
+    "50-contrast": rgba(0, 0, 0, 0.87),
+    "100-contrast": rgba(0, 0, 0, 0.87),
+    "200-contrast": rgba(0, 0, 0, 0.87),
+    "300-contrast": rgba(0, 0, 0, 0.87),
+    "400-contrast": rgba(0, 0, 0, 0.87),
+    "500-contrast": white,
+    "600-contrast": white,
+    "700-contrast": white,
+    "800-contrast": white,
+    "900-contrast": white,
+    "A100-contrast": rgba(0, 0, 0, 0.87),
+    "A200-contrast": white,
+    "A400-contrast": white,
+    "A700-contrast": white,
+    "contrast-contrast": null,
+  ),
+  warn: (
+    50: #ffebee,
+    100: #ffcdd2,
+    200: #ef9a9a,
+    300: #e57373,
+    400: #ef5350,
+    500: #f44336,
+    600: #e53935,
+    700: #d32f2f,
+    800: #c62828,
+    900: #b71c1c,
+    A100: #ff8a80,
+    A200: #ff5252,
+    A400: #ff1744,
+    A700: #d50000,
+    contrast: (
+      50: rgba(0, 0, 0, 0.87),
+      100: rgba(0, 0, 0, 0.87),
+      200: rgba(0, 0, 0, 0.87),
+      300: rgba(0, 0, 0, 0.87),
+      400: rgba(0, 0, 0, 0.87),
+      500: white,
+      600: white,
+      700: white,
+      800: white,
+      900: white,
+      A100: rgba(0, 0, 0, 0.87),
+      A200: white,
+      A400: white,
+      A700: white,
+    ),
+    default: #f44336,
+    lighter: #ffcdd2,
+    darker: #d32f2f,
+    text: #f44336,
+    default-contrast: white,
+    lighter-contrast: rgba(0, 0, 0, 0.87),
+    darker-contrast: white,
+    "50-contrast": rgba(0, 0, 0, 0.87),
+    "100-contrast": rgba(0, 0, 0, 0.87),
+    "200-contrast": rgba(0, 0, 0, 0.87),
+    "300-contrast": rgba(0, 0, 0, 0.87),
+    "400-contrast": rgba(0, 0, 0, 0.87),
+    "500-contrast": white,
+    "600-contrast": white,
+    "700-contrast": white,
+    "800-contrast": white,
+    "900-contrast": white,
+    "A100-contrast": rgba(0, 0, 0, 0.87),
+    "A200-contrast": white,
+    "A400-contrast": white,
+    "A700-contrast": white,
+    "contrast-contrast": null,
+  ),
+  is-dark: true,
+  foreground: (
+    base: white,
+    divider: rgba(255, 255, 255, 0.12),
+    dividers: rgba(255, 255, 255, 0.12),
+    disabled: rgba(255, 255, 255, 0.5),
+    disabled-button: rgba(255, 255, 255, 0.3),
+    disabled-text: rgba(255, 255, 255, 0.5),
+    elevation: black,
+    hint-text: rgba(255, 255, 255, 0.5),
+    secondary-text: rgba(255, 255, 255, 0.7),
+    icon: white,
+    icons: white,
+    text: white,
+    slider-min: white,
+    slider-off: rgba(255, 255, 255, 0.3),
+    slider-off-active: rgba(255, 255, 255, 0.3),
+  ),
+  background: (
+    status-bar: black,
+    app-bar: #212121,
+    background: #303030,
+    hover: rgba(255, 255, 255, 0.04),
+    card: #424242,
+    dialog: #424242,
+    disabled-button: rgba(255, 255, 255, 0.12),
+    raised-button: #424242,
+    focused-button: rgba(255, 255, 255, 0.12),
+    selected-button: #212121,
+    selected-disabled-button: #424242,
+    disabled-button-toggle: black,
+    unselected-chip: #616161,
+    disabled-list-option: black,
+    tooltip: #616161,
+  ),
+);
diff --git a/src/frontend/src/app/styles/dark.scss b/src/frontend/src/app/styles/dark.scss
index 7a5ce35..df3b111 100644
--- a/src/frontend/src/app/styles/dark.scss
+++ b/src/frontend/src/app/styles/dark.scss
@@ -11,23 +11,25 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$frontend-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$theme-primary: mat.define-palette(mat.$blue-palette);
+$theme-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$frontend-warn: mat.define-palette(mat.$red-palette);
+$theme-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$frontend-theme: mat.define-dark-theme((
+$theme: mat.define-dark-theme((
   color: (
-    primary: $frontend-primary,
-    accent: $frontend-accent,
-    warn: $frontend-warn,
+    primary: $theme-primary,
+    accent: $theme-accent,
+    warn: $theme-warn,
   )
 ));
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-component-themes($frontend-theme);
\ No newline at end of file
+@include mat.all-component-themes($theme);
+
+@import "./base";
diff --git a/src/frontend/src/app/styles/light.scss b/src/frontend/src/app/styles/light.scss
index d6c36cc..423617d 100644
--- a/src/frontend/src/app/styles/light.scss
+++ b/src/frontend/src/app/styles/light.scss
@@ -11,23 +11,25 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$frontend-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$theme-primary: mat.define-palette(mat.$indigo-palette);
+$theme-accent: mat.define-palette(mat.$light-blue-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$frontend-warn: mat.define-palette(mat.$red-palette);
+$theme-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$frontend-theme: mat.define-light-theme((
+$theme: mat.define-light-theme((
   color: (
-    primary: $frontend-primary,
-    accent: $frontend-accent,
-    warn: $frontend-warn,
+    primary: $theme-primary,
+    accent: $theme-accent,
+    warn: $theme-warn,
   )
 ));
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-component-themes($frontend-theme);
\ No newline at end of file
+@include mat.all-component-themes($theme);
+
+@import "./base";
\ No newline at end of file
diff --git a/src/frontend/src/assets/lang/en.json b/src/frontend/src/assets/lang/en.json
index b9e76de..58dc61a 100644
--- a/src/frontend/src/assets/lang/en.json
+++ b/src/frontend/src/assets/lang/en.json
@@ -1,4 +1,12 @@
 {
+    "APP": {
+        "NAME": "CureNet",
+        "THEME": "Theme",
+        "LANGUAGE": "Language"
+    },
+    "ERROR": {
+        "PAGE_NOT_FOUND": "Page not found or not implemented yet!"
+    },
     "THEME": {
         "LIGHT": "Light",
         "DARK": "Dark"
@@ -7,8 +15,14 @@
         "PL": "Polish",
         "EN": "English"
     },
-    "APP": {
-        "THEME": "Theme",
-        "LANGUAGE": "Language"
+    "MENU": {
+        "HOME": "Dashboard",
+        "PROFILE": "Profile",
+        "COMMUNITY": "Community",
+        "MESSAGES": "Messages",
+        "TESTS": "Laboratory tests",
+        "RESEARCH": "Research",
+        "ADMIN": "Admin",
+        "USERS": "Users"
     }
 }
\ No newline at end of file
diff --git a/src/frontend/src/assets/lang/pl.json b/src/frontend/src/assets/lang/pl.json
index 50e7c97..6855253 100644
--- a/src/frontend/src/assets/lang/pl.json
+++ b/src/frontend/src/assets/lang/pl.json
@@ -1,4 +1,12 @@
 {
+    "APP": {
+        "NAME": "CureNet",
+        "THEME": "Motyw",
+        "LANGUAGE": "Język"
+    },
+    "ERROR": {
+        "PAGE_NOT_FOUND": "Nie znaleziono strony lub nie została ona jeszcze zaimplementowana!"
+    },
     "THEME": {
         "LIGHT": "Jasny",
         "DARK": "Ciemny"
@@ -7,8 +15,14 @@
         "PL": "Polski",
         "EN": "Angielski"
     },
-    "APP": {
-        "THEME": "Motyw",
-        "LANGUAGE": "Język"
+    "MENU": {
+        "HOME": "Kokpit",
+        "PROFILE": "Profil",
+        "COMMUNITY": "Społeczność",
+        "MESSAGES": "Wiadomości",
+        "TESTS": "Wyniki badań",
+        "RESEARCH": "Badania naukowe",
+        "ADMIN": "Panel administratora",
+        "USERS": "Użytkownicy"
     }
 }
\ No newline at end of file
diff --git a/src/frontend/src/index.html b/src/frontend/src/index.html
index 2cb199a..0b791e2 100644
--- a/src/frontend/src/index.html
+++ b/src/frontend/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Frontend</title>
+  <title>CureNet</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
diff --git a/src/frontend/src/styles.scss b/src/frontend/src/styles.scss
index 291f5ae..ef52523 100644
--- a/src/frontend/src/styles.scss
+++ b/src/frontend/src/styles.scss
@@ -22,6 +22,16 @@ body .mat-drawer.mat-drawer-side {
   }
   &:not(.mat-drawer-opened) {
     width: 60px;
+    .menu-item{
+      margin-left: 0px !important;
+      &:after{
+        right: 190px;
+      }
+      & > i{
+        width: 40px;
+        font-size: 120%;
+      }
+    }
     .hide-on-side-opened{
       display: none;
     }
@@ -29,4 +39,7 @@ body .mat-drawer.mat-drawer-side {
       margin-left: 60px !important;
     }  
   }
+}
+.w-220{
+  width: 220px;
 }
\ No newline at end of file
-- 
2.39.5