Lobo
2ab1d2dd85
Add active state support to topbar links (routerLinkActive) and CSS underline/hover styling; expose icons for algorithm categories and render them in the algorithms list. Update AlgorithmCategory interface and AlgorithmsService to include icon names, import MatIconModule where needed, and adjust algorithms template to show icon, title and description layout. Global style tweaks: dark theme background, canvas shadows, card hover/gradient accents, and new styles for algorithm cards and page title for improved visual polish.
78 lines
3.1 KiB
HTML
78 lines
3.1 KiB
HTML
<mat-toolbar class="topbar" color="primary" (keydown)="onKeydown($event)">
|
|
<a class="brand" routerLink="/">
|
|
<img class="logo-dot" src="{{AssetsConstants.LOGO}}" alt="" aria-hidden="true" draggable="false"
|
|
oncontextmenu="return false;">
|
|
<span class="brand-text">{{ 'APP.TITLE' | translate }}</span>
|
|
</a>
|
|
|
|
<nav class="nav">
|
|
<a [routerLink]="RouterConstants.ABOUT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
|
|
<a [routerLink]="RouterConstants.PROJECTS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
|
|
<a [routerLink]="RouterConstants.ALGORITHMS.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.ALGORITHMS' | translate }}</a>
|
|
<a [routerLink]="RouterConstants.IMPRINT.LINK" routerLinkActive="active" mat-button>{{ 'TOPBAR.IMPRINT' | translate }}</a>
|
|
</nav>
|
|
|
|
<!-- Mobile nav menu button -->
|
|
<button mat-icon-button class="nav-menu-btn" [matMenuTriggerFor]="navMenu" aria-label="Open navigation">
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
|
|
<span class="spacer"></span>
|
|
|
|
<!-- Mobile nav menu -->
|
|
<mat-menu #navMenu="matMenu" xPosition="before">
|
|
<button mat-menu-item [routerLink]="RouterConstants.ABOUT.LINK">
|
|
{{ 'TOPBAR.ABOUT' | translate }}
|
|
</button>
|
|
<button mat-menu-item [routerLink]="RouterConstants.PROJECTS.LINK">
|
|
{{ 'TOPBAR.PROJECTS' | translate }}
|
|
</button>
|
|
<button mat-menu-item [routerLink]="RouterConstants.ALGORITHMS.LINK">
|
|
{{ 'TOPBAR.ALGORITHMS' | translate }}
|
|
</button>
|
|
<button mat-menu-item [routerLink]="RouterConstants.IMPRINT.LINK">
|
|
{{ 'TOPBAR.IMPRINT' | translate }}
|
|
</button>
|
|
</mat-menu>
|
|
|
|
<span class="spacer"></span>
|
|
|
|
<!-- Settings: Sprache + Theme -->
|
|
<button mat-icon-button [matMenuTriggerFor]="settingsMenu" aria-label="Open settings"
|
|
matTooltip="{{ 'TOPBAR.SETTINGS' | translate }}">
|
|
<mat-icon>tune</mat-icon>
|
|
</button>
|
|
|
|
<mat-menu #settingsMenu="matMenu" xPosition="before">
|
|
<div class="menu-section">
|
|
<div class="menu-title">{{ 'TOPBAR.LANGUAGE' | translate }}</div>
|
|
<button mat-menu-item (click)="setLang('de')">
|
|
<img class="flag-icon" src="{{AssetsConstants.FLAG_DE}}" alt="" aria-hidden="true">
|
|
<span>{{ 'LANG.DE' | translate }}</span>
|
|
@if (lang.lang() === 'de')
|
|
{
|
|
<mat-icon>check</mat-icon>
|
|
}
|
|
</button>
|
|
<button mat-menu-item (click)="setLang('en')">
|
|
<img class="flag-icon" src="{{AssetsConstants.FLAG_EN}}" alt="" aria-hidden="true">
|
|
<span>{{ 'LANG.EN' | translate }}</span>
|
|
@if (lang.lang() === 'en')
|
|
{
|
|
<mat-icon>check</mat-icon>
|
|
}
|
|
</button>
|
|
</div>
|
|
<mat-divider></mat-divider>
|
|
<div class="menu-section">
|
|
<div class="menu-title">{{ 'TOPBAR.APPEARANCE' | translate }}</div>
|
|
<button mat-menu-item (click)="theme.toggle()">
|
|
<mat-icon>{{ themeIcon() }}</mat-icon>
|
|
<span>
|
|
{{ theme.theme() === 'dark' ? ('THEME.LIGHT' | translate) : ('THEME.DARK' | translate) }}
|
|
</span>
|
|
<span class="kbd">Ctrl/⌘ + J</span>
|
|
</button>
|
|
</div>
|
|
</mat-menu>
|
|
</mat-toolbar> |