feat: add top bar component

- add logo image

Author: HlibPavlyk

src/CoinyProject.Client/public/logo.png

@@ -0,0 +1,13 @@
+<div class="container mx-auto px-6 py-6 bg-pastel-red">
+  <div class="flex flex-wrap -mx-4">
+    <!-- Section Bar (Left) -->
+    <div class="w-full lg:w-1/4 px-4">
+      <app-section-bar></app-section-bar>
+    </div>
+
+    <!-- Album View (Right) -->
+    <div class="w-full lg:w-3/4 px-4">
+      <app-album-view></app-album-view>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,48 @@
+<!-- Main Navigation Bar -->
+
+<nav class="bg-gray-800 text-gray-100 shadow-md">
+  <div class="container mx-auto px-6">
+    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+
+      <!-- Left Side (Logo and Links) -->
+      <div class="flex items-center space-x-8">
+
+        <!-- Logo -->
+        <div class="flex items-center space-x-2">
+          <img src="logo.png" alt="Logo" class="h-8 w-auto"> <!-- Replace with the actual logo path -->
+          <span class="font-bold text-xl text-yellow-400">COINY</span>
+        </div>
+      </div>
+
+      <!-- Right Side (Icons and Actions) -->
+      <div class="flex items-center space-x-6">
+        <a href="#" class="hover:text-gray-400 transition duration-200">Розділи</a>
+        <a href="#" class="hover:text-gray-400 transition duration-200"><i class="fas fa-sign-in-alt"></i></a>
+        <a href="#" class="hover:text-gray-400 transition duration-200"><i class="fas fa-globe"></i> UA</a>
+        <a href="#" class="hover:text-gray-400 transition duration-200"><i class="fas fa-info-circle"></i></a>
+        <a href="#" class="hover:text-gray-400 transition duration-200"><i class="fas fa-search"></i></a>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<!-- Sub Navigation Bar -->
+<div class="bg-gray-700 text-gray-200 shadow-sm">
+<div class="container mx-auto px-6">
+  <div class="container mx-auto px-4 py-2 flex justify-between items-center">
+
+    <!-- Left Section -->
+    <div class="flex items-center space-x-6">
+      <a href="#" class="text-yellow-400 hover:text-yellow-500 font-semibold transition duration-200">Маркет</a>
+      <a href="#" class="text-gray-300 hover:text-gray-400 transition duration-200">Спільнота</a>
+      <a href="#" class="text-gray-300 hover:text-gray-400 transition duration-200">Журнал</a>
+    </div>
+
+    <!-- Create Listing Button -->
+    <a href="#" class="flex items-center space-x-2 bg-transparent border border-yellow-400 text-yellow-400 rounded-md px-4 py-2 hover:bg-yellow-400 hover:text-white transition duration-200">
+      <span class="font-semibold">+</span>
+      <span>Створити лот</span>
+    </a>
+  </div>
+</div>
+</div>

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import {NgOptimizedImage} from "@angular/common";
+
+@Component({
+  selector: 'app-top-bar',
+  standalone: true,
+  imports: [
+    NgOptimizedImage
+  ],
+  templateUrl: './top-bar.component.html',
+  styleUrl: './top-bar.component.css'
+})
+export class TopBarComponent {
+
+}