add sidebar and various component
This commit is contained in:
@@ -1,36 +1,30 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { ArtifactService } from './services/artifact';
|
||||
import { NavSidebarComponent } from './components/nav-sidebar/nav-sidebar';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
|
||||
imports: [CommonModule, RouterOutlet, NavSidebarComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1><span class="logo">[W13]</span></h1>
|
||||
<div class="header-info">
|
||||
<span class="badge">{{ deploymentMode }}</span>
|
||||
<span class="badge">{{ storageBackend }}</span>
|
||||
<div class="app-layout">
|
||||
<app-nav-sidebar (sidebarToggled)="onSidebarToggle($event)"></app-nav-sidebar>
|
||||
|
||||
<main class="main-content" [class.sidebar-collapsed]="isSidebarCollapsed">
|
||||
<header class="top-header">
|
||||
<h1><span class="logo">[W13]</span> Warehouse13</h1>
|
||||
<div class="header-info">
|
||||
<span class="badge">{{ deploymentMode }}</span>
|
||||
<span class="badge">{{ storageBackend }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content-area">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="tabs">
|
||||
<a routerLink="/artifacts" routerLinkActive="active" class="tab-button">
|
||||
<span class="material-icons md-16">storage</span> Artifacts
|
||||
</a>
|
||||
<a routerLink="/upload" routerLinkActive="active" class="tab-button">
|
||||
<span class="material-icons md-16">upload</span> Upload
|
||||
</a>
|
||||
<a routerLink="/query" routerLinkActive="active" class="tab-button">
|
||||
<span class="material-icons md-16">search</span> Query
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./app.css']
|
||||
@@ -38,6 +32,7 @@ import { ArtifactService } from './services/artifact';
|
||||
export class AppComponent implements OnInit {
|
||||
deploymentMode: string = '';
|
||||
storageBackend: string = '';
|
||||
isSidebarCollapsed: boolean = false;
|
||||
|
||||
constructor(private artifactService: ArtifactService) {}
|
||||
|
||||
@@ -50,4 +45,8 @@ export class AppComponent implements OnInit {
|
||||
error: (err) => console.error('Failed to load API info:', err)
|
||||
});
|
||||
}
|
||||
|
||||
onSidebarToggle(isCollapsed: boolean) {
|
||||
this.isSidebarCollapsed = isCollapsed;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user