Add Docker Build Script

src/app/features/header-menu/header-menu.html

@@ -0,0 +1,18 @@
+<div class="menu-left">
+  <div class="brand">
+    <img src="/logo_inverted.svg" alt="logo"/>
+    <span><strong>ADOFAI Editor Forum</strong></span>
+  </div>
+
+  <span>Levels</span>
+  <span>Community</span>
+  <span>Leaderboard</span>
+  <span>About</span>
+</div>
+
+<div class="menu-right">
+  <span><strong>Login</strong></span>
+  <span>Signup</span>
+
+  <span class="material-symbols-outlined icon-40 settings">settings</span>
+</div>

src/app/features/header-menu/header-menu.scss

@@ -0,0 +1,64 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  gap: 30px;
+
+  width: fit-content;
+  min-width: 100%;
+
+  box-sizing: border-box;
+  border-bottom: oklch(0 0 0 / 20%) 2px solid;
+  background-color: oklch(1 0 0 / 60%);
+
+  backdrop-filter: blur(20px);
+
+  contain: layout paint;
+  isolation: isolate;
+  z-index: 100;
+
+  .menu-left, .menu-right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 48px;
+
+    span:not(.icon-40) {
+      font-size: 18px;
+      line-height: 40px;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
+  }
+
+  .menu-left {
+    justify-content: start;
+    padding: 12px;
+
+    .brand {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: start;
+      gap: 0;
+
+      img {
+        display: inline-block;
+        height: 20px;
+        padding: 10px;
+      }
+
+      span {
+        /*text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;*/
+      }
+    }
+  }
+
+  .menu-right {
+    flex-grow: 1;
+    justify-content: flex-end;
+    padding: 12px 20px;
+  }
+}

src/app/features/header-menu/header-menu.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'header-menu',
+  imports: [],
+  templateUrl: './header-menu.html',
+  styleUrl: './header-menu.scss',
+})
+export class HeaderMenu {}