From 0cc8bddfa1f28b1068a471ce0374d5d7592cc6cd Mon Sep 17 00:00:00 2001
From: Manuel <mjmorales.mcv@gmail.com>
Date: Sat, 9 Aug 2025 03:56:42 +0200
Subject: [PATCH] login+-

---
 .../app/global-components/header/header.html  | 33 +++++++++++--------
 .../app/global-components/header/header.scss  | 26 +++++++++++----
 .../app/global-components/header/header.ts    | 10 ++++++
 .../login-link/login-link.ts                  |  6 ++--
 .../src/app/global-components/logo/logo.html  |  2 +-
 .../src/app/global-components/logo/logo.scss  | 12 +++++--
 6 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/front/v2/src/app/global-components/header/header.html b/front/v2/src/app/global-components/header/header.html
index a9bf241..9c476fc 100644
--- a/front/v2/src/app/global-components/header/header.html
+++ b/front/v2/src/app/global-components/header/header.html
@@ -1,17 +1,24 @@
 <header>
   <logo></logo>
-  <events-link></events-link>
-  <tags-link></tags-link>
-  <services-link></services-link>
-  @if (user.isLoggedIn) {
-  <user-galleries-link></user-galleries-link>
-  } @if (user.isContentManager) {
-  <content-manager-panel-link></content-manager-panel-link>
-  } @if (user.isAdmin) {
-  <admin-panel-link></admin-panel-link>
-  } @if (user.isLoggedIn) {
-  <user-profile-link></user-profile-link>
-  } @else {
-  <login-link></login-link>
+  @if(!hideButtons) {
+  <div class="header-links" id="header-buttons">
+    <events-link></events-link>
+    <tags-link></tags-link>
+    <services-link></services-link>
+    @if (user.isLoggedIn) {
+    <user-galleries-link></user-galleries-link>
+    } @if (user.isContentManager) {
+    <content-manager-panel-link></content-manager-panel-link>
+    } @if (user.isAdmin) {
+    <admin-panel-link></admin-panel-link>
+    }
+    <div class="user-profile">
+      @if (user.isLoggedIn) {
+      <user-profile-link></user-profile-link>
+      } @else {
+      <login-link (click)="login($event)"></login-link>
+      }
+    </div>
+  </div>
   }
 </header>
diff --git a/front/v2/src/app/global-components/header/header.scss b/front/v2/src/app/global-components/header/header.scss
index 7fe891d..17c7c53 100644
--- a/front/v2/src/app/global-components/header/header.scss
+++ b/front/v2/src/app/global-components/header/header.scss
@@ -3,23 +3,35 @@ header {
   top: 0;
   z-index: 1000;
   background: transparent;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 7%;
+  padding-left: 2rem;
+  max-width: 100%;
+  height: 10%;
   display: flex;
   flex-direction: row;
-  align-items: baseline;
+  align-items: center;
   align-content: center;
-  justify-content: space-evenly;
   gap: 0;
 
   logo {
-    width: 10%;
+    width: 30%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     order: 0;
+    flex-grow: 1;
+  }
+  .header-links {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    gap: 1rem;
+    margin: 0;
+    padding: 0;
+    flex-grow: 1;
+    .user-profile {
+      order: 9999;
+    }
   }
 }
diff --git a/front/v2/src/app/global-components/header/header.ts b/front/v2/src/app/global-components/header/header.ts
index 8f256ba..a423251 100644
--- a/front/v2/src/app/global-components/header/header.ts
+++ b/front/v2/src/app/global-components/header/header.ts
@@ -42,4 +42,14 @@ export class Header implements OnInit {
   get user() {
     return this.currentUser;
   }
+
+  hideButtons = false;
+  login(event: Event) {
+    event.preventDefault();
+    this.hideButtons = true;
+    // const headerButtons = document.getElementById('header-buttons');
+    // if (headerButtons) {
+    //   headerButtons.style.display = 'none';
+    // }
+  }
 }
diff --git a/front/v2/src/app/global-components/login-link/login-link.ts b/front/v2/src/app/global-components/login-link/login-link.ts
index 48081a9..61cebe2 100644
--- a/front/v2/src/app/global-components/login-link/login-link.ts
+++ b/front/v2/src/app/global-components/login-link/login-link.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output, output } from '@angular/core';
 import { SvgButton } from '../../../utils/svg-button/svg-button';
 
 @Component({
@@ -7,4 +7,6 @@ import { SvgButton } from '../../../utils/svg-button/svg-button';
   templateUrl: './login-link.html',
   styleUrl: './login-link.scss',
 })
-export class LoginLink {}
+export class LoginLink {
+  @Output() login = new EventEmitter<void>();
+}
diff --git a/front/v2/src/app/global-components/logo/logo.html b/front/v2/src/app/global-components/logo/logo.html
index e308ff9..ec7e4fb 100644
--- a/front/v2/src/app/global-components/logo/logo.html
+++ b/front/v2/src/app/global-components/logo/logo.html
@@ -1,3 +1,3 @@
-<a routerLink="/">
+<a href="/">
   <img [src]="logoSrc" alt="Logo" />
 </a>
diff --git a/front/v2/src/app/global-components/logo/logo.scss b/front/v2/src/app/global-components/logo/logo.scss
index 238353f..41a6bda 100644
--- a/front/v2/src/app/global-components/logo/logo.scss
+++ b/front/v2/src/app/global-components/logo/logo.scss
@@ -1,6 +1,14 @@
 a {
+  max-width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
   img {
-    width: 100%;
-    height: auto;
+    width: auto;
+    max-width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    object-fit: scale-down;
   }
 }