asdkfjasldkfj

angular.json

@@ -3,7 +3,8 @@
   "cli": {
     "schematicCollections": [
       "@angular-eslint/schematics"
-    ]
+    ],
+    "analytics": false
   },
   "version": 1,
   "newProjectRoot": "projects",

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>ç

src/app/app.component.scss

@@ -1,3 +1,3 @@
 :host {
-  
-}
+
+}

src/app/app.component.spec.ts

@@ -7,10 +7,9 @@ import { ElectronService } from './core/services';
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      providers: [ElectronService],
-      imports: [RouterTestingModule, TranslateModule.forRoot()]
-    }).compileComponents();
+    providers: [ElectronService],
+    imports: [RouterTestingModule, TranslateModule.forRoot(), AppComponent]
+}).compileComponents();
   }));
 
   it('should create the app', waitForAsync(() => {

src/app/app.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 import { ElectronService } from './core/services';
-import { TranslateService } from '@ngx-translate/core';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
 import { APP_CONFIG } from '../environments/environment';
+import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, TranslateModule]
 })
 export class AppComponent {
   constructor(

src/app/app.routes.ts

@@ -0,0 +1,28 @@
+import {Routes} from "@angular/router";
+import {HomeComponent} from "./home/home.component";
+import {DetailComponent} from "./detail/detail.component";
+import {TeamComponent} from "./team/team.component";
+import {PlayerComponent} from "./player/player.component";
+import {SeriesComponent} from "./series/series.component";
+import {MatchComponent} from "./match/match.component";
+import {SettingsComponent} from "./settings/settings.component";
+import {PageNotFoundComponent} from "./shared/components";
+
+export const routes: Routes = [
+  {path: 'home', component: HomeComponent},
+  {path: 'detail', component: DetailComponent},
+  {path: 'team', component: TeamComponent},
+  {path: 'player', component: PlayerComponent},
+  {path: 'series', component: SeriesComponent},
+  {path: 'match', component: MatchComponent},
+  {path: 'settings', component: SettingsComponent},
+  {
+    path: '',
+    redirectTo: '/home',
+    pathMatch: 'full'
+  },
+  {
+    path: '**',
+    component: PageNotFoundComponent
+  }
+];

src/app/detail/detail.component.html

@@ -3,5 +3,5 @@ <h1 class="title">
     {{ 'PAGES.DETAIL.TITLE' | translate }}
   </h1>
 
-  <a routerLink="/">{{ 'PAGES.DETAIL.BACK_TO_HOME' | translate }}</a>
+  <a routerLink="/" routerLinkActive="active">{{ 'PAGES.DETAIL.BACK_TO_HOME' | translate }}</a>
 </div>

src/app/detail/detail.component.spec.ts

@@ -11,9 +11,8 @@ describe('DetailComponent', () => {
 
   beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-      declarations: [DetailComponent],
-      imports: [TranslateModule.forRoot(), RouterTestingModule]
-    }).compileComponents();
+    imports: [TranslateModule.forRoot(), RouterTestingModule, DetailComponent]
+}).compileComponents();
 
     fixture = TestBed.createComponent(DetailComponent);
     component = fixture.componentInstance;

src/app/detail/detail.component.ts

@@ -1,9 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import {RouterLink, RouterLinkActive} from '@angular/router';
 
 @Component({
-  selector: 'app-detail',
-  templateUrl: './detail.component.html',
-  styleUrls: ['./detail.component.scss']
+    selector: 'app-detail',
+    templateUrl: './detail.component.html',
+    styleUrls: ['./detail.component.scss'],
+    standalone: true,
+  imports: [RouterLink, TranslateModule, RouterLinkActive]
 })
 export class DetailComponent implements OnInit {
 

src/app/home/home.component.html

@@ -1,7 +1,39 @@
+<router-outlet></router-outlet>
 <div class="container">
   <h1 class="title">
     {{ 'PAGES.HOME.TITLE' | translate }}
   </h1>
 
-  <a routerLink="/detail">{{ 'PAGES.HOME.GO_TO_DETAIL' | translate }}</a>
+  <nav>
+    <a class="detail" routerLink="/detail"
+       routerLinkActive="activebutton"
+       ariaCurrentWhenActive="page">
+      {{ 'PAGES.HOME.GO_TO_DETAIL' | translate }}
+    </a>
+    <a class="team" routerLink="/team"
+       routerLinkActive="activebutton"
+       ariaCurrentWhenActive="page">
+      {{ 'PAGES.HOME.GO_TO_TEAM' | translate }}
+    </a>
+    <a class="player" routerLink="/player"
+       routerLinkActive="activebutton"
+       ariaCurrentWhenActive="page">
+      {{ 'PAGES.HOME.GO_TO_PLAYER' | translate }}
+    </a>
+    <a class="series" routerLink="/series"
+       routerLinkActive="activebutton"
+       ariaCurrentWhenActive="page">
+      {{ 'PAGES.HOME.GO_TO_SERIES' | translate }}
+    </a>
+    <a class="match" routerLink="/match"
+       routerLinkActive="activebutton"
+       ariaCurrentWhenActive="page">
+      {{ 'PAGES.HOME.GO_TO_MATCH' | translate }}
+    </a>
+    <a class="settings" routerLink="/settings"
+       routerLinkActive="activebutton"
+       ariaCurrentWhenActive="page">
+      {{ 'PAGES.HOME.GO_TO_SETTINGS' | translate }}
+    </a>
+  </nav>
 </div>

src/app/home/home.component.scss

@@ -1,3 +1,25 @@
 :host {
-
-}
+  .button {
+    box-shadow: inset 0 1px 0 0 #ffffff;
+    background: #ffffff linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
+    border-radius: 6px;
+    border: 1px solid #dcdcdc;
+    display: inline-block;
+    cursor: pointer;
+    color: #666666;
+    font-family: Arial, sans-serif;
+    font-size: 15px;
+    font-weight: bold;
+    padding: 6px 24px;
+    text-decoration: none;
+    text-shadow: 0 1px 0 #ffffff;
+    outline: 0;
+  }
+  .activebutton {
+    box-shadow: inset 0 1px 0 0 #dcecfb;
+    background: #bddbfa linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
+    border: 1px solid #84bbf3;
+    color: #ffffff;
+    text-shadow: 0 1px 0 #528ecc;
+  }
+}

src/app/home/home.component.spec.ts

@@ -10,9 +10,8 @@ describe('HomeComponent', () => {
 
   beforeEach(waitForAsync(() => {
     void TestBed.configureTestingModule({
-      declarations: [HomeComponent],
-      imports: [TranslateModule.forRoot(), RouterTestingModule]
-    }).compileComponents();
+    imports: [TranslateModule.forRoot(), RouterTestingModule, HomeComponent]
+}).compileComponents();
 
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;

src/app/home/home.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+    selector: 'app-home',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.scss'],
+    standalone: true,
+  imports: [RouterLink, TranslateModule, RouterLinkActive, RouterOutlet]
 })
 export class HomeComponent implements OnInit {
 

src/app/match/match.component.html

@@ -0,0 +1,5 @@
+<div class="container">
+  <h1 class="title">
+    {{ 'PAGES.MATCH.TITLE' | translate }}
+  </h1>
+</div>