ADOFAIEditorForum/ComponentTest
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement Header Menu Left

Browse Source
This commit is contained in:
copecone committed 2026-03-16 15:00:40 +09:00
1 parent 304896205e
commit c65ec39dcd
6 files changed
+115 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/logo.svg
+29
View File
@@ -0,0 +1,29 @@
<svg width="59.52" height="20" viewBox="0 0 59.52 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M40.0942 4.04214H58.3706V0.00211954H40.0942V4.04214Z" fill="white"/>
<path d="M20.0477 4.04214H38.3241V0.00211954H20.0477V4.04214Z" fill="white"/>
<path d="M11.8712 4.04108H18.2774V0.00106001H11.8712V4.04108Z" fill="white"/>
<path d="M46.5004 14.8049H40.0942V18.8449H46.5004V14.8049Z" fill="white"/>
<path d="M38.323 14.8049H20.0466V18.8449H38.323V14.8049Z" fill="white"/>
<path d="M18.2764 14.8039H0V18.8439H18.2764V14.8039Z" fill="white"/>
<path d="M51.8998 7.20237H40.0942V11.2424H51.8998V7.20237Z" fill="white"/>
<path d="M38.323 7.20237H20.0466V11.2424H38.323V7.20237Z" fill="white"/>
<path d="M18.2764 7.20131H6.47079V11.2413H18.2764V7.20131Z" fill="white"/>
<path d="M38.3241 14.8049V18.846L39.477 19.9989V15.9579L38.3241 14.8049Z" fill="#9E9E9E"/>
<path d="M46.5004 14.8049L46.5004 18.846L47.6533 19.9989V15.9579L46.5004 14.8049Z" fill="#9E9E9E"/>
<path d="M18.2774 14.8049V18.846L19.4304 19.9989V15.9579L18.2774 14.8049Z" fill="#9E9E9E"/>
<path d="M18.2774 7.20237V11.2434L19.4304 12.3964V8.3553L18.2774 7.20237Z" fill="#9E9E9E"/>
<path d="M18.2774 0V4.04108L19.4304 5.19401V1.15399L18.2774 0Z" fill="#9E9E9E"/>
<path d="M38.3241 0.00105974V4.04214L39.477 5.19507V1.15505L38.3241 0.00105974Z" fill="#9E9E9E"/>
<path d="M38.3241 7.20237V11.2434L39.477 12.3964V8.3553L38.3241 7.20237Z" fill="#9E9E9E"/>
<path d="M51.8998 7.20237L51.8998 11.2434L53.0527 12.3964V8.3553L51.8998 7.20237Z" fill="#9E9E9E"/>
<path d="M58.3706 0.00105974V4.04214L59.5236 5.19507V1.15505L58.3706 0.00105974Z" fill="#9E9E9E"/>
<path d="M18.2774 4.04108L18.2775 4.04002H11.8702L13.0252 5.19507H19.4304L18.2774 4.04108Z" fill="#CCCCCC"/>
<path d="M38.3241 4.04214L38.3241 4.04108H20.0466L21.2016 5.19613H38.3241V5.19507H39.477L38.3241 4.04214Z" fill="#CCCCCC"/>
<path d="M58.3706 4.04214L58.3706 4.04108H40.0942L41.2482 5.19613H58.3706V5.19507H59.5236L58.3706 4.04214Z" fill="#CCCCCC"/>
<path d="M18.2774 11.2434L18.2775 11.2424H6.47185L7.62584 12.3964H19.4304L18.2774 11.2434Z" fill="#CCCCCC"/>
<path d="M38.3241 11.2434L38.324 11.2424H20.0476L21.2027 12.3964H39.477L38.3241 11.2434Z" fill="#CCCCCC"/>
<path d="M51.8998 11.2434L51.8998 11.2424H40.0942L41.2482 12.3964H53.0527L51.8998 11.2434Z" fill="#CCCCCC"/>
<path d="M18.2774 18.846L18.2775 18.8449H0L1.15505 20H18.2775V19.9989L19.4304 19.9989L18.2774 18.846Z" fill="#CCCCCC"/>
<path d="M38.3241 18.846L38.3241 18.8449H20.0466L21.2016 20H38.3241V19.9989L39.477 19.9989L38.3241 18.846Z" fill="#CCCCCC"/>
<path d="M46.5004 18.846L46.5004 18.8449H40.0942L41.2482 20H46.5004V19.9989L47.6533 19.9989L46.5004 18.846Z" fill="#CCCCCC"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

