finish html + css of header

Author: AvidDollars

frontend/src/app/header/header.component.html

@@ -6,3 +6,18 @@
     d="M0 220L28.5 219.7C57 219.3 114 218.7 171.2 214.3C228.3 210 285.7 202 342.8 193.5C400 185 457 176 514.2 157.7C571.3 139.3 628.7 111.7 685.8 112C743 112.3 800 140.7 857.2 147.7C914.3 154.7 971.7 140.3 1028.8 133.3C1086 126.3 1143 126.7 1171.5 126.8L1200 127L1200 0L1171.5 0C1143 0 1086 0 1028.8 0C971.7 0 914.3 0 857.2 0C800 0 743 0 685.8 0C628.7 0 571.3 0 514.2 0C457 0 400 0 342.8 0C285.7 0 228.3 0 171.2 0C114 0 57 0 28.5 0L0 0Z"
     stroke-linecap="round" stroke-linejoin="miter"></path>
 </svg>
+
+<div class="
+  aspect-219/40
+  grid grid-cols-6 grid-rows-6
+  place-items-center
+">
+  <app-title class="
+    row-start-3 col-start-1 row-span-2 col-span-2 -translate-y-1/8
+  " />
+  <app-user-space class="
+    w-full
+    col-start-4 row-start-2 col-span-full mr-4
+    md:col-start-5
+  " />
+</div>

frontend/src/app/header/header.component.ts

@@ -1,12 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TitleComponent } from './title/title.component';
+import { UserSpaceComponent } from './user-space/user-space.component';
 
 @Component({
   selector: 'app-header',
-  imports: [],
+  imports: [
+    TitleComponent, UserSpaceComponent,
+  ],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent {
-
 }

frontend/src/app/header/user-space/user-space.component.html

@@ -1 +1,22 @@
-<p>user-space works!</p>
+<nav>
+  <ul class="
+    flex justify-center gap-4
+    [&_a]:bg-secondary [&_a]:hover:bg-secondary-light [&_a]:px-4 [&_a]:py-2 [&_a]:rounded-md
+    lg:[&_a]:px-8 lg:[&_a]:py-4 lg:text-xl
+  ">
+    <li><a href="#">login</a></li>
+    <li><a href="#">register</a></li>
+
+    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="
+      h-7 fill-secondary-light
+      stroke-secondary-dark
+      -translate-y-1/8
+      lg:h-12 lg:-translate-y-1/4
+      hover:fill-secondary-dark hover:stroke-secondary-light
+    ">
+      <path
+        d="M8 7C9.65685 7 11 5.65685 11 4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4C5 5.65685 6.34315 7 8 7Z" />
+      <path d="M14 12C14 10.3431 12.6569 9 11 9H5C3.34315 9 2 10.3431 2 12V15H14V12Z" />
+    </svg>
+  </ul>
+</nav>