Website Navigation Routing

This commit is contained in:
Dorian Nemec 2025-01-15 08:48:41 +01:00
parent 98a54f0fde
commit 5c2e885e7d
8 changed files with 52 additions and 45 deletions

View file

@ -5,7 +5,7 @@ import {routes} from "./app.routes";
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forChild(routes)],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule { }

View file

@ -1 +1 @@
<app-employee-detail></app-employee-detail> <router-outlet></router-outlet>

View file

@ -1,3 +1,5 @@
<div class="d-flex flex-col" style="height: 100%;">
<app-navigation-bar></app-navigation-bar>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="dropdown position-absolute top-0 end-0 m-3"> <div class="dropdown position-absolute top-0 end-0 m-3">
@ -47,3 +49,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>

View file

@ -1,9 +1,12 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {NavigationBarComponent} from "../navigation-bar/navigation-bar.component";
@Component({ @Component({
selector: 'app-mitarbeiterverwaltung-view', selector: 'app-mitarbeiterverwaltung-view',
standalone: true, standalone: true,
imports: [], imports: [
NavigationBarComponent
],
templateUrl: './mitarbeiterverwaltung-view.component.html', templateUrl: './mitarbeiterverwaltung-view.component.html',
styleUrl: './mitarbeiterverwaltung-view.component.css' styleUrl: './mitarbeiterverwaltung-view.component.css'
}) })

View file

@ -5,18 +5,13 @@
</a> </a>
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active text-black" aria-current="page">
Dashboard
</a>
</li>
<li> <li>
<a routerLink="/mitarbeiter" class="nav-link text-black"> <a routerLink="/mitarbeiter" routerLinkActive="active" class="nav-link text-black">
Mitarbeiterverwaltung Mitarbeiterverwaltung
</a> </a>
</li> </li>
<li> <li>
<a routerLink="/qualifikationbearbeiten" class="nav-link text-black"> <a routerLink="/qualifikationbearbeiten" routerLinkActive="active" class="nav-link text-black">
Qualifikationsverwaltung Qualifikationsverwaltung
</a> </a>
</li> </li>

View file

@ -1,11 +1,12 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {RouterLink} from "@angular/router"; import {RouterLink, RouterLinkActive} from "@angular/router";
@Component({ @Component({
selector: 'app-navigation-bar', selector: 'app-navigation-bar',
standalone: true, standalone: true,
imports: [ imports: [
RouterLink RouterLink,
RouterLinkActive
], ],
templateUrl: './navigation-bar.component.html', templateUrl: './navigation-bar.component.html',
styleUrl: './navigation-bar.component.css' styleUrl: './navigation-bar.component.css'

View file

@ -1,3 +1,5 @@
<div class="d-flex flex-col" style="height: 100%;">
<app-navigation-bar></app-navigation-bar>
<div class="container"> <div class="container">
<button class="back-button">Back</button> <button class="back-button">Back</button>
@ -33,4 +35,4 @@
<button class="save-button">Save</button> <button class="save-button">Save</button>
</div> </div>
</div>

View file

@ -1,9 +1,12 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {NavigationBarComponent} from "../navigation-bar/navigation-bar.component";
@Component({ @Component({
selector: 'app-qualifikaton-bearbeiten-view', selector: 'app-qualifikaton-bearbeiten-view',
standalone: true, standalone: true,
imports: [], imports: [
NavigationBarComponent
],
templateUrl: './qualifikaton-bearbeiten-view.component.html', templateUrl: './qualifikaton-bearbeiten-view.component.html',
styleUrl: './qualifikaton-bearbeiten-view.component.css' styleUrl: './qualifikaton-bearbeiten-view.component.css'
}) })