public/logo_inverted.svg
+29
View File
@@ -0,0 +1,29 @@
<svg width="59.52" height="20" viewBox="0 0 59.52 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M40.0943 4.04214H58.3707V0.00212097H40.0943V4.04214Z" fill="black"/>
<path d="M20.0477 4.04214H38.3241V0.00212097H20.0477V4.04214Z" fill="black"/>
<path d="M11.8712 4.04108H18.2775V0.00105762H11.8712V4.04108Z" fill="black"/>
<path d="M46.5004 14.8049H40.0942V18.845H46.5004V14.8049Z" fill="black"/>
<path d="M38.3231 14.8049H20.0466V18.845H38.3231V14.8049Z" fill="black"/>
<path d="M18.2764 14.8039H0V18.8439H18.2764V14.8039Z" fill="black"/>
<path d="M51.8998 7.20237H40.0942V11.2424H51.8998V7.20237Z" fill="black"/>
<path d="M38.3231 7.20237H20.0466V11.2424H38.3231V7.20237Z" fill="black"/>
<path d="M18.2764 7.20131H6.47079V11.2413H18.2764V7.20131Z" fill="black"/>
<path d="M38.3241 14.8049V18.846L39.477 19.9989V15.9579L38.3241 14.8049Z" fill="#616161"/>
<path d="M46.5004 14.8049L46.5005 18.846L47.6534 19.9989V15.9579L46.5004 14.8049Z" fill="#616161"/>
<path d="M18.2775 14.8049V18.846L19.4304 19.9989V15.9579L18.2775 14.8049Z" fill="#616161"/>
<path d="M18.2775 7.20237V11.2434L19.4304 12.3964V8.3553L18.2775 7.20237Z" fill="#616161"/>
<path d="M18.2775 0V4.04108L19.4304 5.19401V1.15399L18.2775 0Z" fill="#616161"/>
<path d="M38.3241 0.00105963V4.04214L39.477 5.19507V1.15505L38.3241 0.00105963Z" fill="#616161"/>
<path d="M38.3241 7.20237V11.2434L39.477 12.3964V8.3553L38.3241 7.20237Z" fill="#616161"/>
<path d="M51.8998 7.20237L51.8999 11.2434L53.0528 12.3964V8.3553L51.8998 7.20237Z" fill="#616161"/>
<path d="M58.3707 0.00105963V4.04214L59.5236 5.19507V1.15505L58.3707 0.00105963Z" fill="#616161"/>
<path d="M18.2775 4.04108L18.2775 4.04002H11.8702L13.0253 5.19506H19.4304L18.2775 4.04108Z" fill="#333333"/>
<path d="M38.3241 4.04214L38.3241 4.04108H20.0466L21.2017 5.19612H38.3241V5.19506L39.477 5.19507L38.3241 4.04214Z" fill="#333333"/>
<path d="M58.3707 4.04214L58.3706 4.04108H40.0942L41.2482 5.19612H58.3706V5.19506L59.5236 5.19507L58.3707 4.04214Z" fill="#333333"/>
<path d="M18.2775 11.2434L18.2775 11.2424H6.47182L7.62581 12.3964L19.4304 12.3964L18.2775 11.2434Z" fill="#333333"/>
<path d="M38.3241 11.2434L38.3241 11.2424H20.0477L21.2027 12.3964L39.477 12.3964L38.3241 11.2434Z" fill="#333333"/>
<path d="M51.8999 11.2434L51.8998 11.2424H40.0942L41.2482 12.3964L53.0528 12.3964L51.8999 11.2434Z" fill="#333333"/>
<path d="M18.2775 18.846L18.2775 18.8449H0L1.15505 20H18.2775V19.9989L19.4304 19.9989L18.2775 18.846Z" fill="#333333"/>
<path d="M38.3241 18.846L38.3241 18.8449L20.0466 18.845L21.2017 20H38.3241V19.9989L39.477 19.9989L38.3241 18.846Z" fill="#333333"/>
<path d="M46.5005 18.846L46.5004 18.845H40.0942L41.2482 20H46.5005V19.9989L47.6534 19.9989L46.5005 18.846Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

src/app/app.html
+2
View File
@@ -1,3 +1,5 @@
<header-menu></header-menu>
<div class="container">
<h1>AEF Component Test</h1>
src/app/app.ts
+2 -1
View File
@@ -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
+11 -1
View File
@@ -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
+42 -2
View File
@@ -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;
}
}
}