built own tabbar

.nx/cache/d/daemon.log

@@ -460267,3 +460267,78 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-28T19:01:37.406Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-28T19:01:37.407Z - [WATCHER]: .nx/cache/d/daemon.log was modified
 [NX Daemon Server] - 2023-11-28T19:01:37.407Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-29T06:17:17.949Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-29T06:17:17.953Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-29T06:17:17.958Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-29T06:17:17.961Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-29T06:17:17.961Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-29T06:17:17.963Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-29T06:17:18.090Z - 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-29T06:17:18.090Z - [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-29T06:17:18.092Z - Time taken for 'hash changed files from watcher' 57.05529999732971ms
+[NX Daemon Server] - 2023-11-29T06:17:18.092Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-29T06:17:18.092Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-29T10:15:12.422Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-29T10:15:12.429Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-29T10:15:12.430Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-29T10:15:12.431Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-29T10:15:12.432Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-29T10:15:12.433Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-29T10:15:13.089Z - 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-29T10:15:13.089Z - [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-29T10:15:13.090Z - Time taken for 'hash changed files from watcher' 208.89529991149902ms
+[NX Daemon Server] - 2023-11-29T10:15:13.090Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-29T10:15:13.091Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-29T10:15:13.093Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":17748}
+{"processId":4460}

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

@@ -2,11 +2,14 @@
   <!-- Here the different pages are rendered -->
   <router-outlet></router-outlet>
 
-  <app-tabbar id="tabbar" [class]="hideTabbar() ? 'hidden' : ''"></app-tabbar>
+  <!-- <app-tabbar id="tabbar" [class]="hideTabbar() ? 'hidden' : ''"></app-tabbar> -->
+  <tab-bar #tabbar id="tabbar" [class]="hideTabbar() ? 'hidden' : ''"></tab-bar>
+
   <details-panel></details-panel>
 
   <navigation-panel
     [showAdditionalNavigation]="hideTabbar()"
+    (activeTabChanged)="onNavigationUpdated()"
   ></navigation-panel>
 
   <modal></modal>

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

@@ -19,6 +19,14 @@ app-tabbar{
     width: 100%;
 }
 
+tab-bar{
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
 .hidden{
     display: none;
 }

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

@@ -13,6 +13,8 @@ export class JournalHomeComponent {
     private router: Router
   ) {}
 
+  @ViewChild('tabbar') tabbar: any;
+
   private isNavigationOpen: boolean = false;
 
   ngOnInit() {
@@ -50,4 +52,8 @@ export class JournalHomeComponent {
       return false;
     }
   }
+
+  public onNavigationUpdated() {
+    this.tabbar.active = 0;
+  }
 }

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

@@ -20,25 +20,59 @@
     </li>
     }
     <li>
-      <div class="navigation-entry" [routerLink]="'./spellbook'">
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty()"
+        [routerLink]="'./spellbook'"
+      >
         Zauberbuch
       </div>
     </li>
     <li>
-      <div class="navigation-entry" [routerLink]="'./quests'">Aufträge</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty()"
+        [routerLink]="'./quests'"
+      >
+        Aufträge
+      </div>
     </li>
     <li>
-      <div class="navigation-entry" [routerLink]="'./npcs'">NPCs</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty()"
+        [routerLink]="'./npcs'"
+      >
+        NPCs
+      </div>
     </li>
     <li>
-      <div class="navigation-entry" [routerLink]="'./places'">Orte</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty()"
+        [routerLink]="'./places'"
+      >
+        Orte
+      </div>
     </li>
     <li>
-      <div class="navigation-entry" [routerLink]="'./maps'">Karten</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty()"
+        [routerLink]="'./maps'"
+      >
+        Karten
+      </div>
     </li>
 
     <li>
-      <div class="navigation-entry" [routerLink]="'./ruleset'">Regelwerk</div>
+      <div
+        class="navigation-entry"
+        (click)="setActiveProperty()"
+        [routerLink]="'./ruleset'"
+      >
+        Regelwerk
+      </div>
     </li>
   </ul>
 

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

@@ -1,4 +1,10 @@
-import { Component, ViewChild, Input } from '@angular/core';
+import {
+  Component,
+  ViewChild,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
 import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
 
 @Component({
@@ -9,6 +15,8 @@ import { NavigationPanelService } from 'src/services/navigationPanel/navigation-
 export class NavigationPanelComponent {
   constructor(private navigation: NavigationPanelService) {}
 
+  @Output() public activeTabChanged = new EventEmitter<any>();
+
   @Input() showAdditionalNavigation: boolean = true;
 
   @ViewChild('navigationBackdrop') backdrop: any;
@@ -33,4 +41,8 @@ export class NavigationPanelComponent {
     this.backdrop?.nativeElement.classList.remove('backdrop--open');
     this.panel?.nativeElement.classList.remove('panel--open');
   }
+
+  public setActiveProperty() {
+    this.activeTabChanged.emit();
+  }
 }

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

@@ -0,0 +1,42 @@
+<div class="tab-row">
+  <button
+    class="tab-button"
+    (click)="active = 1"
+    [class]="active === 1 ? 'active' : ''"
+    [routerLink]="'./stats'"
+  >
+    Stats
+  </button>
+  <button
+    class="tab-button"
+    (click)="active = 2"
+    [class]="active === 2 ? 'active' : ''"
+    [routerLink]="'./character'"
+  >
+    Charakter
+  </button>
+  <button
+    class="tab-button"
+    (click)="active = 3"
+    [class]="active === 3 ? 'active' : ''"
+    [routerLink]="'./inventory'"
+  >
+    Inventar
+  </button>
+  <button
+    class="tab-button"
+    (click)="active = 4"
+    [class]="active === 4 ? 'active' : ''"
+    [routerLink]="'./notes'"
+  >
+    Notizen
+  </button>
+  <button
+    class="tab-button"
+    (click)="active = 5"
+    [class]="active === 5 ? 'active' : ''"
+    [routerLink]="'./spellcards'"
+  >
+    Zauber
+  </button>
+</div>

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

@@ -0,0 +1,68 @@
+.tab-button{
+    width: 8rem;
+    height: 4rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: black;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 10px 10px 0 0;
+    transition: all 0.25s ease-in-out;
+    background-color: var(--primary-color-light);
+
+    &:hover{
+        height: 4.125rem;
+        color: black;
+        background-color: var(--primary-color);
+    }
+
+    &.active{
+        height: 4.5rem;
+        width: 9rem;
+        font-size: 1.625rem;
+        background-color: var(--primary-color) !important;
+    }
+}
+
+.tab-row{
+    display: flex;
+    align-items: flex-end;
+}
+
+
+
+
+
+
+// .li{
+//     width: 10%;
+// }
+
+// button{
+//     width: 8rem;
+//     height: 4rem;
+//     font-size: 1.5rem;
+//     font-weight: 600;
+//     color: black;
+//     border: 1px solid black !important;
+//     transition: all 0.25s ease-in-out;
+//     background-color: var(--primary-color-light);
+// }
+
+// button:hover{
+//     height: 4.125rem;
+//     color: black;
+//     background-color: var(--primary-color);
+// }
+
+// button.active{
+//     height: 4.5rem;
+//     width: 9rem;
+//     font-size: 1.625rem;
+//     background-color: var(--primary-color) !important;
+// }
+
+
+// li{
+//     display: flex;
+//     align-items: flex-end;
+// }

src/app/journal/journal-home/tab-bar/tab-bar.component.spec.ts

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'tab-bar',
+  templateUrl: './tab-bar.component.html',
+  styleUrl: './tab-bar.component.scss',
+})
+export class TabBarComponent {
+  public active: number = 1;
+}

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

@@ -1,58 +1,91 @@
 <div class="inventory-container">
   <div class="item-container">
-    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs tab-tabs">
-      <li [ngbNavItem]="1">
-        <button ngbNavLink>Waffen und Rüstungen</button>
-        <ng-template ngbNavContent>
-          <ng-container [ngTemplateOutlet]="weaponTemplate"></ng-container>
-        </ng-template>
-      </li>
-      <li [ngbNavItem]="2">
-        <button ngbNavLink>Verbrauchsgegenstände</button>
-        <ng-template ngbNavContent
-          ><ng-container [ngTemplateOutlet]="consumablesTemplate"></ng-container
-        ></ng-template>
-      </li>
-      <li [ngbNavItem]="3">
-        <button ngbNavLink>Sonstiges</button>
-        <ng-template ngbNavContent
-          ><ng-container [ngTemplateOutlet]="miscTemplate"></ng-container
-        ></ng-template>
-      </li>
-    </ul>
+    <div class="tab-row">
+      <button
+        class="tab-button"
+        (click)="active = 1"
+        [class]="active === 1 ? 'active' : ''"
+      >
+        Waffen und Rüstungen
+      </button>
+      <button
+        class="tab-button"
+        (click)="active = 2"
+        [class]="active === 2 ? 'active' : ''"
+      >
+        Verbrauchsgegenstände
+      </button>
+      <button
+        class="tab-button"
+        (click)="active = 3"
+        [class]="active === 3 ? 'active' : ''"
+      >
+        Sonstiges
+      </button>
+    </div>
 
-    <div [ngbNavOutlet]="nav"></div>
+    <div class="heading-row">
+      <div class="heading">Name</div>
+      <div class="heading">Wert</div>
+      <div class="heading">Gewicht</div>
+      <div class="heading">Anzahl</div>
+    </div>
+
+    @switch(active) { @case(1){
+    <ng-container [ngTemplateOutlet]="weaponTemplate"></ng-container>
+    } @case(2){
+    <ng-container [ngTemplateOutlet]="consumablesTemplate"></ng-container>
+    } @case(3){
+    <ng-container [ngTemplateOutlet]="miscTemplate"></ng-container>
+    }}
+    <ui-button
+      [type]="'add'"
+      [size]="'xlarge'"
+      [color]="'primary'"
+      class="button-margin"
+      (click)="addItem()"
+    ></ui-button>
   </div>
 
-  <div class="money-container">
-    Geld
-    <div (change)="updateMoney()">
-      <input
-        type="number"
-        [(ngModel)]="money.platinum"
-        placeholder="Platin"
-      /><label>Platin</label><br />
-      <input type="number" [(ngModel)]="money.gold" placeholder="Gold" /><label
-        >Gold</label
-      ><br />
-      <input
-        type="number"
-        [(ngModel)]="money.electrum"
-        placeholder="Elektrum"
-      /><label>Elektrum</label> <br />
-      <input
-        type="number"
-        [(ngModel)]="money.silver"
-        placeholder="Silber"
-      /><label>Silber</label><br />
-      <input
-        type="number"
-        [(ngModel)]="money.copper"
-        placeholder="Kupfer"
-      /><label>Kupfer</label><br />
+  <div class="money-container" (change)="updateMoney()">
+    <div class="money-title">Münzen</div>
+    <div class="money-row">
+      <div class="money-label">Platin</div>
+      <div class="money-box">
+        <input class="money-input" type="number" [(ngModel)]="money.platinum" />
+      </div>
+    </div>
+
+    <div class="money-row">
+      <div class="money-label">Gold</div>
+      <div class="money-box">
+        <input class="money-input" type="number" [(ngModel)]="money.gold" />
+      </div>
+    </div>
+
+    <div class="money-row">
+      <div class="money-label">Elektrum</div>
+      <div class="money-box">
+        <input class="money-input" type="number" [(ngModel)]="money.electrum" />
+      </div>
+    </div>
+
+    <div class="money-row">
+      <div class="money-label">Silber</div>
+      <div class="money-box">
+        <input class="money-input" type="number" [(ngModel)]="money.silver" />
+      </div>
+    </div>
+
+    <div class="money-row">
+      <div class="money-label">Kupfer</div>
+      <div class="money-box">
+        <input class="money-input" type="number" [(ngModel)]="money.copper" />
+      </div>
     </div>
   </div>
 
+  <!-- FOOD -->
   <div class="food-container">
     <div class="heading-row">
       <div class="heading">Name</div>
@@ -73,125 +106,79 @@
         <div class="item">{{ item.quantity }}</div>
       </div>
       }
-      <ui-button
-        style="margin: 1rem"
-        [type]="'add'"
-        [size]="'xlarge'"
-        [color]="'primary'"
-        (click)="openFoodModal(false)"
-      ></ui-button>
     </div>
+    <ui-button
+      style="margin: 1rem"
+      [type]="'add'"
+      [size]="'xlarge'"
+      [color]="'primary'"
+      (click)="openFoodModal(false)"
+    ></ui-button>
   </div>
 
   <!-- WEAPONS -->
   <ng-template #weaponTemplate>
-    <div class="table-container">
-      <div class="heading-row">
-        <div class="heading">Name</div>
-        <div class="heading">Wert</div>
-        <div class="heading">Gewicht</div>
-        <div class="heading">Anzahl</div>
-      </div>
+    <div
+      cdkDropList
+      class="example-list table-content"
+      (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
+    >
+      @for (item of weaponsAndArmor; let index = $index; track item) {
       <div
-        cdkDropList
-        class="example-list table-content"
-        (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
+        class="example-box"
+        cdkDrag
+        (click)="openItemsDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
       >
-        @for (item of weaponsAndArmor; let index = $index; track item) {
-        <div
-          class="example-box"
-          cdkDrag
-          (click)="openItemsDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
-        >
-          <div class="item">{{ item.name }}</div>
-          <div class="item">{{ item.value }} Gold</div>
-          <div class="item">{{ item.weight }} Kg.</div>
-          <div class="item">{{ item.quantity }}</div>
-        </div>
-        }
-
-        <ui-button
-          style="margin: 1rem"
-          [type]="'add'"
-          [size]="'xlarge'"
-          [color]="'primary'"
-          (click)="openItemModal(false, 'weaponsAndArmor')"
-        ></ui-button>
+        <div class="item">{{ item.name }}</div>
+        <div class="item">{{ item.value }} Gold</div>
+        <div class="item">{{ item.weight }} Kg.</div>
+        <div class="item">{{ item.quantity }}</div>
       </div>
+      }
     </div>
   </ng-template>
 
   <!-- CONSUMABLES -->
   <ng-template #consumablesTemplate>
-    <div class="table-container">
-      <div class="heading-row">
-        <div class="heading">Name</div>
-        <div class="heading">Wert</div>
-        <div class="heading">Gewicht</div>
-        <div class="heading">Anzahl</div>
-      </div>
+    <div
+      cdkDropList
+      class="example-list table-content"
+      (cdkDropListDropped)="drop($event, consumables, 'consumables')"
+    >
+      @for (item of consumables; let index = $index; track item) {
       <div
-        cdkDropList
-        class="example-list table-content"
-        (cdkDropListDropped)="drop($event, consumables, 'consumables')"
+        class="example-box"
+        cdkDrag
+        (click)="openItemsDetails(consumables, index, 'consumables')"
       >
-        @for (item of consumables; let index = $index; track item) {
-        <div
-          class="example-box"
-          cdkDrag
-          (click)="openItemsDetails(consumables, index, 'consumables')"
-        >
-          <div class="item">{{ item.name }}</div>
-          <div class="item">{{ item.value }} Gold</div>
-          <div class="item">{{ item.weight }} Kg.</div>
-          <div class="item">{{ item.quantity }}</div>
-        </div>
-        }
-        <ui-button
-          style="margin: 1rem"
-          [type]="'add'"
-          [size]="'xlarge'"
-          [color]="'primary'"
-          (click)="openItemModal(false, 'consumables')"
-        ></ui-button>
+        <div class="item">{{ item.name }}</div>
+        <div class="item">{{ item.value }} Gold</div>
+        <div class="item">{{ item.weight }} Kg.</div>
+        <div class="item">{{ item.quantity }}</div>
       </div>
+      }
     </div>
   </ng-template>
 
   <!-- MISCELLANEOUS -->
   <ng-template #miscTemplate>
-    <div class="table-container">
-      <div class="heading-row">
-        <div class="heading">Name</div>
-        <div class="heading">Wert</div>
-        <div class="heading">Gewicht</div>
-        <div class="heading">Anzahl</div>
-      </div>
+    <div
+      cdkDropList
+      class="example-list table-content"
+      (cdkDropListDropped)="drop($event, miscellaneous, 'miscellaneous')"
+    >
+      @for (item of miscellaneous; let index = $index; track item) {
       <div
-        cdkDropList
-        class="example-list table-content"
-        (cdkDropListDropped)="drop($event, miscellaneous, 'miscellaneous')"
+        class="example-box"
+        cdkDrag
+        (click)="openItemsDetails(miscellaneous, index, 'miscellaneous')"
       >
-        @for (item of miscellaneous; let index = $index; track item) {
-        <div
-          class="example-box"
-          cdkDrag
-          (click)="openItemsDetails(miscellaneous, index, 'miscellaneous')"
-        >
-          <div class="item">{{ item.name }}</div>
-          <div class="item">{{ item.value }} Gold</div>
-          <div class="item">{{ item.weight }} Kg.</div>
-          <div class="item">{{ item.quantity }}</div>
-        </div>
-        }
-        <ui-button
-          style="margin: 1rem"
-          [type]="'add'"
-          [size]="'xlarge'"
-          [color]="'primary'"
-          (click)="openItemModal(false, 'miscellaneous')"
-        ></ui-button>
+        <div class="item">{{ item.name }}</div>
+        <div class="item">{{ item.value }} Gold</div>
+        <div class="item">{{ item.weight }} Kg.</div>
+        <div class="item">{{ item.quantity }}</div>
       </div>
+      }
     </div>
   </ng-template>
 </div>

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

@@ -7,33 +7,45 @@
     grid-template-columns: repeat(10, 1fr);
 }
 
-:host ::ng-deep .tab-pane{
-        height: 100%;
-        // border: 2px solid blue;
-      }
+// Tabbar
+.tab-row{
+    display: flex;
+    flex: 0 0 3rem;
+    > *{
+        flex: 1 1 0;
+    }
+    > :first-child{
+      border-radius: 10px 0 0 0
+    }
+    > :last-child{
+      border-radius: 0 10px 0 0
+    }
+}
 
-// Item Container -> tab-pane -> table-container -> table-content 
+.tab-button{
+    height: 2.25rem;
+    font-size: 1.375rem;
+    font-weight: 600;
+    color: black;
+    border: solid 1px var(--border-color);
+    transition: all 0.25s ease-in-out;
+    background-color: var(--primary-color-light);
+
+    &.active{
+        height: 2.75rem;
+        background-color: var(--primary-color);
+    }
+}
 
+// Item container
 .item-container{
     grid-area: 1 / 1 / 11 / 7;
-    border: 1px solid black;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
     display: flex;
     flex-direction: column;
-
-    .tab-tabs{
-      height: 4rem
-    }
-
-    .tab-content{
-      // border: 3px solid red;
-      height: calc(100% - 4rem);
-    }
-
-    .table-container{
-      height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
 
     .heading-row{
       flex: 0 0 3rem;
@@ -44,8 +56,11 @@
 
     .table-content{
       overflow: auto;
-      flex: 0 0 calc(99% - 3rem);
-      // border: 3px solid pink;
+      flex: 0 0 calc(100% - 11rem);
+    }
+
+    .button-margin{
+      margin: 1rem 0rem;
     }
 
     .heading{
@@ -62,13 +77,72 @@
     }
 }
 
+//  MONEY CONTAINER
+
+.money-container{
+    grid-area: 1 / 8 / 5 / 11;
+     border: 1px solid var(--border-color);
+    border-radius: 10px;
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+}
+
+.money-title{
+  font-size: 1.75rem;
+  font-weight: 700;
+  text-align: center;
+  margin: 1rem 0;
+}
+
+.money-row{
+  display:flex;
+}
+
+.money-label{
+  flex: 0 0 8rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  padding: 0.5rem;
+}
+
+.money-box{
+  flex: 0 0 3rem;
+  width: 3.5rem;
+    height: 2rem;
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    border-radius: 10px;
+    background-color: white;
+    box-shadow: var(--shadow-small);
+}
+
+.money-input{
+  border: none;
+    outline: none;
+    text-align: center;
+    background-color: transparent;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        appearance: none;
+        margin: 0;
+    }   
+}
+
 // Food Container
 
 .food-container{
-    grid-area: 7 / 8 / 11 / 11;
-    border: 1px solid black;
+    grid-area: 6 / 8 / 11 / 11;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
     display: flex;
     flex-direction: column;
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
 
     .heading-row{
       flex: 0 0 3rem;
@@ -78,14 +152,14 @@
     }
 
     .heading{
-      font-size: 1.5rem;
-      font-weight: 500;
+      font-size: 1.375rem;
+      font-weight: 600;
       padding-left: 1rem;
     }
 
     .table-content{
       overflow: auto;
-      flex: 0 0 calc(100% - 3rem);
+      flex: 0 0 calc(100% - 8rem);
     }
 
     .example-box {
@@ -99,11 +173,7 @@
     }
 }
 
-.money-container{
-    grid-area: 1 / 8 / 6 / 11;
-     border: 1px solid black;
-}
-
+// Drag and Drop
 .example-list {
   max-width: 100%;
   border: solid 1px #ccc;

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

@@ -163,6 +163,22 @@ export class JournalInventoryComponent {
     );
   }
 
+  public addItem(): void {
+    switch (this.active) {
+      case 1:
+        this.openItemModal(false, 'weaponsAndArmor');
+        break;
+      case 2:
+        this.openItemModal(false, 'consumables');
+        break;
+      case 3:
+        this.openItemModal(false, 'miscellaneous');
+        break;
+      default:
+        throw new Error('Unknown active tab: ' + this.active);
+    }
+  }
+
   // Updates
 
   public updateDatabase(listname: string): void {

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

@@ -14,6 +14,32 @@
     > *{
         flex: 1 1 0;
     }
+    > :first-child{
+      border-radius: 10px 0 0 0
+    }
+    > :last-child{
+      border-radius: 0 10px 0 0
+    }
+}
+
+.tab-button{
+    height: 2.25rem;
+    font-size: 1.375rem;
+    font-weight: 600;
+    color: black;
+    border: solid 1px var(--border-color);
+    transition: all 0.25s ease-in-out;
+    background-color: var(--primary-color-light);
+
+    &.active{
+        height: 2.75rem;
+        background-color: var(--primary-color);
+    }
+}
+
+.button-margin{
+    margin: 1rem 0rem;
+
 }
 
 ability-table{
@@ -36,25 +62,7 @@ proficiencies-table{
     overflow: auto;
 }
 
-.tab-button{
-    height: 2.25rem;
-    font-size: 1.375rem;
-    font-weight: 600;
-    color: black;
-    border: 1px solid black !important;
-    transition: all 0.25s ease-in-out;
-    background-color: var(--primary-color-light);
 
-    &.active{
-        height: 2.75rem;
-        background-color: var(--primary-color);
-    }
-}
-
-.button-margin{
-    margin: 1rem 0rem;
-
-}
 
 
 

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.scss

@@ -9,7 +9,6 @@
 
 .example-box {
   margin: 15px 10px;
-  border-bottom: solid 1px #ccc;
   color: rgba(0, 0, 0, 0.87);
   display: grid;
   grid-template-columns: 6fr .1fr 20fr .1fr 10fr .1fr 8fr .1fr 20fr .1fr 16fr;

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

@@ -10,11 +10,16 @@
 
 .tab-row{
     display: flex;
-    // height: 3rem;
     flex: 0 0 3rem;
     > *{
         flex: 1 1 0;
     }
+    > :first-child{
+      border-radius: 10px 0 0 0
+    }
+    > :last-child{
+      border-radius: 0 10px 0 0
+    }
 }
 
 .tab-button{
@@ -22,7 +27,7 @@
     font-size: 1.375rem;
     font-weight: 600;
     color: black;
-    border: 1px solid black !important;
+    border: solid 1px var(--border-color);
     transition: all 0.25s ease-in-out;
     background-color: var(--primary-color-light);
 

src/app/journal/journal.module.ts

@@ -76,6 +76,7 @@ import { JournalRulesetComponent } from './journal-ruleset/journal-ruleset.compo
 import { JournalSettingsComponent } from './journal-settings/journal-settings.component';
 import { SimpleItemModalComponent } from './journal-inventory/simple-item-modal/simple-item-modal.component';
 import { FoodDetailsComponent } from './journal-inventory/food-details/food-details.component';
+import { TabBarComponent } from './journal-home/tab-bar/tab-bar.component';
 
 @NgModule({
   declarations: [
@@ -146,6 +147,7 @@ import { FoodDetailsComponent } from './journal-inventory/food-details/food-deta
     ModalComponent,
     SimpleItemModalComponent,
     FoodDetailsComponent,
+    TabBarComponent,
   ],
   imports: [
     CommonModule,

src/styles.scss

@@ -138,8 +138,50 @@ input[type="checkbox"] {
     width: 1.25rem;
 }
 
-input[type="checkbox"]:checked {
-    color: red;
+
+// Value Box
+
+.value-row{
+    display: flex;
+    justify-content: space-around;
+}
+
+.value-container{
+    width: 6rem;
+}
+
+.value-box{
+    width: 3.5rem;
+    height: 3rem;
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    border-radius: 10px;
+    background-color: white;
+    box-shadow: var(--shadow-small);
+}
+
+.value-input{
+    border: none;
+    outline: none;
+    text-align: center;
+    background-color: transparent;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        appearance: none;
+        margin: 0;
+    }   
+}
+
+.value-label{
+    font-size: 1.25rem;
+    font-weight: 600;
+    text-align: center;
+    padding: 0.5rem;
 }