nico/byhaider-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): new navigation bar design

Browse Source
This commit is contained in:
nico.hdr8
2025-10-06 11:07:31 +02:00
parent bcf4201092
commit f25e61be55
3 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/core/components/navigation-bar/navigation-bar.html
View File

@@ -5,18 +5,16 @@
</span> </span>
</div> </div>
<div class="navigation grid place-items-center"> <div class="navigation grid place-items-center">
<p-card class="px-4! py-3!"> <ul>
<ul> <li class="relative list-none flex flex-row gap-3">
<li class="relative list-none flex flex-row gap-3"> <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"> {{ 'common.home' | translate }}
{{ 'common.home' | translate }} </a>
</a> <a routerLink="/about" routerLinkActive="active">
<a routerLink="/about" routerLinkActive="active"> {{ 'common.about' | translate }}
{{ 'common.about' | translate }} </a>
</a> </li>
</li> </ul>
</ul>
</p-card>
</div> </div>
<div class="options flex flex-row gap-[10px] items-center"> <div class="options flex flex-row gap-[10px] items-center">
@if (themeSwitchService.darkMode()) { @if (themeSwitchService.darkMode()) {

24
src/app/core/components/navigation-bar/navigation-bar.scss
View File

@@ -1,4 +1,6 @@
nav { nav {
background-color: rgb(from var(--content-background) r g b / 0.5);
.options > div { .options > div {
display: grid; display: grid;
place-items: center; place-items: center;
@@ -18,30 +20,20 @@ nav {
.navigation ul li a { .navigation ul li a {
display: block; display: block;
padding: 5px 10px; padding: 7.5px 15px;
position: relative; position: relative;
color: color-mix(in srgb, var(--content-color) 80%, transparent);
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
letter-spacing: 2px; letter-spacing: 2px;
text-transform: uppercase; text-transform: uppercase;
border-radius: var(--content-border-radius);
border: 1px solid transparent;
font-size: 0.8rem;
&.active { &.active {
color: var(--primary-500); color: var(--primary-500);
background-color: rgb(from var(--primary-500) r g b / 0.05);
position: relative; position: relative;
top: -3px; border: 1px solid var(--primary-500);
&::after {
content: "";
position: absolute;
left: calc(50% - 1px);
transform: translate(-50%);
width: 50%;
height: .1px;
background: var(--primary-500);
border-radius: 50%;
bottom: 2px;
box-shadow: 0 -3px 10px 1px var(--primary-500);
}
} }
} }
} }

3
src/app/core/components/navigation-bar/navigation-bar.ts
View File

@@ -4,12 +4,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faMoon } from '@fortawesome/free-solid-svg-icons'; import { faMoon } from '@fortawesome/free-solid-svg-icons';
import { faSun } from '@fortawesome/free-solid-svg-icons'; import { faSun } from '@fortawesome/free-solid-svg-icons';
import { ThemeSwitchService } from '../../service/theme-switch.service'; import { ThemeSwitchService } from '../../service/theme-switch.service';
import { Card } from 'primeng/card';
import { TranslatePipe, TranslateService } from '@ngx-translate/core'; import { TranslatePipe, TranslateService } from '@ngx-translate/core';
@Component({ @Component({
selector: 'app-navigation-bar', selector: 'app-navigation-bar',
imports: [FontAwesomeModule, RouterLink, RouterLinkActive, Card, TranslatePipe], imports: [FontAwesomeModule, RouterLink, RouterLinkActive, TranslatePipe],
templateUrl: './navigation-bar.html', templateUrl: './navigation-bar.html',
styleUrl: './navigation-bar.scss' styleUrl: './navigation-bar.scss'
}) })