67 lines
1.5 KiB
HTML
67 lines
1.5 KiB
HTML
<!-- Trading Dashboard App -->
|
|
<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>
|
|
<app-notifications></app-notifications>
|
|
<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 {
|
|
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;
|
|
}
|
|
}
|
|
</style>
|