diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..4b38d36 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/logo_inverted.svg b/public/logo_inverted.svg new file mode 100644 index 0000000..d83ecca --- /dev/null +++ b/public/logo_inverted.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/app.html b/src/app/app.html index 15c28d9..3cce3e0 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,3 +1,5 @@ + +

AEF Component Test

diff --git a/src/app/app.ts b/src/app/app.ts index 59459ec..61bc9ab 100644 --- a/src/app/app.ts +++ b/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' }) diff --git a/src/app/ui/header-menu/header-menu.html b/src/app/ui/header-menu/header-menu.html index fec32b5..f59225d 100644 --- a/src/app/ui/header-menu/header-menu.html +++ b/src/app/ui/header-menu/header-menu.html @@ -1 +1,11 @@ -

header-menu works!

+
+
+ logo + ADOFAI Editor Forum +
+ + Levels + Community + Leaderboard + About +
diff --git a/src/app/ui/header-menu/header-menu.scss b/src/app/ui/header-menu/header-menu.scss index b591f1e..2bc76ca 100644 --- a/src/app/ui/header-menu/header-menu.scss +++ b/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; + } + } }