src/frontend/src/app/app-routing.module.ts

@@ -1,10 +1,102 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Route, RouterModule } from '@angular/router';
+import { NotFoundComponent } from './modules/shared/components/not-found/not-found.component';
 
-const routes: Routes = [];
+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(routes)],
+  imports: [RouterModule.forRoot(appRoutes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

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>
-            <div class="hide-on-side-opened">
+                <ng-container *ngFor="let route of appRoutes">
-                <mat-form-field class="w-100 px-3">
+                    <ng-container *ngIf="route.menuEntries">
-                    <mat-label>{{ 'APP.LANGUAGE' | translate }}</mat-label>
+                        <div
-                    <mat-select [formControl]="langControl">
+                            *ngFor="let menu of route.menuEntries"
-                      <mat-option *ngFor="let lang of langs" [value]="lang">{{ 'LANGUAGE.'+lang.toUpperCase() | translate }}</mat-option>
+                            class="menu-item"
-                    </mat-select>
+                            [attr.style]="menu.level ? 'margin-left: '+(menu.level * 20)+'px' : ''"
-                  </mat-form-field>
+                            [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>
-      </div>
+</mat-drawer-container>
-  </mat-drawer-container>

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;
+    }
 }

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}')`);
+  }
 }

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 { }

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 { }

src/frontend/src/app/modules/material/material.module.ts

@@ -4,12 +4,14 @@ 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 {MatMenuModule} from '@angular/material/menu';
 
 const itemsToExport = [
   MatToolbarModule,
   MatButtonModule,
   MatSidenavModule,
   MatSelectModule,
+  MatMenuModule,
 ];
 
 @NgModule({

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>

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 {
+  }
+
+}

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());
     })

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;
+    private theme: string;
-  themeChange = new Subject<string>();
+    themeChange = new Subject<string>();
 
-  constructor(
+    constructor(
-    browserStorageService: BrowserStorageService,
+        browserStorageService: BrowserStorageService
-  ) {
+    ) {
-    this.themeChange.subscribe(theme => {
+        this.themeChange.subscribe(theme => {
-      this.theme = theme;
+            this.theme = theme;
-      browserStorageService.setItem('current-theme', theme);
+            browserStorageService.setItem('current-theme', theme);
-    });
+        });
-    let userTheme = browserStorageService.getItem('current-theme');
+        let userTheme = browserStorageService.getItem('current-theme');
-    if (!userTheme) {
+        if (!userTheme) {
-      userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        this.setTheme(userTheme);
     }
-    this.setTheme(userTheme);
-  }
 
-  getTheme() {
+    getTheme() {
-    return this.theme;
+        return this.theme;
-  }
-
-  setTheme(theme: string) {
-    if (theme !== this.theme) {
-      this.themeChange.next(theme);
-      document.getElementById('current-theme').setAttribute('href', `/${theme}.css`);
     }
-  }
 
-  getThemes(): string[] {
+    setTheme(theme: string) {
-    return [
+        if (theme !== this.theme) {
-      'light',
+            this.themeChange.next(theme);
-      'dark',
+            document.getElementById('current-theme').setAttribute('href', `/${theme}.css`);
-    ];
+        }
-  };
+    }
+
+    getThemes(): string[] {
+        return [
+            'light',
+            'dark',
+        ];
+    };
 }

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 { }

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};
+}

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,
+  ),
+);

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);
+$theme-primary: mat.define-palette(mat.$blue-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$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,
+    primary: $theme-primary,
-    accent: $frontend-accent,
+    accent: $theme-accent,
-    warn: $frontend-warn,
+    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);
+@include mat.all-component-themes($theme);
+
+@import "./base";

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);
+$theme-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$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,
+    primary: $theme-primary,
-    accent: $frontend-accent,
+    accent: $theme-accent,
-    warn: $frontend-warn,
+    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);
+@include mat.all-component-themes($theme);
+
+@import "./base";

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": {
+    "MENU": {
-        "THEME": "Theme",
+        "HOME": "Dashboard",
-        "LANGUAGE": "Language"
+        "PROFILE": "Profile",
+        "COMMUNITY": "Community",
+        "MESSAGES": "Messages",
+        "TESTS": "Laboratory tests",
+        "RESEARCH": "Research",
+        "ADMIN": "Admin",
+        "USERS": "Users"
     }
 }

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": {
+    "MENU": {
-        "THEME": "Motyw",
+        "HOME": "Kokpit",
-        "LANGUAGE": "Język"
+        "PROFILE": "Profil",
+        "COMMUNITY": "Społeczność",
+        "MESSAGES": "Wiadomości",
+        "TESTS": "Wyniki badań",
+        "RESEARCH": "Badania naukowe",
+        "ADMIN": "Panel administratora",
+        "USERS": "Użytkownicy"
     }
 }

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">

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;
     }
@@ -30,3 +40,6 @@ body .mat-drawer.mat-drawer-side {
     }  
   }
 }
+.w-220{
+  width: 220px;
+}