feat: add section bar

Author: HlibPavlyk

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

@@ -0,0 +1,17 @@
+<div class="container mx-auto px-4 py-6">
+  <!-- Main Content Wrapper -->
+
+      <div class="bg-pastel-red-light shadow-md rounded-lg p-4">
+        <h3 class="text-lg font-bold mb-4">Колекціонування</h3>
+        <h4 class="text-md font-bold mb-2">Нумізматика</h4>
+        <ul class="space-y-2">
+          <li><a href="#" class="text-blue-500 hover:underline">Золоті, платинові і паладієві монети</a></li>
+          <li><a href="#" class="text-blue-500 hover:underline">Монети Київської Русі</a></li>
+          <li><a href="#" class="text-blue-500 hover:underline">Монети Російської Імперії</a></li>
+          <li><a href="#" class="text-blue-500 hover:underline">Монети Польщі</a></li>
+          <li><a href="#" class="text-blue-500 hover:underline">Монети України</a></li>
+          <li><a href="#" class="text-blue-500 hover:underline">Монети незалежних Держав Азії</a></li>
+          <li><a href="#" class="text-blue-500 hover:underline">Монети античних держав</a></li>
+        </ul>
+      </div>
+    </div>

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

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import {NgForOf} from "@angular/common";
+
+@Component({
+  selector: 'app-section-bar',
+  standalone: true,
+  imports: [
+    NgForOf
+  ],
+  templateUrl: './section-bar.component.html',
+  styleUrl: './section-bar.component.css'
+})
+export class SectionBarComponent {
+  sections = [
+    {
+      id: 1,
+      name: 'Dashboard',
+      description: 'Overview of system metrics and status.',
+    },
+    {
+      id: 2,
+      name: 'User Management',
+      description: 'Manage users, roles, and permissions.',
+    },
+    {
+      id: 3,
+      name: 'Settings',
+      description: 'Configure system settings and preferences.',
+    },
+    {
+      id: 4,
+      name: 'Reports',
+      description: 'View and generate system reports.',
+    },
+    {
+      id: 5,
+      name: 'Notifications',
+      description: 'Manage alerts and notification settings.',
+    },
+    // Додайте інші розділи
+  ];
+
+  navigateToSection(section: any) {
+    // Логіка для навігації до відповідного розділу
+    console.log('Navigating to section:', section.name);
+    // Наприклад, можна реалізувати навігацію за допомогою Angular Router:
+    // this.router.navigate([`/section/${section.id}`]);
+  }
+}