From 5e861ee34c26d6a9bba38e132044fe44398b3178 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 12 Feb 2025 11:26:48 +0100 Subject: [PATCH] feat: add navbar component to the application --- frontend/src/app/app.component.html | 1 + frontend/src/app/app.component.ts | 4 +- .../components/navbar/navbar.component.html | 42 +++++++++++ .../components/navbar/navbar.component.scss | 34 +++++++++ .../components/navbar/navbar.component.ts | 18 +++++ frontend/src/styles.css | 71 ++++++++++++++++++- frontend/tailwind.config.js | 28 ++++++++ 7 files changed, 195 insertions(+), 3 deletions(-) create mode 100644 frontend/src/app/shared/components/navbar/navbar.component.html create mode 100644 frontend/src/app/shared/components/navbar/navbar.component.scss create mode 100644 frontend/src/app/shared/components/navbar/navbar.component.ts diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 0680b43..6659729 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1 +1,2 @@ + diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 7acf29a..6b8cdf7 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -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', diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html new file mode 100644 index 0000000..cd772bd --- /dev/null +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -0,0 +1,42 @@ + \ No newline at end of file diff --git a/frontend/src/app/shared/components/navbar/navbar.component.scss b/frontend/src/app/shared/components/navbar/navbar.component.scss new file mode 100644 index 0000000..1f11eda --- /dev/null +++ b/frontend/src/app/shared/components/navbar/navbar.component.scss @@ -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; +} \ No newline at end of file diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts new file mode 100644 index 0000000..e4eb7c2 --- /dev/null +++ b/frontend/src/app/shared/components/navbar/navbar.component.ts @@ -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; + } +} \ No newline at end of file diff --git a/frontend/src/styles.css b/frontend/src/styles.css index d4b5078..c69e30e 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -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; +} + \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 843fec3..87e76e4 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -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',