feat: added dashboard router outlet

frontend/bec_atlas/src/app/app.routes.ts

@@ -2,11 +2,22 @@ import { Routes } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { OverviewComponent } from './overview/overview.component';
+import { OverviewGridComponent } from './overview-grid/overview-grid.component';
+import { ScanTableComponent } from './scan-table/scan-table.component';
+import { DeploymentAdminComponent } from './deployment-admin/deployment-admin.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: 'login', pathMatch: 'full' },
   { path: 'login', component: LoginComponent },
-  { path: 'dashboard', component: DashboardComponent },
+  {
+    path: 'dashboard',
+    component: DashboardComponent,
+    children: [
+      { path: 'scan-table', component: ScanTableComponent },
+      { path: 'deployment-admin', component: DeploymentAdminComponent },
+    ],
+  },
   { path: 'overview', component: OverviewComponent },
+  { path: 'overview-grid', component: OverviewGridComponent },
   { path: '**', redirectTo: 'login' },
 ];

frontend/bec_atlas/src/app/dashboard/dashboard.component.html

@@ -1,20 +1,58 @@
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav mode="side" opened>
-    <button mat-button class="menu-item">
-      <mat-icon>account_circle</mat-icon>
-    </button>
-    <button mat-button class="menu-item">
+    <div>
+      <img
+        src="assets/BEC-Atlas-full-conv-LC.png"
+        alt="BEC"
+        width="40"
+        height="40"
+        style="margin: 10px"
+      />
+    </div>
+    <mat-divider></mat-divider>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <mat-icon>account_circle</mat-icon>
+          <span class="menu-text">Username</span>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <button mat-button>Profile</button>
+      <button mat-button>Settings</button>
+      <button mat-button>Logout</button>
+    </mat-expansion-panel>
+    <mat-divider></mat-divider>
+    <button
+      mat-button
+      class="menu-item"
+      [routerLink]="['/dashboard/scan-table']"
+    >
       <mat-icon>home</mat-icon>
       <span class="menu-text">Data Browser</span>
     </button>
-    <button mat-button class="menu-item">
-      <mat-icon>science</mat-icon>
-      <span class="menu-text">Experiment Control</span>
-    </button>
-    <button mat-button class="menu-item">
-      <mat-icon>settings</mat-icon>
-      <span class="menu-text">Beamline Settings</span>
-    </button>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <mat-icon>science</mat-icon>
+          <span class="menu-text">Experiment Control</span>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <button
+        mat-button
+        class="menu-item"
+        [routerLink]="['/dashboard/scan-table']"
+      >
+        <span class="menu-text">Control</span>
+      </button>
+      <button
+        mat-button
+        class="menu-item"
+        [routerLink]="['/dashboard/deployment-admin']"
+      >
+        <span class="menu-text">Admin</span>
+      </button>
+    </mat-expansion-panel>
     <button mat-button class="menu-item">
       <mat-icon>help</mat-icon>
       <span class="menu-text">Help</span>
@@ -26,7 +64,8 @@
       <!-- <app-device-box [device]="'samx'" [signal_name]="'samx'"></app-device-box>
       <app-device-box [device]="'samy'" [signal_name]="'samy'"></app-device-box>
       <app-queue-table></app-queue-table> -->
-      <app-scan-table></app-scan-table>
+      <!-- <app-scan-table></app-scan-table> -->
+      <router-outlet></router-outlet>
     </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

frontend/bec_atlas/src/app/dashboard/dashboard.component.scss

@@ -1,3 +1,5 @@
+@use "@angular/material" as mat;
+
 .sidenav-container {
   height: 100vh;
   display: flex;
@@ -10,6 +12,7 @@ mat-sidenav {
   border-radius: 0px;
   padding: 16px;
   text-align: center;
+  @include mat.elevation(20);
 }
 
 .sidenav.collapsed {
@@ -22,16 +25,27 @@ mat-sidenav {
   padding: 16px 0;
 }
 
+mat-divider {
+  margin: 8px 0;
+}
+
 .menu-item {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   font-size: 1rem;
-}
+  margin: 8px 0;
+  @include mat.elevation(0);
+  // @include mat.elevation-transition();
+  border-radius: 4px;
 
-.menu-item.hovered {
-  background-color: var(--mat-sys-secondary-container);
+  &:hover {
+    cursor: pointer;
+    background-color: var(--mat-sys-primary-fixed-dim);
+
+    @include mat.elevation(4);
+  }
 }
 
 .menu-item mat-icon {
@@ -44,6 +58,48 @@ mat-sidenav {
   color: var(--mat-sys-on-primary);
 }
 
-// mat-sidenav-content {
-//   margin-left: 0px;
-// }
+mat-expansion-panel {
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-on-primary);
+  border-radius: 4px;
+  padding: 0px;
+  box-shadow: none !important;
+  margin: 8px 0;
+  &:hover {
+    cursor: pointer;
+    background-color: var(--mat-sys-primary-fixed-dim);
+  }
+
+  &.mat-expanded {
+    background-color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary) !important;
+  }
+
+  &.mat-expansion-panel-body {
+    color: var(--mat-sys-on-primary) !important;
+    margin: 0px;
+  }
+}
+
+mat-expansion-panel-header {
+  padding: 0px 8px;
+  // @include mat.elevation(0);
+}
+
+mat-panel-title {
+  color: var(--mat-sys-on-primary);
+}
+
+mat-panel-title mat-icon {
+  margin-right: 8px;
+}
+
+mat-sidenav-content {
+  margin-left: 260px !important;
+  margin: 10px;
+  height: 100vh;
+}
+
+.menu-text-submenu {
+  color: var(--mat-sys-on-primary);
+}

frontend/bec_atlas/src/app/dashboard/dashboard.component.ts

@@ -7,6 +7,9 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { ScanTableComponent } from '../scan-table/scan-table.component';
+import { MatDividerModule } from '@angular/material/divider';
+import { RouterModule } from '@angular/router';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @Component({
   selector: 'app-dashboard',
@@ -14,10 +17,13 @@ import { ScanTableComponent } from '../scan-table/scan-table.component';
     DeviceBoxComponent,
     CommonModule,
     QueueTableComponent,
+    MatExpansionModule,
+    MatDividerModule,
     MatSidenavModule,
     MatIconModule,
     MatButtonModule,
     ScanTableComponent,
+    RouterModule,
   ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss',