add sidebar and various component

This commit is contained in:
pratik
2025-10-17 14:00:32 -05:00
parent 7126c618ea
commit ec5d9916ba
12 changed files with 1504 additions and 25 deletions

View File

@@ -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;
}
}