Implemented own navigation offcanvas

Added all pages and inserted images
Fixed redirections to /stats

.nx/cache/d/daemon.log

@@ -459968,3 +459968,78 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-23T16:11:15.174Z - Time taken for 'hash changed files from watcher' 55.83329999446869ms
 [NX Daemon Server] - 2023-11-23T16:11:15.174Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-23T16:11:15.174Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-24T05:36:06.935Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-24T05:36:06.941Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-24T05:36:06.948Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-24T05:36:06.950Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-24T05:36:06.950Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-24T05:36:06.951Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-24T05:36:07.482Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-11-24T05:36:07.482Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-24T05:36:07.484Z - Time taken for 'hash changed files from watcher' 59.277300000190735ms
+[NX Daemon Server] - 2023-11-24T05:36:07.484Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-24T05:36:07.485Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-25T17:58:51.339Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-25T17:58:51.347Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-25T17:58:51.348Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-25T17:58:51.349Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-25T17:58:51.350Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-25T17:58:51.351Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-25T17:58:52.037Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-11-25T17:58:52.037Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-25T17:58:52.038Z - Time taken for 'hash changed files from watcher' 227.64800000190735ms
+[NX Daemon Server] - 2023-11-25T17:58:52.039Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-25T17:58:52.040Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-25T17:58:52.040Z - Done responding to the client null

.nx/cache/d/server-process.json

@@ -1 +1 @@
-{"processId":18144}
+{"processId":10332}

src/app/journal/journal-character/journal-character.component.html

@@ -1 +1,15 @@
-<p>journal-character works!</p>
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img
+    style="height: 100%"
+    src="assets/images/character_coming_soon.jpeg"
+    alt=""
+  />
+</div>

src/app/journal/journal-home/journal-home.component.html

@@ -2,9 +2,10 @@
   <!-- Here the different pages are rendered -->
   <router-outlet></router-outlet>
 
-  <app-tabbar id="tabbar" [class]="hide() ? 'hidden' : ''"></app-tabbar>
+  <app-tabbar id="tabbar" [class]="hideTabbar() ? 'hidden' : ''"></app-tabbar>
   <details-panel></details-panel>
 
-  <app-offcanvas #offcanvas></app-offcanvas>
-  <!-- <button class="navigation-button" (click)="openNavigation()">open</button> -->
+  <navigation-panel
+    [showAdditionalNavigation]="hideTabbar()"
+  ></navigation-panel>
 </div>

src/app/journal/journal-home/journal-home.component.scss

