boki/stock-bot
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

improved dashboard

Browse source
This commit is contained in:
Bojan Kucera 2025-06-02 20:31:22 -04:00
parent 114c280734
commit 90168ba619
8 changed files with 781 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

63
apps/interface-services/trading-dashboard/src/app/app.html
View file

@ -1,18 +1,67 @@
<!-- Trading Dashboard App -->
<div class="min-h-screen bg-gray-50">
<app-sidebar></app-sidebar>
<main class="main-content">
<router-outlet></router-outlet>
</main>
<div class="app-layout">
<!-- Sidebar -->
<app-sidebar [opened]="sidenavOpened()" (navigationItemClick)="onNavigationClick($event)"></app-sidebar>
<!-- Main Content Area -->
<div class="main-content" [class.main-content-closed]="!sidenavOpened()">
<!-- Top Navigation Bar -->
<mat-toolbar class="top-toolbar">
<button mat-icon-button (click)="toggleSidenav()" class="mr-2">
<mat-icon>menu</mat-icon>
</button>
<span class="text-lg font-semibold text-gray-800">{{ title }}</span>
<span class="spacer"></span>
<button mat-icon-button>
<mat-icon>notifications</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>account_circle</mat-icon>
</button>
</mat-toolbar>
<!-- Page Content -->
<div class="page-content">
<router-outlet></router-outlet>
</div>
</div>
</div>
<style>
.app-layout {
display: flex;
height: 100vh;
background-color: #f9fafb;
}
.main-content {
margin-left: 256px; /* Width of sidebar (w-64 = 16rem = 256px) */
min-height: 100vh;
flex: 1;
display: flex;
flex-direction: column;
margin-left: 256px; /* Width of sidebar */
transition: margin-left 0.3s ease;
}
.main-content-closed {
margin-left: 0;
}
.top-toolbar {
background-color: white;
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.spacer {
flex: 1;
}
.page-content {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
}
@media (max-width: 768px) {
.main-content {
margin-left: 0;