diff --git a/src/app/app.component.html b/src/app/app.component.html index cf9d60c..2f70899 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,23 +1,3 @@ -@if ($employees | async; as employees) { - - - {{ node.firstName }} - @if (tree.isExpanded(node)) { - - - } @else { - - } - - -} + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6ff6968..9be37f5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,23 +1,12 @@ -import {AsyncPipe, KeyValuePipe} from '@angular/common'; import {Component} from '@angular/core'; -import {MatIconButton} from '@angular/material/button'; -import {MatIconModule} from '@angular/material/icon'; -import {MatTree, MatTreeModule} from '@angular/material/tree'; import { RouterOutlet } from '@angular/router'; -import { EmployeeControllerService, FindAll1Response } from '@core/ems'; -import { Observable } from 'rxjs'; +import {HeaderComponent} from '@app/header/header.component'; @Component({ selector: 'app-root', - imports: [RouterOutlet, AsyncPipe, MatIconModule, MatTree, MatTreeModule, KeyValuePipe, MatIconButton], + imports: [RouterOutlet, HeaderComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) export class AppComponent{ - readonly $employees: Observable; - childrenAccessor = () => []; - - constructor(private apiClient: EmployeeControllerService) { - this.$employees = this.apiClient.findAll1(); - } } diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..087641c 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,4 @@ -import { Routes } from '@angular/router'; +import {Routes} from '@angular/router'; +import {DashboardComponent} from '@app/views/dashboard/dashboard.component'; -export const routes: Routes = []; +export const routes: Routes = [{path: '', component: DashboardComponent, title: 'Home'}]; diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html new file mode 100644 index 0000000..9f4a656 --- /dev/null +++ b/src/app/header/header.component.html @@ -0,0 +1,12 @@ + + + + \ No newline at end of file diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss new file mode 100644 index 0000000..123ce93 --- /dev/null +++ b/src/app/header/header.component.scss @@ -0,0 +1,33 @@ +@use '@angular/material' as mat; + +.header{ + position: sticky; + top: 0; + margin: 0; + padding: 0.5rem 1rem; + z-index: 100; + height: fit-content; + background-color: var(--mat-sys-primary-fixed); + + nav { + display: flex; + height: fit-content; + width: 100%; + margin: 0; + box-sizing: border-box; + list-style: none; + gap: 0.25rem; + } + + a, button { + color: var(--mat-sys-on-primary-fixed-variant); + + &:hover, &.active { + background-color: color-mix(in srgb, var(--mat-sys-primary) 50%, transparent) + } + } + + &__login { + min-width: fit-content; + } +} \ No newline at end of file diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts new file mode 100644 index 0000000..797339b --- /dev/null +++ b/src/app/header/header.component.ts @@ -0,0 +1,40 @@ +import {Component, OnInit} from '@angular/core'; +import {MatAnchor, MatButton} from '@angular/material/button'; +import {MatIcon} from '@angular/material/icon'; +import {MatToolbar} from '@angular/material/toolbar'; +import {Router, RouterLink} from '@angular/router'; + +@Component({ + selector: 'app-header', + imports: [ + MatToolbar, + MatAnchor, + RouterLink, + MatIcon, + MatButton, + ], + templateUrl: './header.component.html', + styleUrl: './header.component.scss' +}) +export class HeaderComponent implements OnInit { + routes: Array<{ path: string, title: string, class: string }> = []; + + constructor( + private router: Router + ) { + } + + ngOnInit(): void { + this.routes = this.router.config + .filter(route => !route.path?.includes(':')) + .filter(route => !route.path?.includes('/')) + .map(route => ({ + path: `/${route.path}`, + title: route.title as string, + class: `/${route.path}` == this.router.url ? 'active' : '' + })); + } +} + + + diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html new file mode 100644 index 0000000..9c5fce9 --- /dev/null +++ b/src/app/views/dashboard/dashboard.component.html @@ -0,0 +1 @@ +

dashboard works!

diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts new file mode 100644 index 0000000..96e3d35 --- /dev/null +++ b/src/app/views/dashboard/dashboard.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-dashboard', + imports: [], + templateUrl: './dashboard.component.html', + styleUrl: './dashboard.component.scss' +}) +export class DashboardComponent { + +} diff --git a/src/main.ts b/src/main.ts index 12e3e23..582ba49 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,6 @@ import { bootstrapApplication } from '@angular/platform-browser'; - -import { AppComponent } from './app/app.component'; -import { appConfig } from './app/app.config'; +import { AppComponent } from '@app/app.component'; +import { appConfig } from '@app/app.config'; bootstrapApplication(AppComponent, appConfig) .catch((err) => console.error(err)); diff --git a/src/styles.scss b/src/styles.scss index fa39552..adce072 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,15 @@ -/* You can add global styles to this file, and also import other style files */ +@use '@angular/material' as mat; + +html { + color-scheme: light dark; + + @include mat.theme(( + color: mat.$azure-palette, + typography: Roboto, + density: 0 + )); +} + html, body { height: 100%; @@ -6,5 +17,6 @@ html, body { body { margin: 0; - font-family: Roboto, "Helvetica Neue", sans-serif; + background: var(--mat-sys-surface); + color: var(--mat-sys-on-surface); }