Skip to content

Commit f304bc7

Browse files
djredflamedjredflame
committed
feat: added a header and some styles to nav... but dont like it...
1 parent c3f8eb6 commit f304bc7

13 files changed

Lines changed: 243 additions & 16 deletions

‎frontend/angular.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,12 @@
3434
"ssr": {
3535
"entry": "src/server.ts"
3636
},
37-
"outputMode": "server"
37+
"outputMode": "server",
38+
"stylePreprocessorOptions": {
39+
"includePaths": [
40+
"src/app/shared/scss"
41+
]
42+
}
3843
},
3944
"configurations": {
4045
"production": {

‎frontend/src/app/app.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
<app-nav></app-nav> <router-outlet></router-outlet>
1+
<div class="app-container">
2+
<app-header></app-header>
3+
</div>

‎frontend/src/app/app.component.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@use 'variables' as *;
2+
3+
.app-header {
4+
grid-area: header;
5+
}
6+
7+
.app-container {
8+
display: grid;
9+
grid-template-areas:
10+
"header header header header"
11+
"nav nav nav nav"
12+
"main main main news"
13+
"main main main news"
14+
"main main main news"
15+
"main main main news"
16+
"footer footer footer footer";
17+
height: 100vh;
18+
background-color: $color-background-dark;
19+
}

‎frontend/src/app/app.component.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2-
import { RouterOutlet } from '@angular/router';
3-
import { NavComponent } from './shared/ui/nav/nav.component';
2+
import { HeaderComponent } from './shared/ui/header/header.component';
43

54
@Component({
65
standalone: true,
76
changeDetection: ChangeDetectionStrategy.OnPush,
87
selector: 'app-root',
9-
imports: [RouterOutlet, NavComponent],
8+
imports: [HeaderComponent],
109
templateUrl: './app.component.html',
1110
styleUrls: ['./app.component.scss'],
1211
})

‎frontend/src/app/shared/scss/variables.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$color-background-dark: rgb(18,18,18) !default;
2+
3+
$color-background-light: #f9f9f9 !default;
4+
$color-text: #eaeaea !default;
5+
$color-accent: #ff4a00 !default;
6+
7+
$spacing-small: 0.5rem !default;
8+
$spacing-medium: 1rem !default;
9+
$spacing-large: 2rem !default;

‎frontend/src/app/shared/ui/header/header.component.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="app-header">
2+
<img src="assets/djredflame_header.png" alt="Logo" class="logo" />
3+
</div>
4+
<app-nav></app-nav>
5+
<router-outlet></router-outlet>

‎frontend/src/app/shared/ui/header/header.component.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@use 'variables' as *;
2+
3+
.app-header {
4+
display: grid;
5+
grid-template-rows: auto auto;
6+
width: 100%;
7+
background-color: $color-background-dark;
8+
position: sticky;
9+
top: 0;
10+
z-index: 100;
11+
12+
.logo {
13+
width: 100%;
14+
height: auto;
15+
grid-row: 1;
16+
}
17+
}
18+
19+
app-nav {
20+
grid-row: 2;
21+
width: 100%;
22+
justify-self: center;
23+
}
24+
25+
@media (min-width: 768px) {
26+
.app-header {
27+
grid-template-rows: auto auto;
28+
29+
.logo {
30+
width: 100%;
31+
max-width: none;
32+
}
33+
34+
app-nav {
35+
width: auto;
36+
justify-self: end;
37+
}
38+
}
39+
}
40+
41+
@media (min-width: 1200px) {
42+
.app-header {
43+
padding: 1rem 3rem;
44+
45+
.logo {
46+
width: 100%;
47+
}
48+
}
49+
}

‎frontend/src/app/shared/ui/header/header.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NavComponent } from '../nav/nav.component';
3+
import { RouterOutlet } from '@angular/router';
4+
5+
@Component({
6+
selector: 'app-header',
7+
imports: [NavComponent, RouterOutlet],
8+
templateUrl: './header.component.html',
9+
styleUrl: './header.component.scss',
10+
changeDetection: ChangeDetectionStrategy.OnPush,
11+
})
12+
export class HeaderComponent {}

‎frontend/src/app/shared/ui/nav/nav.component.html‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
1-
<ul>
2-
<li><a routerLink="/">Home</a></li>
3-
<li><a routerLink="/about">About</a></li>
4-
<li><a routerLink="/projects">Projects</a></li>
5-
<li><a routerLink="/music">Music</a></li>
6-
<li><a routerLink="/contact">Contact</a></li>
7-
</ul>
1+
<nav class="nav" role="navigation" aria-label="Main">
2+
<button class="nav__toggle" type="button"
3+
(click)="toggleNav()" [attr.aria-expanded]="open" aria-controls="main-menu">
4+
<span class="sr-only">Menu</span>
5+
<svg class="icon flame" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="32" height="32" aria-hidden="true">
6+
<path fill="#ff4500" d="M216 0c-23 63-112 117-112 208 0 81 65 144 144 144s144-63 144-144c0-49-28-100-61-137 6 40-17 75-49 100-24 19-34 40-34 61 0 34 28 62 62 62s62-28 62-62c0-41-22-76-52-105C283 94 250 50 216 0z"/>
7+
<path fill="#ffae42" d="M272 208c0 35-29 64-64 64s-64-29-64-64c0-23 11-44 30-57 17 26 49 41 98 41z"/>
8+
</svg>
9+
</button>
10+
11+
<ul id="main-menu" class="nav__list" [class.open]="open">
12+
<li class="nav__item"><a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a></li>
13+
<li class="nav__item"><a routerLink="/about" routerLinkActive="active">About</a></li>
14+
<li class="nav__item"><a routerLink="/projects" routerLinkActive="active">Projects</a></li>
15+
<li class="nav__item"><a routerLink="/music" routerLinkActive="active">Music</a></li>
16+
<li class="nav__item"><a routerLink="/contact" routerLinkActive="active">Contact</a></li>
17+
</ul>
18+
</nav>

‎frontend/src/app/shared/ui/nav/nav.component.scss‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@use 'variables' as *;
2+
3+
.sr-only {
4+
position: absolute;
5+
width: 1px;
6+
height: 1px;
7+
padding: 0;
8+
margin: -1px;
9+
overflow: hidden;
10+
clip: rect(0, 0, 0, 0);
11+
white-space: nowrap;
12+
border: 0;
13+
}
14+
15+
.nav {
16+
width: 100%;
17+
background: transparent;
18+
display: grid;
19+
grid-template-columns: auto 1fr;
20+
align-items: center;
21+
}
22+
23+
.nav__toggle {
24+
appearance: none;
25+
background: transparent;
26+
border: 0;
27+
padding: $spacing-small;
28+
margin: 0;
29+
cursor: pointer;
30+
line-height: 0;
31+
color: $color-text;
32+
justify-self: start;
33+
}
34+
35+
.nav__toggle .flame {
36+
transition: transform 0.3s ease, color 0.3s ease;
37+
color: $color-text;
38+
}
39+
40+
.nav__toggle[aria-expanded="true"] .flame {
41+
transform: scale(1.3) rotate(-10deg);
42+
color: $color-accent; // orange/rot beim aktiven Zustand
43+
}
44+
45+
.nav__list {
46+
list-style: none;
47+
padding: 0;
48+
margin: 0;
49+
grid-column: 1 / -1;
50+
51+
max-height: 0;
52+
overflow: hidden;
53+
transition: max-height 250ms ease;
54+
background: $color-background-dark;
55+
border-top: 1px solid rgba(255,255,255,0.08);
56+
}
57+
58+
.nav__list.open {
59+
max-height: 320px;
60+
}
61+
62+
.nav__item a {
63+
display: block;
64+
padding: $spacing-medium $spacing-large;
65+
color: $color-text;
66+
text-decoration: none;
67+
}
68+
69+
.nav__item a:hover,
70+
.nav__item a:focus {
71+
background: rgba(255,255,255,0.06);
72+
}
73+
74+
.nav__item a.active {
75+
color: $color-accent;
76+
}
77+
78+
@media (min-width: 768px) {
79+
.nav {
80+
grid-template-columns: 1fr;
81+
}
82+
83+
.nav__toggle {
84+
display: none;
85+
}
86+
87+
.nav__list {
88+
display: flex;
89+
gap: $spacing-large;
90+
max-height: none;
91+
overflow: visible;
92+
background: transparent;
93+
border-top: 0;
94+
justify-content: flex-end;
95+
}
96+
97+
.nav__item a {
98+
padding: $spacing-small 0;
99+
}
100+
}

0 commit comments

Comments
 (0)