Merge pull request 'feat: add navbar component to the application (CAS-32)' (!18) from task/navbar into task/landing-page
Reviewed-on: #18 Reviewed-by: Huy <ptran@noreply@simonis.lol>
This commit is contained in:
commit
76f6275587
@ -1 +1,2 @@
|
||||
<app-navbar></app-navbar>
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -0,0 +1,42 @@
|
||||
<nav class="bg-deep-blue text-gray-300 border-b border-deep-blue-contrast">
|
||||
<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-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>
|
||||
</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-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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,17 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-navbar',
|
||||
templateUrl: './navbar.component.html',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterModule]
|
||||
})
|
||||
export class NavbarComponent {
|
||||
isMenuOpen = false;
|
||||
|
||||
toggleMenu() {
|
||||
this.isMenuOpen = !this.isMenuOpen;
|
||||
}
|
||||
}
|
||||
@ -1 +1,12 @@
|
||||
@import 'tailwindcss';
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-deep-blue: #0F212E;
|
||||
--color-deep-blue-light: #1A2C38;
|
||||
--color-deep-blue-contrast: #1B2C3B;
|
||||
--color-light-blue: #1475E1;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-deep-blue text-gray-100;
|
||||
}
|
||||
@ -1,218 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{html,ts}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
animation: {
|
||||
'fadeIn': 'fadeIn 0.3s ease-out',
|
||||
'backdropBlur': 'backdropBlur 0.4s ease-out',
|
||||
'modalSlideIn': 'modalSlideIn 0.5s cubic-bezier(0.16,1,0.3,1)',
|
||||
'slideDown': 'slideDown 0.6s ease-out',
|
||||
'slideUp': 'slideUp 0.6s ease-out',
|
||||
'scaleIn': 'scaleIn 0.8s cubic-bezier(0.16,1,0.3,1)',
|
||||
'spinAndBounce': 'spinAndBounce 3s ease-in-out infinite',
|
||||
'glow': 'glow 4s ease-in-out infinite',
|
||||
'marquee': 'marquee 30s linear infinite',
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'tiltAndGlow': 'tiltAndGlow 3s ease-in-out infinite',
|
||||
'shimmer': 'shimmer 2s linear infinite',
|
||||
'morphBackground': 'morphBackground 10s ease-in-out infinite',
|
||||
'elasticScale': 'elasticScale 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
'bounceAndFade': 'bounceAndFade 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
'rotateAndScale': 'rotateAndScale 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
'pulseGlow': 'pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'from': { opacity: '0' },
|
||||
'to': { opacity: '1' }
|
||||
},
|
||||
backdropBlur: {
|
||||
'from': {
|
||||
'backdrop-filter': 'blur(0px)',
|
||||
'background-color': 'rgba(0,0,0,0)'
|
||||
},
|
||||
'to': {
|
||||
'backdrop-filter': 'blur(16px)',
|
||||
'background-color': 'rgba(0,0,0,0.95)'
|
||||
}
|
||||
},
|
||||
modalSlideIn: {
|
||||
'from': {
|
||||
opacity: '0',
|
||||
transform: 'scale(0.95) translateY(10px)'
|
||||
},
|
||||
'to': {
|
||||
opacity: '1',
|
||||
transform: 'scale(1) translateY(0)'
|
||||
}
|
||||
},
|
||||
slideDown: {
|
||||
'from': {
|
||||
opacity: '0',
|
||||
transform: 'translateY(-20px)'
|
||||
},
|
||||
'to': {
|
||||
opacity: '1',
|
||||
transform: 'translateY(0)'
|
||||
}
|
||||
},
|
||||
slideUp: {
|
||||
'from': {
|
||||
opacity: '0',
|
||||
transform: 'translateY(20px)'
|
||||
},
|
||||
'to': {
|
||||
opacity: '1',
|
||||
transform: 'translateY(0)'
|
||||
}
|
||||
},
|
||||
scaleIn: {
|
||||
'from': {
|
||||
opacity: '0',
|
||||
transform: 'scale(0.9)'
|
||||
},
|
||||
'to': {
|
||||
opacity: '1',
|
||||
transform: 'scale(1)'
|
||||
}
|
||||
},
|
||||
spinAndBounce: {
|
||||
'0%': {
|
||||
transform: 'scale(1) rotate(0deg)'
|
||||
},
|
||||
'50%': {
|
||||
transform: 'scale(1.2) rotate(180deg)'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1) rotate(360deg)'
|
||||
}
|
||||
},
|
||||
glow: {
|
||||
'0%, 100%': {
|
||||
opacity: '0.3',
|
||||
transform: 'scale(1)'
|
||||
},
|
||||
'50%': {
|
||||
opacity: '0.5',
|
||||
transform: 'scale(1.05)'
|
||||
}
|
||||
},
|
||||
marquee: {
|
||||
'0%': { transform: 'translateX(0)' },
|
||||
'100%': { transform: 'translateX(-100%)' }
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-20px)' }
|
||||
},
|
||||
tiltAndGlow: {
|
||||
'0%, 100%': {
|
||||
transform: 'perspective(1000px) rotateX(0deg) rotateY(0deg)',
|
||||
'box-shadow': '0 0 20px rgba(34,197,94,0.2)'
|
||||
},
|
||||
'50%': {
|
||||
transform: 'perspective(1000px) rotateX(2deg) rotateY(5deg)',
|
||||
'box-shadow': '0 0 40px rgba(34,197,94,0.4)'
|
||||
}
|
||||
},
|
||||
shimmer: {
|
||||
'0%': {
|
||||
'background-position': '-1000px 0'
|
||||
},
|
||||
'100%': {
|
||||
'background-position': '1000px 0'
|
||||
}
|
||||
},
|
||||
morphBackground: {
|
||||
'0%, 100%': {
|
||||
'border-radius': '60% 40% 30% 70%/60% 30% 70% 40%'
|
||||
},
|
||||
'50%': {
|
||||
'border-radius': '30% 60% 70% 40%/50% 60% 30% 60%'
|
||||
}
|
||||
},
|
||||
elasticScale: {
|
||||
'0%': {
|
||||
transform: 'scale(0)'
|
||||
},
|
||||
'60%': {
|
||||
transform: 'scale(1.1)'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)'
|
||||
}
|
||||
},
|
||||
bounceAndFade: {
|
||||
'0%': {
|
||||
transform: 'scale(0.3)',
|
||||
opacity: '0'
|
||||
},
|
||||
'50%': {
|
||||
transform: 'scale(1.05)',
|
||||
opacity: '0.8'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)',
|
||||
opacity: '1'
|
||||
}
|
||||
},
|
||||
rotateAndScale: {
|
||||
'0%': {
|
||||
transform: 'rotate(-180deg) scale(0)'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'rotate(0) scale(1)'
|
||||
}
|
||||
},
|
||||
pulseGlow: {
|
||||
'0%, 100%': {
|
||||
opacity: '1',
|
||||
transform: 'scale(1)',
|
||||
filter: 'brightness(1)'
|
||||
},
|
||||
'50%': {
|
||||
opacity: '0.8',
|
||||
transform: 'scale(1.05)',
|
||||
filter: 'brightness(1.2)'
|
||||
}
|
||||
}
|
||||
},
|
||||
transitionDelay: {
|
||||
'100': '100ms',
|
||||
'200': '200ms',
|
||||
'300': '300ms',
|
||||
'400': '400ms',
|
||||
'500': '500ms',
|
||||
},
|
||||
transitionTimingFunction: {
|
||||
'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'elastic': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
'spring': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
|
||||
},
|
||||
backdropBlur: {
|
||||
'xs': '2px',
|
||||
'4xl': '72px',
|
||||
'5xl': '96px',
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
'shimmer': 'linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent)',
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('tailwindcss-animated'),
|
||||
require('tailwindcss-gradients'),
|
||||
require('tailwindcss-transforms'),
|
||||
require('tailwindcss-filters'),
|
||||
require('tailwind-scrollbar-hide'),
|
||||
],
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user