SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 65 Wiki Activity Actions

feat: add footer component and FontAwesome integration

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-02-12 12:26:48 +01:00
parent 29305a75b1
commit 325bc118ee
No known key found for this signature in database
GPG key ID: E7B6F77BF5EDB6F7
10 changed files with 219 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

61
frontend/src/app/shared/components/navbar/navbar.component.html
View file

@ -6,23 +6,54 @@
<span class="text-white text-xl font-semibold">Trustworthy Casino</span>
</a>
<div class="hidden md:flex items-center space-x-1">
<a routerLink="/games"
class="px-3 py-2 rounded-md text-sm hover:bg-deep-blue-contrast transition-colors duration-200">Games</a>
<a
routerLink="/games"
class="px-3 py-2 rounded-md text-sm hover:bg-deep-blue-contrast transition-colors duration-200"
>Games</a
>
</div>
</div>
<div class="hidden md:flex items-center space-x-4">
<button
class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200">Login</button>
class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Login
</button>
</div>
<div class="md:hidden">
<button (click)="toggleMenu()" class="text-gray-300 hover:text-white transition-colors duration-200">
<svg class="h-6 w-6" [class.hidden]="isMenuOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<button
(click)="toggleMenu()"
class="text-gray-300 hover:text-white transition-colors duration-200"
>
<svg
class="h-6 w-6"
[class.hidden]="isMenuOpen"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<svg class="h-6 w-6" [class.hidden]="!isMenuOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
<svg
class="h-6 w-6"
[class.hidden]="!isMenuOpen"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
@ -30,13 +61,19 @@
<div [class]="isMenuOpen ? 'block' : 'hidden'" class="md:hidden">
<div class="p-2 pt-2 mb-4 space-y-1 bg-deep-blue-contrast rounded-b-lg">
<a routerLink="/games"
class="block px-3 py-2 rounded-md text-sm hover:bg-deep-blue-light transition-colors duration-200">Games</a>
<a
routerLink="/games"
class="block px-3 py-2 rounded-md text-sm hover:bg-deep-blue-light transition-colors duration-200"
>Games</a
>
<div class="pt-2 space-y-2">
<button
class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200">Login</button>
class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
>
Login
</button>
</div>
</div>
</div>
</div>
</nav>
</nav>

4
frontend/src/app/shared/components/navbar/navbar.component.ts
View file

@ -6,7 +6,7 @@ import { CommonModule } from '@angular/common';
selector: 'app-navbar',
templateUrl: './navbar.component.html',
standalone: true,
imports: [CommonModule, RouterModule]
imports: [CommonModule, RouterModule],
})
export class NavbarComponent {
isMenuOpen = false;
@ -14,4 +14,4 @@ export class NavbarComponent {
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
}
}