infinimotion/frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamp navbar layout and styling

Browse Source 
Updated the navbar HTML structure for improved layout and visual hierarchy. Enhanced styling by removing redundant background color from CSS and adding new classes for borders, padding, and hover effects. Introduced a left arrow indicator for active and hovered navigation items.
This commit is contained in:
Piet Ostendorp
2025-11-23 00:31:18 +01:00
parent 2dd9bdf6f2
commit c2823c4c2b
2 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/navbar/navbar.component.css
View File

@@ -7,7 +7,6 @@ nav {
.navbar { .navbar {
width: 250px; width: 250px;
background-color: white;
padding: 5px; padding: 5px;
transition: color .2s; transition: color .2s;
} }

42
src/app/navbar/navbar.component.html
View File

@@ -1,27 +1,35 @@
<nav class="navbar"> <nav class="navbar bg-white-50 border-r border-gray-300">
<ul class="nav-list"> <ul class="nav-list grid grid-cols-1 p-2">
<div class="grid grid-cols-1 bg-indigo-50 rounded-md border-1 border-gray-300"> @for (item of navItems; track item.path) {
@for (item of navItems; track item.path) { <li class="relative group">
<li> <a [routerLink]="[item.path]"
<div class="grid grid-cols-1 m-1 rounded-sm"> routerLinkActive="active"
<a [routerLink]="[item.path]" [routerLinkActiveOptions]="{ exact: true }"
routerLinkActive="active" class="relative block text-2xl px-3 py-2 pl-5 gradient-text">
[routerLinkActiveOptions]="{ exact: true }"
class="text-2xl pl-3 hover:bg-gray-200 gradient-text rounded-sm"> <!-- Pfeil links -->
{{ item.label }} <span class="
</a> absolute left-2 top-1/2 -translate-y-1/2
</div> w-0 h-0 border-t-4 border-b-4 border-l-6 border-t-transparent border-b-transparent border-l-indigo-500
</li> opacity-0 transition-all duration-300
} group-hover:opacity-100
</div> group-[.active]:opacity-100
group-hover:-translate-x-1
"></span>
{{ item.label }}
</a>
</li>
}
</ul> </ul>
@if (currentUser() != null) { @if (currentUser() != null) {
<div class="mt-auto flex items-center justify-between gap-x-2 px-3 pb-3 text-gray-600"> <div class="mt-auto flex items-center justify-between gap-x-2 px-3 pb-3 text-gray-600">
<div class="flex items-center gap-x-1"> <div class="flex items-center gap-x-1">
<span>Angemeldet als:</span> <span>Angemeldet als:</span>
<span class="text-indigo-500">{{ currentUser()?.displayName }}</span> <span class="text-indigo-500">{{ currentUser()?.displayName }}</span>
</div> </div>
<button (click)="logout()" class="relative top-[1px] rounded opacity-50 hover:opacity-100 text-black"> <button (click)="logout()" class="relative top-px rounded opacity-50 hover:opacity-100 text-black">
<mat-icon style="font-size: 20px; width: 20px; height: 20px;">logout</mat-icon> <mat-icon style="font-size: 20px; width: 20px; height: 20px;">logout</mat-icon>
</button> </button>
</div> </div>