@@ -17,9 +17,6 @@ app-tabbar{
     display: flex;
     justify-content: center;
     width: 100%;
-    @media (height < 950px){
-        display: none;
-    }
 }
 
 .hidden{

src/app/journal/journal-home/journal-home.component.ts

@@ -1,6 +1,6 @@
-import { Component, ViewChild, AfterViewInit } from '@angular/core';
-import { NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
-import { OffcanvasComponent } from './offcanvas/offcanvas.component';
+import { Component, ViewChild } from '@angular/core';
+import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-journal-home',
@@ -8,23 +8,44 @@ import { OffcanvasComponent } from './offcanvas/offcanvas.component';
   styleUrls: ['./journal-home.component.scss'],
 })
 export class JournalHomeComponent {
-  @ViewChild('offcanvas') offcanvasNavigation?: OffcanvasComponent;
+  public constructor(
+    public navigation: NavigationPanelService,
+    private router: Router
+  ) {}
 
-  public openNavigation(): void {
-    this.offcanvasNavigation?.openNavigation();
-  }
+  private isNavigationOpen: boolean = false;
+
+  ngOnInit() {
+    const width = window.innerWidth;
+    this.navigation.showNavigationPanel$.subscribe((state) => {
+      this.isNavigationOpen = state;
+    });
 
-  // If the weapon-container is too close to the bottom of the screen, the navbar is hidden.
-  public hide(): boolean {
-    const element = document.getElementsByClassName(
-      'weapon-spell-container'
-    )[0];
+    window.addEventListener('mousemove', (event) => {
+      if (event.clientX < 10 && !this.isNavigationOpen) {
+        this.navigation.openNavigation();
+      }
+    });
+
+    window.addEventListener('mousemove', (event) => {
+      if (event.clientX > width / 4 && this.isNavigationOpen) {
+        this.navigation.closeNavigation();
+      }
+    });
+  }
 
-    const rect = element!.getBoundingClientRect();
-    console.log(rect.bottom, window.innerHeight);
-    const distanceToBottom = window.innerHeight - rect.bottom;
-    if (distanceToBottom < (window.innerHeight / 100) * 10) {
-      return true;
+  // If any container is too close to the bottom of the screen, the navbar is hidden.
+  public hideTabbar(): boolean {
+    if (this.router.url === '/journal/stats') {
+      const element = document.getElementsByClassName('stats-container')[0];
+      const rect = element!.getBoundingClientRect();
+      const distanceToBottom = window.innerHeight - rect.bottom;
+      const threshhold = 4.5 * 15.5;
+      if (distanceToBottom < threshhold) {
+        return true;
+      } else {
+        return false;
+      }
     } else {
       return false;
     }

src/app/journal/journal-home/navigation-panel/navigation-panel.component.html

@@ -0,0 +1,56 @@
+<div #navigationBackdrop class="backdrop" (click)="closePanel()"></div>
+<div #navigationPanel class="panel">
+  <h2 style="margin-bottom: 1.5rem">Menu</h2>
+  <ul>
+    @if(showAdditionalNavigation){
+    <li>
+      <div class="navigation-entry" [routerLink]="'./stats'">Kampf</div>
+    </li>
+    <li>
+      <div class="navigation-entry" [routerLink]="'./character'">Charakter</div>
+    </li>
+    <li>
+      <div class="navigation-entry" [routerLink]="'./inventory'">Inventar</div>
+    </li>
+    <li>
+      <div class="navigation-entry" [routerLink]="'./notes'">Zauber</div>
+    </li>
+    <li>
+      <div class="navigation-entry" [routerLink]="'./spellcards'">Notizen</div>
+    </li>
+    }
+    <li>
+      <div class="navigation-entry" [routerLink]="'./spellbook'">
+        Zauberbuch
+      </div>
+    </li>
+    <li>
+      <div class="navigation-entry" [routerLink]="'./quests'">Aufträge</div>
+    </li>
+    <li>
+      <div class="navigation-entry" [routerLink]="'./npcs'">NPCs</div>
+    </li>
+    <li>
+      <div class="navigation-entry" [routerLink]="'./places'">Orte</div>
+    </li>
+    <li>
+      <div class="navigation-entry" [routerLink]="'./maps'">Karten</div>
+    </li>
+
+    <li>
+      <div class="navigation-entry" [routerLink]="'./ruleset'">Regelwerk</div>
+    </li>
+  </ul>
+
+  <div class="settings-container">
+    <button class="settings-button">
+      <icon [size]="'s'" [type]="'UI'" [icon]="'character'"></icon>
+      <div>Charakterauswahl</div>
+    </button>
+
+    <button class="settings-button">
+      <icon [size]="'s'" [type]="'UI'" [icon]="'settings'"></icon>
+      <div>Einstellungen</div>
+    </button>
+  </div>
+</div>

src/app/journal/journal-home/navigation-panel/navigation-panel.component.scss

@@ -0,0 +1,84 @@
+.backdrop{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right:0;
+    bottom: 0;
+    visibility: hidden;
+    background: rgba(0,0,0,0.2);
+    z-index: 1000;
+    cursor: pointer;
+}
+
+.backdrop--open{
+    visibility: visible;
+}
+
+.panel{
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 25vw;
+    background-color: var(--background-color);
+    z-index: 1001;
+    padding: 1.5rem;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
+}
+
+.panel--open{
+    transform: translateX(0)
+}
+
+.li{
+}
+
+ul{
+    padding: 0;
+    list-style: none;
+}
+
+.navigation-entry{
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+    padding: 0.5rem 0 0.5rem 2rem;
+
+    border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
+    transition: transform 0.2s ease-in-out;
+}
+.navigation-entry:hover{
+    background-color: var(--primary-color);
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+.settings-container{
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    bottom: 2rem;
+    width: calc(25vw - 3rem)
+}
+
+.settings-button{
+    font-size: 1.25rem;
+    font-weight: 500;
+    padding: 0.5rem;
+    border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
+    transition: transform 0.2s ease-in-out;
+}
+
+.settings-button:hover{
+    background-color: var(--primary-color);
+    transform: scale(1.05);
+}
+

src/app/journal/journal-home/navigation-panel/navigation-panel.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationPanelComponent } from './navigation-panel.component';
+
+describe('NavigationPanelComponent', () => {
+  let component: NavigationPanelComponent;
+  let fixture: ComponentFixture<NavigationPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NavigationPanelComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NavigationPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-home/navigation-panel/navigation-panel.component.ts

@@ -0,0 +1,36 @@
+import { Component, ViewChild, Input } from '@angular/core';
+import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
+
+@Component({
+  selector: 'navigation-panel',
+  templateUrl: './navigation-panel.component.html',
+  styleUrl: './navigation-panel.component.scss',
+})
+export class NavigationPanelComponent {
+  constructor(private navigation: NavigationPanelService) {}
+
+  @Input() showAdditionalNavigation: boolean = true;
+
+  @ViewChild('navigationBackdrop') backdrop: any;
+  @ViewChild('navigationPanel') panel: any;
+
+  public ngOnInit(): void {
+    this.navigation.showNavigationPanel$.subscribe((state) => {
+      if (state) {
+        this.openPanel();
+      } else {
+        this.closePanel();
+      }
+    });
+  }
+
+  public openPanel(): void {
+    this.backdrop.nativeElement.classList.add('backdrop--open');
+    this.panel.nativeElement.classList.add('panel--open');
+  }
+
+  public closePanel(): void {
+    this.backdrop?.nativeElement.classList.remove('backdrop--open');
+    this.panel?.nativeElement.classList.remove('panel--open');
+  }
+}

src/app/journal/journal-home/offcanvas/offcanvas.component.html

@@ -1,37 +0,0 @@
-<ng-template #content let-offcanvas>
-  <button
-    type="button"
-    class="btn-close"
-    aria-label="Close"
-    (click)="offcanvas.dismiss('Cross click')"
-  ></button>
-
-  <ul>
-    <li>
-      <div class="navigation-entry">Session</div>
-    </li>
-    <li>
-      <div class="navigation-entry">Quests</div>
-    </li>
-    <li>
-      <div class="navigation-entry">NPCs</div>
-    </li>
-    <li>
-      <div class="navigation-entry">Orte</div>
-    </li>
-    <li>
-      <div class="navigation-entry">Karten</div>
-    </li>
-    <li>
-      <div class="navigation-entry">Notizen</div>
-    </li>
-    <li>
-      <div class="navigation-entry">Regelwerk</div>
-    </li>
-    <li>
-      <div class="navigation-entry">Zauberbuch</div>
-    </li>
-  </ul>
-
-  <div class="offcanvas-body"></div>
-</ng-template>

src/app/journal/journal-home/offcanvas/offcanvas.component.scss

@@ -1,3 +0,0 @@
-::ng-deep .invisibleBackdrop{
-     opacity: 0 !important;
-}

src/app/journal/journal-home/offcanvas/offcanvas.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { OffcanvasComponent } from './offcanvas.component';
-
-describe('OffcanvasComponent', () => {
-  let component: OffcanvasComponent;
-  let fixture: ComponentFixture<OffcanvasComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [OffcanvasComponent]
-    });
-    fixture = TestBed.createComponent(OffcanvasComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/journal/journal-home/offcanvas/offcanvas.component.ts

@@ -1,21 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: 'app-offcanvas',
-  templateUrl: './offcanvas.component.html',
-  styleUrls: ['./offcanvas.component.scss'],
-})
-export class OffcanvasComponent {
-  constructor(private offcanvasService: NgbOffcanvas) {}
-  closeResult = '';
-  @ViewChild('content') content?: NgbOffcanvas;
-
-  public openNavigation(): void {
-    this.open(this.content);
-  }
-
-  public open(content: any) {
-    this.offcanvasService.open(content, { backdropClass: 'invisibleBackdrop' });
-  }
-}

src/app/journal/journal-home/tabbar/tabbar.component.html

@@ -10,10 +10,10 @@
       <button ngbNavLink [routerLink]="'./inventory'">Inventar</button>
     </li>
     <li [ngbNavItem]="4">
-      <button ngbNavLink [routerLink]="'./skills'">Notizen</button>
+      <button ngbNavLink [routerLink]="'./notes'">Notizen</button>
     </li>
     <li [ngbNavItem]="5">
-      <button ngbNavLink [routerLink]="'./spells'">Zauber</button>
+      <button ngbNavLink [routerLink]="'./spellcards'">Zauber</button>
     </li>
   </ul>
 </div>

src/app/journal/journal-inventory/journal-inventory.component.html

@@ -1 +1,15 @@
-<p>journal-inventory works!</p>
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img
+    style="height: 100%"
+    src="assets/images/inventory_coming_soon.jpeg"
+    alt=""
+  />
+</div>

src/app/journal/journal-maps/journal-maps.component.html

@@ -0,0 +1,11 @@
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img style="height: 100%" src="assets/images/maps_coming_soon.jpeg" alt="" />
+</div>

src/app/journal/journal-maps/journal-maps.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JournalMapsComponent } from './journal-maps.component';
+
+describe('JournalMapsComponent', () => {
+  let component: JournalMapsComponent;
+  let fixture: ComponentFixture<JournalMapsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [JournalMapsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(JournalMapsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-maps/journal-maps.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-journal-maps',
+  templateUrl: './journal-maps.component.html',
+  styleUrl: './journal-maps.component.scss'
+})
+export class JournalMapsComponent {
+
+}

src/app/journal/journal-notes/journal-notes.component.html

@@ -0,0 +1,11 @@
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img style="height: 100%" src="assets/images/notes_coming_soon.jpeg" alt="" />
+</div>

src/app/journal/journal-notes/journal-notes.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JournalNotesComponent } from './journal-notes.component';
+
+describe('JournalNotesComponent', () => {
+  let component: JournalNotesComponent;
+  let fixture: ComponentFixture<JournalNotesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [JournalNotesComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(JournalNotesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-notes/journal-notes.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-journal-notes',
+  templateUrl: './journal-notes.component.html',
+  styleUrl: './journal-notes.component.scss'
+})
+export class JournalNotesComponent {
+
+}

src/app/journal/journal-npcs/journal-npcs.component.html

@@ -0,0 +1,11 @@
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img style="height: 100%" src="assets/images/npc_coming_soon.jpeg" alt="" />
+</div>

src/app/journal/journal-npcs/journal-npcs.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JournalNpcsComponent } from './journal-npcs.component';
+
+describe('JournalNpcsComponent', () => {
+  let component: JournalNpcsComponent;
+  let fixture: ComponentFixture<JournalNpcsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [JournalNpcsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(JournalNpcsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-npcs/journal-npcs.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-journal-npcs',
+  templateUrl: './journal-npcs.component.html',
+  styleUrl: './journal-npcs.component.scss'
+})
+export class JournalNpcsComponent {
+
+}

src/app/journal/journal-places/journal-places.component.html

@@ -0,0 +1,11 @@
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img style="height: 100%" src="assets/images/place_coming_soon.jpeg" alt="" />
+</div>

src/app/journal/journal-places/journal-places.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JournalPlacesComponent } from './journal-places.component';
+
+describe('JournalPlacesComponent', () => {
+  let component: JournalPlacesComponent;
+  let fixture: ComponentFixture<JournalPlacesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [JournalPlacesComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(JournalPlacesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-places/journal-places.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-journal-places',
+  templateUrl: './journal-places.component.html',
+  styleUrl: './journal-places.component.scss'
+})
+export class JournalPlacesComponent {
+
+}

src/app/journal/journal-quests/journal-quests.component.html

@@ -0,0 +1,11 @@
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img style="height: 100%" src="assets/images/quest_coming_soon.jpeg" alt="" />
+</div>

src/app/journal/journal-quests/journal-quests.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JournalQuestsComponent } from './journal-quests.component';
+
+describe('JournalQuestsComponent', () => {
+  let component: JournalQuestsComponent;
+  let fixture: ComponentFixture<JournalQuestsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [JournalQuestsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(JournalQuestsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-quests/journal-quests.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-journal-quests',
+  templateUrl: './journal-quests.component.html',
+  styleUrl: './journal-quests.component.scss'
+})
+export class JournalQuestsComponent {
+
+}

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

@@ -6,19 +6,33 @@ import { JournalCharacterComponent } from './journal-character/journal-character
 import { JournalInventoryComponent } from './journal-inventory/journal-inventory.component';
 import { JournalSpellbookComponent } from './journal-spellbook/journal-spellbook.component';
 import { JournalSpellcardsComponent } from './journal-spellcards/journal-spellcards.component';
+import { JournalNotesComponent } from './journal-notes/journal-notes.component';
+import { JournalQuestsComponent } from './journal-quests/journal-quests.component';
+import { JournalNpcsComponent } from './journal-npcs/journal-npcs.component';
+import { JournalPlacesComponent } from './journal-places/journal-places.component';
+import { JournalMapsComponent } from './journal-maps/journal-maps.component';
+import { JournalRulesetComponent } from './journal-ruleset/journal-ruleset.component';
+import { JournalSettingsComponent } from './journal-settings/journal-settings.component';
 
 const routes: Routes = [
   {
     path: '',
     component: JournalHomeComponent,
     children: [
-      { path: '', component: JournalStatsComponent },
       { path: 'stats', component: JournalStatsComponent },
       { path: 'character', component: JournalCharacterComponent },
       { path: 'inventory', component: JournalInventoryComponent },
-      { path: 'spellbook', component: JournalSpellbookComponent },
+      { path: 'notes', component: JournalNotesComponent },
       { path: 'spellcards', component: JournalSpellcardsComponent },
-      { path: '**', redirectTo: '/stats', pathMatch: 'full' },
+
+      { path: 'spellbook', component: JournalSpellbookComponent },
+      { path: 'quests', component: JournalQuestsComponent },
+      { path: 'npcs', component: JournalNpcsComponent },
+      { path: 'places', component: JournalPlacesComponent },
+      { path: 'maps', component: JournalMapsComponent },
+      { path: 'ruleset', component: JournalRulesetComponent },
+      { path: 'settings', component: JournalSettingsComponent },
+      { path: '**', redirectTo: '/journal/stats', pathMatch: 'full' },
     ],
   },
 ];

src/app/journal/journal-ruleset/journal-ruleset.component.html

@@ -0,0 +1,15 @@
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img
+    style="height: 100%"
+    src="assets/images/ruleset_coming_soon.jpeg"
+    alt=""
+  />
+</div>

src/app/journal/journal-ruleset/journal-ruleset.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JournalRulesetComponent } from './journal-ruleset.component';
+
+describe('JournalRulesetComponent', () => {
+  let component: JournalRulesetComponent;
+  let fixture: ComponentFixture<JournalRulesetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [JournalRulesetComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(JournalRulesetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-ruleset/journal-ruleset.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-journal-ruleset',
+  templateUrl: './journal-ruleset.component.html',
+  styleUrl: './journal-ruleset.component.scss'
+})
+export class JournalRulesetComponent {
+
+}

src/app/journal/journal-settings/journal-settings.component.html

@@ -0,0 +1,15 @@
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img
+    style="height: 100%"
+    src="assets/images/settings_coming_soon.jpeg"
+    alt=""
+  />
+</div>

src/app/journal/journal-settings/journal-settings.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JournalSettingsComponent } from './journal-settings.component';
+
+describe('JournalSettingsComponent', () => {
+  let component: JournalSettingsComponent;
+  let fixture: ComponentFixture<JournalSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [JournalSettingsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(JournalSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-settings/journal-settings.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-journal-settings',
+  templateUrl: './journal-settings.component.html',
+  styleUrl: './journal-settings.component.scss'
+})
+export class JournalSettingsComponent {
+
+}

src/app/journal/journal-spellbook/journal-spellbook.component.html

@@ -1 +1,15 @@
-<p>journal-spellbook works!</p>
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img
+    style="height: 100%"
+    src="assets/images/spellbook_coming_soon.jpeg"
+    alt=""
+  />
+</div>

src/app/journal/journal-spellcards/journal-spellcards.component.html

@@ -1 +1,15 @@
-<p>journal-spellcards works!</p>
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  "
+>
+  <img
+    style="height: 100%"
+    src="assets/images/spellcards_coming_soon.jpeg"
+    alt=""
+  />
+</div>

src/app/journal/journal-stats/info-row/armor-class/armor-class.component.html

@@ -6,6 +6,6 @@
     (change)="updateValue()"
     (click)="$event.stopPropagation()"
   />
-  <div class="info-label responsive-small">Rüstung</div>
+  <div class="info-label responsive-small">Rüstungs</div>
   <div class="info-label responsive-large">Rüstungsklasse</div>
 </div>

src/app/journal/journal-stats/info-row/death-save/death-save.component.html

@@ -1,5 +1,5 @@
 <div class="death-save-container" (click)="openDetails()">
-  <div style="margin: 0.5rem">
+  <div style="margin: 0.875rem 0 0 0.4rem">
     <div class="save-row">
       <div class="save-label">Erfolg</div>
       <div class="save-checkbox" (click)="$event.stopPropagation()">

src/app/journal/journal-stats/journal-stats.component.scss

@@ -1,13 +1,12 @@
 .center{
     display: flex;
     justify-content: center;
-    height: 95vh;
 }
 
 .stats-container{
     display: flex;
     justify-content: space-between;
-    margin: 2rem ;
+    margin: 2rem 2rem 0 2rem;
     gap: 2rem;
     width: 100%;
 }

src/app/journal/journal-stats/life-container/life/life.component.html

@@ -23,4 +23,5 @@
     <button (click)="removeHitPoints()">Schaden -</button>
     <button (click)="addTemporaryHitPoints()">Temporäre Trefferpunkte +</button>
   </div>
+  width: {{ getWidth() }} | height: {{ getHeight() }}
 </div>

src/app/journal/journal-stats/life-container/life/life.component.ts

@@ -100,4 +100,12 @@ export class LifeComponent {
       temporaryHitPoints: this.temporaryHitPoints,
     };
   }
+
+  public getWidth(): string {
+    return window.innerWidth + 'px';
+  }
+
+  public getHeight(): string {
+    return window.innerHeight + 'px';
+  }
 }

src/app/journal/journal.module.ts

@@ -7,7 +7,6 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgxSmartModalModule } from 'ngx-smart-modal';
 
 import { TabbarComponent } from './journal-home/tabbar/tabbar.component';
-import { OffcanvasComponent } from './journal-home/offcanvas/offcanvas.component';
 import { JournalRoutingModule } from './journal-routing.module';
 import { JournalHomeComponent } from './journal-home/journal-home.component';
 import { JournalStatsComponent } from './journal-stats/journal-stats.component';
@@ -65,6 +64,14 @@ import { MovementDetailsComponent } from './journal-stats/info-row/movement/move
 import { ProficiencyDetailsComponent } from './journal-stats/info-row/proficiency/proficiency-details/proficiency-details.component';
 import { DeathSaveDetailsComponent } from './journal-stats/info-row/death-save/death-save-details/death-save-details.component';
 import { ExhaustionDetailsComponent } from './journal-stats/info-row/conditions/exhaustion-details/exhaustion-details.component';
+import { NavigationPanelComponent } from './journal-home/navigation-panel/navigation-panel.component';
+import { JournalNotesComponent } from './journal-notes/journal-notes.component';
+import { JournalQuestsComponent } from './journal-quests/journal-quests.component';
+import { JournalNpcsComponent } from './journal-npcs/journal-npcs.component';
+import { JournalPlacesComponent } from './journal-places/journal-places.component';
+import { JournalMapsComponent } from './journal-maps/journal-maps.component';
+import { JournalRulesetComponent } from './journal-ruleset/journal-ruleset.component';
+import { JournalSettingsComponent } from './journal-settings/journal-settings.component';
 
 @NgModule({
   declarations: [
@@ -75,7 +82,6 @@ import { ExhaustionDetailsComponent } from './journal-stats/info-row/conditions/
     JournalSpellcardsComponent,
     JournalCharacterComponent,
     TabbarComponent,
-    OffcanvasComponent,
     AttributeFieldComponent,
     SkillFieldComponent,
     AttributeSkillContainerComponent,
@@ -124,6 +130,14 @@ import { ExhaustionDetailsComponent } from './journal-stats/info-row/conditions/
     ProficiencyDetailsComponent,
     DeathSaveDetailsComponent,
     ExhaustionDetailsComponent,
+    NavigationPanelComponent,
+    JournalNotesComponent,
+    JournalQuestsComponent,
+    JournalNpcsComponent,
+    JournalPlacesComponent,
+    JournalMapsComponent,
+    JournalRulesetComponent,
+    JournalSettingsComponent,
   ],
   imports: [
     CommonModule,

src/assets/icons/UIIcons/character.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M255 45.4c-24.5 0-47 11.8-63.9 33.4-16.9 21.5-27.1 52.6-27.1 86.5 0 36 12.1 67.5 31 89.5l13.5 15-19.6 4.6c-52.3 11.9-77.4 36.9-91.75 75.2-13.7 35.7-15.6 84.8-16.1 143.3H431c-.2-58.7-.5-109.3-13-145.5-13.4-39.4-37.9-64.3-94-75.4l-19.9-3.7 12.9-15.7c17.7-21.9 28.8-52.6 28.8-87.5 0-33.9-10.3-64.9-27.2-86.3-16.8-21.7-39.3-33.6-63.6-33.4z" fill="#000000" fill-opacity="1"></path></g></svg>

src/assets/icons/UIIcons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M234.875 18.78c-26.087 2.367-51.557 8.56-74.875 18.782 15.37 32.763 14.222 66.706-6.72 82.407-20.835 15.617-54.055 7.965-81.124-15.69-16.246 19.452-29.336 41.36-38.875 65.626 33.83 12.333 56.635 37.665 52.94 63.5-3.698 25.835-32.697 43.74-68.626 46.094 2.338 25.796 8.91 50.778 18.937 73.875 17.81-8.182 35.793-11.09 51.095-8.938 13.032 1.87 23.927 7.015 31.156 16.657 15.817 21.097 7.603 54.713-16.78 81.97 19.516 16.35 42.216 29.444 66.594 39.03 12.33-33.828 37.655-56.634 63.5-52.938 25.844 3.697 43.74 32.696 46.094 68.625 26.087-2.365 51.557-8.555 74.875-18.78-15.766-32.997-14.26-67.588 6.843-83.406 9.64-7.23 22.568-9.022 35.594-7.125 15.112 2.16 31.19 10.25 45.563 22.78 16.088-19.345 29.4-41.51 38.875-65.594-33.83-12.332-56.635-37.653-52.938-63.5 3.697-25.846 32.665-43.772 68.594-46.125-2.36-25.944-8.774-50.663-18.906-73.874-32.612 15.117-66.66 13.145-82.282-7.687-15.696-20.944-7.252-53.86 16.688-81-19.52-16.352-42.248-29.447-66.625-39.032-12.332 33.828-37.657 56.66-63.5 52.968-25.846-3.693-43.744-32.696-46.095-68.625zm21.656 95.126c79.626 0 144.376 64.752 144.376 144.375 0 79.626-64.75 144.376-144.375 144.376-79.624 0-144.374-64.75-144.374-144.375 0-79.624 64.75-144.374 144.375-144.374zm0 18.688c-69.524 0-125.686 56.162-125.686 125.687 0 69.526 56.162 125.69 125.687 125.69 69.526 0 125.69-56.164 125.69-125.69 0-69.522-56.164-125.686-125.69-125.686zm.033 15.125c61.094 0 110.625 49.53 110.625 110.624 0 61.095-49.53 110.625-110.625 110.625s-110.625-49.53-110.625-110.626c0-61.095 49.53-110.625 110.625-110.625z" fill="#000000" fill-opacity="1"></path></g></svg>

src/services/navigationPanel/navigation-panel.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NavigationPanelService } from './navigation-panel.service';
+
+describe('NavigationPanelService', () => {
+  let service: NavigationPanelService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NavigationPanelService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/services/navigationPanel/navigation-panel.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NavigationPanelService {
+  constructor() {}
+
+  public isNavigationOpen: boolean = false;
+
+  private _showNavigationPanelSubject = new BehaviorSubject<any>(false);
+  public showNavigationPanel$ = this._showNavigationPanelSubject.asObservable();
+
+  public openNavigation(): void {
+    this.isNavigationOpen = true;
+    this._showNavigationPanelSubject.next(true);
+  }
+
+  public closeNavigation(): void {
+    this.isNavigationOpen = false;
+    this._showNavigationPanelSubject.next(false);
+  }
+}

src/services/sharedData/shared-data.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SharedDataService } from './shared-data.service';
+
+describe('SharedDataService', () => {
+  let service: SharedDataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SharedDataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/services/sharedData/shared-data.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SharedDataService {
+  constructor() {}
+
+  private _tabbarIsHidden = new BehaviorSubject<boolean>(false);
+  public tabbarIsHidden$ = this._tabbarIsHidden.asObservable();
+  public updateTabbarState(state: boolean): void {
+    this._tabbarIsHidden.next(state);
+  }
+}

src/styles.scss

@@ -46,6 +46,7 @@ $dialog-position-right: 20%;
         border-radius: 10px;
     }
 
+    // 
     .responsive-small{
         display: none;
     }
@@ -62,6 +63,28 @@ $dialog-position-right: 20%;
             display: block;
         }
     }
+
+    // Scrollbar
+    ::-webkit-scrollbar {
+        width: 0.5rem;
+        margin: 0.125rem 0;
+
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+        border-radius: 10px;
+    }
 }