Initial implementation

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { ProjectsComponent } from './components/projects/projects.component';
 import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
 import { SettingsComponent } from './components/settings/settings.component';
 import { LocalServerComponent } from './components/local-server/local-server.component';
+import { PreferencesComponent } from './components/preferences/preferences.component';
 
 const routes: Routes = [
   {
@@ -17,7 +18,8 @@ const routes: Routes = [
       { path: 'servers', component: ServersComponent },
       { path: 'local', component: LocalServerComponent },
       { path: 'server/:server_id/projects', component: ProjectsComponent },
-      { path: 'settings', component: SettingsComponent }
+      { path: 'settings', component: SettingsComponent },
+      { path: 'preferences', component: PreferencesComponent }
     ]
   },
   { path: 'server/:server_id/project/:project_id', component: ProjectMapComponent }

src/app/app.module.ts

@@ -88,6 +88,7 @@ import { DrawingAddedComponent } from './components/drawings-listeners/drawing-a
 import { StyleEditorDialogComponent } from './components/project-map/drawings-editors/style-editor/style-editor.component';
 import { EditTextActionComponent } from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component';
 import { TextEditorDialogComponent } from './components/project-map/drawings-editors/text-editor/text-editor.component';
+import { PreferencesComponent } from './components/preferences/preferences.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -124,6 +125,7 @@ if (environment.production) {
     EditTextActionComponent,
     ProjectMapShortcutsComponent,
     SettingsComponent,
+    PreferencesComponent,
     LocalServerComponent,
     ProgressComponent,
     ServerDiscoveryComponent,

src/app/components/preferences/preferences.component.html

@@ -0,0 +1,26 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Preferences</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <mat-sidenav-container class="sidenav-container" style="height:500px;">
+
+            <mat-sidenav
+                opened="true" 
+                disableClose="true">
+                <mat-nav-list>
+                    <a mat-list-item href="/first-page">General</a>
+                    <a mat-list-item href="/second-page">QEMU</a>
+                    <a mat-list-item href="/third-page">VirtualBox</a>
+                </mat-nav-list>
+            </mat-sidenav>
+
+            <mat-sidenav-content>
+                <router-outlet></router-outlet>
+            </mat-sidenav-content>
+
+        </mat-sidenav-container>
+    </div>
+</div>

src/app/components/preferences/preferences.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from "@angular/core";
+
+
+@Component({
+    selector: 'app-preferences',
+    templateUrl: './preferences.component.html',
+    styleUrls: ['./preferences.component.scss']
+})
+export class PreferencesComponent implements OnInit {
+
+    constructor() {}
+
+    ngOnInit() {}
+
+}

src/app/components/project-map/project-map.component.html

@@ -78,6 +78,12 @@
       <mat-toolbar-row *ngIf="!readonly">
         <app-template [server]="server" (onNodeCreation)="onNodeCreation($event)"></app-template>
       </mat-toolbar-row>
+
+      <mat-toolbar-row *ngIf="!readonly">
+        <button mat-icon-button routerLink="/preferences">
+          <mat-icon>settings_applications</mat-icon>
+        </button>
+      </mat-toolbar-row>
     </mat-toolbar>
   </div>