feat: add routing

- add info component

Author: HlibPavlyk

src/CoinyProject.Client/src/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="bg-pastel-red">
+<div class="min-h-screen bg-pastel-red">
   <app-top-bar></app-top-bar>
-  <app-album></app-album>
+  <router-outlet></router-outlet>
 </div>

src/CoinyProject.Client/src/app/app.routes.ts

@@ -1,3 +1,15 @@
 import { Routes } from '@angular/router';
+import {InfoComponent} from "./info/info.component";
+import {AlbumComponent} from "./album/album.component";
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  //{ path: '', redirectTo: 'albums', pathMatch: 'full' },
+  { path: 'albums', component: AlbumComponent },
+  { path: 'info', component: InfoComponent },
+  /*{
+    path: 'employees',
+    component: EmployeeComponent,
+    canActivate: [authGuard],
+    data: { roles: ['Administrator', 'HRManager', 'ProjectManager'] }
+  },*/
+]

src/CoinyProject.Client/src/app/info/info.component.css

@@ -0,0 +1,16 @@
+<div class="bg-white p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-8">
+  <!-- Project Title -->
+  <h1 class="text-3xl font-bold mb-4 text-gray-900">{{ projectTitle }}</h1>
+
+  <!-- Project Description -->
+  <p class="text-gray-700 mb-4">
+    {{ projectDescription }}
+  </p>
+
+  <!-- How to Use -->
+  <h2 class="text-2xl font-semibold mb-3 text-gray-900">How to Use the Platform</h2>
+
+  <p class="text-gray-700 mb-4">
+    {{ projectUsage }}
+  </p>
+</div>

src/CoinyProject.Client/src/app/info/info.component.html

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-info',
+  standalone: true,
+  imports: [],
+  templateUrl: './info.component.html',
+  styleUrl: './info.component.css'
+})
+export class InfoComponent {
+  projectTitle = 'COINY Project';
+  projectDescription = `COINY is a platform designed to make it easier for users to explore and manage various items such as albums, auctions, and community posts. The platform offers a clean interface, dynamic navigation, and efficient management features.`;
+  projectUsage = `To navigate through the platform, use the top navigation bar where you can switch between sections like "Home," "Albums," "Community," and "Auctions." Users can also log in, switch languages, and create new albums directly from the navigation interface. The project focuses on simplicity, ease of use, and efficient item management.`;
+}

src/CoinyProject.Client/src/app/info/info.component.ts

@@ -1,17 +0,0 @@
-.nav-link {
-  padding: 10px 20px; /* Consistent padding */
-  min-width: 100px; /* Minimum width to accommodate text */
-  text-align: center; /* Center the text */
-  border: 2px solid transparent; /* Invisible border by default */
-  border-radius: 8px; /* Rounded corners */
-  transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transitions */
-}
-.nav-link:hover {
-  background-color: #1a202c; /* Darker background on hover */
-  color: #cbd5e0; /* Lighter text on hover */
-}
-.nav-link.active {
-  background-color: #2b6cb0; /* Active background color */
-  color: white; /* White text for active links */
-  border-color: #2b6cb0; /* Matching border color */
-}

src/CoinyProject.Client/src/app/top-bar/top-bar.component.css

@@ -36,9 +36,10 @@
         </div>
 
         <!-- Information Icon -->
-        <a href="#" class="hover:text-gray-400 transition duration-200">
+        <button (click)="navigateTo('Info')" class="hover:text-gray-400 transition duration-200 cursor-pointer">
           <i class="fas fa-info-circle"></i>
-        </a>
+        </button>
+
       </div>
     </div>
   </div>
@@ -58,12 +59,12 @@
           Home
         </a>
 
-        <a href="#"
+        <button
            (click)="navigateTo('Albums')"
            [ngClass]="{'text-yellow-400 font-semibold': activePage === 'Albums', 'text-gray-300': activePage !== 'Albums'}"
            class="hover:text-yellow-500 transition duration-200">
           Albums
-        </a>
+        </button>
 
         <a href="#"
            (click)="navigateTo('Community')"

src/CoinyProject.Client/src/app/top-bar/top-bar.component.html

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import {NgClass, NgForOf, NgIf, NgOptimizedImage} from "@angular/common";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'app-top-bar',
@@ -27,7 +28,7 @@ export class TopBarComponent {
   // Array of available languages
   availableLanguages: string[] = ['UA', 'EN'];
 
-  constructor() {}
+  constructor(private router: Router) {}
 
   // Toggle the language dropdown
   toggleLanguageDropdown() {
@@ -53,7 +54,9 @@ export class TopBarComponent {
   // Method to handle navigation clicks (for Home, Albums, etc.)
   navigateTo(page: string) {
     this.activePage = page;
-    console.log(`Navigating to ${page}`);
+    this.router.navigate([`/${page.toLowerCase()}`])
+      .then(r => console.log('Navigating to Home'));
+
   }
 
 }