feat: add navbar component to the application

This commit is contained in:
Hop In, I Have Puppies AND WiFi 2025-02-12 11:26:48 +01:00
parent 819b8a7bc9
commit 5e861ee34c
Signed by: jleibl
GPG Key ID: E7B6F77BF5EDB6F7
7 changed files with 195 additions and 3 deletions

View File

@ -1 +1,2 @@
<app-navbar></app-navbar>
<router-outlet></router-outlet>

View File

@ -2,11 +2,11 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { KeycloakAngularModule } from 'keycloak-angular';
import { NavbarComponent } from './shared/components/navbar/navbar.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, KeycloakAngularModule],
imports: [CommonModule, RouterOutlet, KeycloakAngularModule, NavbarComponent],
providers: [],
templateUrl: './app.component.html',
styleUrl: './app.component.css',

View File

@ -0,0 +1,42 @@
<nav class="bg-[#0F212E] text-gray-300 border-b border-[#1B2C3B]">
<div class="max-w-full mx-auto px-4">
<div class="flex justify-between items-center h-14">
<div class="flex items-center space-x-6">
<a routerLink="/" class="flex items-center">
<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-[#1B2C3B] 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-[#00A76F] hover:bg-[#00C684] 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" />
</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>
</button>
</div>
</div>
<div [class]="isMenuOpen ? 'block' : 'hidden'" class="md:hidden">
<div class="p-2 pt-2 mb-4 space-y-1 bg-[#1B2C3B] rounded-b-lg">
<a routerLink="/games"
class="block px-3 py-2 rounded-md text-sm hover:bg-[#263B4D] 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-[#00A76F] hover:bg-[#00C684] text-white text-sm font-medium transition-colors duration-200">Login</button>
</div>
</div>
</div>
</div>
</nav>

View File

@ -0,0 +1,34 @@
:host {
display: block;
}
.text-gold {
color: #FFD700;
}
.bg-gold {
background-color: #FFD700;
&:hover {
background-color: #FFC000;
}
}
.hover\:bg-gold-dark:hover {
background-color: #FFC000;
}
.hover\:text-gold:hover {
color: #FFD700;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.transition-colors {
transition: all 0.2s ease-in-out;
}

View File

@ -0,0 +1,18 @@
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss'],
standalone: true,
imports: [CommonModule, RouterModule]
})
export class NavbarComponent {
isMenuOpen = false;
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
}

View File

@ -1 +1,70 @@
@import 'tailwindcss';
@import "tailwindcss";
@theme {
--color-primary-900: rgb(26, 44, 56);
--color-primary-800: #1a1a1a;
--color-primary-600: #2d2d2d;
--color-accent-blue: #3b82f6;
--color-accent-green: #22c55e;
--color-gold: #ffd700;
--color-gold-light: #ffe44d;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
}
body {
@apply bg-primary-900 text-gray-100;
}
/* Buttons */
.button {
@apply px-4 py-2 rounded font-medium transition-all duration-300;
}
/* Primary Button */
.button-primary {
@apply bg-accent-blue text-gray-100 hover:bg-blue-600 active:bg-blue-700;
}
/* Secondary Button */
.button-secondary {
@apply bg-gray-400 text-gray-100 hover:bg-gray-300 active:bg-gray-200;
}
/* Success Button */
.button-success {
@apply bg-accent-green text-primary-900 hover:opacity-90 active:opacity-80;
}
/* Disabled Button */
.button-disabled {
@apply bg-gray-200 text-gray-400 cursor-not-allowed;
}
/* Navigation */
.nav-link {
@apply text-gray-100 hover:text-gold-light transition-colors duration-300;
}
.nav-link-active {
@apply text-gold;
}
/* Cards */
.card {
@apply bg-primary-800 rounded-lg shadow-lg p-6;
}
/* Gradients */
.gradient-primary {
@apply bg-gradient-to-r from-primary-800 to-primary-600;
}
/* Button States */
.button:hover {
@apply shadow-lg;
}
.button:active {
@apply scale-95;
}
.button:focus {
@apply outline-none ring-2 ring-offset-2 ring-accent-blue;
}

View File

@ -5,6 +5,34 @@ module.exports = {
],
theme: {
extend: {
colors: {
// Core colors from the palette
'primary': {
900: '#000000', // #000000
800: '#05080a', // #05080a
700: '#071d2a', // #071d2a
600: '#0f212e', // #0f212e - dark navy
500: '#1a2c38', // #1a2c38
400: '#213743', // #213743
300: '#2f4553', // #2f4553
},
'accent': {
blue: '#1475e1', // Bright blue
green: '#00e701', // Bright green
},
'gray': {
400: '#557086', // Mid gray
300: '#b1bad3', // Light gray
200: '#d5dceb', // Lighter gray
100: '#ffffff', // White
},
// Semantic colors
'gold': {
DEFAULT: '#b1bad3',
light: '#d5dceb',
dark: '#557086',
},
},
animation: {
'fadeIn': 'fadeIn 0.3s ease-out',
'backdropBlur': 'backdropBlur 0.4s ease-out',