Implement Header Menu Left

src/app/app.html

@@ -1,3 +1,5 @@
+<header-menu></header-menu>
+
 <div class="container">
   <h1>AEF Component Test</h1>
 

src/app/app.ts

@@ -2,10 +2,11 @@ import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { Switch } from './components/switch/switch';
 import { Dropdown, DropdownOption } from './components/dropdown/dropdown';
+import { HeaderMenu } from './ui/header-menu/header-menu';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, Switch, Dropdown],
+  imports: [RouterOutlet, Switch, Dropdown, HeaderMenu],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })

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

@@ -1 +1,11 @@
-<p>header-menu works!</p>
+<div class="menu-left">
+  <div class="brand">
+    <img src="/logo_inverted.svg" alt="logo"/>
+    <span>ADOFAI Editor Forum</span>
+  </div>
+
+  <span>Levels</span>
+  <span>Community</span>
+  <span>Leaderboard</span>
+  <span>About</span>
+</div>

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

@@ -5,6 +5,46 @@
   justify-content: start;
   gap: 30px;
 
-  width: 100vw;
-  border: oklch(0 0 0 / 20%) 2px solid;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: oklch(0 0 0 / 20%) 2px solid;
+
+  backdrop-filter: blur(20px);
+
+  .menu-left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    gap: 48px;
+    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 {
+        font-weight: 900;
+        line-height: 40px;
+
+        /*text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;*/
+      }
+    }
+
+    span {
+      font-size: 18px;
+      line-height: 40px;
+      vertical-align: middle;
+    }
+  }
 }