login+-

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>

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;
+    }
   }
 }

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';
+    // }
+  }
 }

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>();
+}

front/v2/src/app/global-components/logo/logo.html

@@ -1,3 +1,3 @@
-<a routerLink="/">
+<a href="/">
   <img [src]="logoSrc" alt="Logo" />
 </a>

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;
   }
 }