✨ add logout from header

Author: marcode24

src/app/core/components/header/header.component.html

@@ -3,15 +3,31 @@
     <div class="burger" (click)="changeVisibilitySidebar()">
       <i class="bx bx-menu"></i>
     </div>
-    <div class="search">
+    <div class="search" #inputSearch>
       <div class="input-group">
         <input type="text" class="icon" #txtSearch
-          placeholder="Search...">
+          placeholder="Search..." (focus)="focusInputSearch()" (blur)="focusInputSearch()">
         <i class="bx bx-search"></i>
       </div>
     </div>
-    <div class="user">
-      here's user
+    <div class="profile">
+      <div class="user">
+      <div class="user-data" (click)="changeVisibilityOptions()">
+          <div class="user-img">
+            <img [src]="userActive.image" alt="user-image">
+          </div>
+          <span class="name">{{ userActive.name }} {{ userActive.surname }}</span>
+          <div class="icon">
+            <i class="bx bx-chevron-down"></i>
+          </div>
+        </div>
+        <ul class="dropdown-user" #dropdownUser>
+          <li class="item" (click)="logout()">
+            <i class="bx bx-log-out"></i>
+            <span>Cerrar sesión</span>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </header>

src/app/core/components/header/header.component.scss

@@ -9,7 +9,7 @@ header {
   width: -webkit-fill-available;
   background: var(--bg);
   border-bottom: 2px solid #e0e0e0;
-  z-index: 90;
+  z-index: 95;
 
   @include width-medium {
     margin-left: 0;
@@ -23,13 +23,27 @@ header {
     gap: 1rem;
     padding: 0 1rem;
     height: 100%;
+    position: relative;
 
     & .search {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
+
+      @include width-medium {
+        flex: auto;
+      }
+
+      @include width-small {
+        &.focus {
+          position: absolute;
+          left: 1rem;
+          right: 1rem;
+          z-index: 100;
+        }
+      }
     }
   }
 
@@ -98,9 +112,146 @@ header {
   }
 }
 
-.user {
+.profile {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  position: relative;
+
+  & .user {
+    padding: 0.35rem 0.5rem;
+    border-radius: 1rem;
+    transition: 0.3s ease-in-out;
+
+    &:hover {
+      background: var(--bg-hover-3);
+      cursor: pointer;
+    }
+
+    & .user-data {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 0.5rem;
+
+      & .user-img {
+        width: 38px;
+        height: 38px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+
+        & img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      & .name {
+        @include fs-6;
+        @include fw-500;
+        color: var(--fc-primary);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        @include width-small {
+          display: none;
+        }
+      }
+
+      & .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--fc-primary);
+        transition: 0.5s;
+        border-radius: 50%;
+        width: 35px;
+        height: 35px;
+
+        @include width-small {
+          display: none;
+        }
+
+        & i {
+          @include fs-1;
+        }
+      }
+    }
+  }
+}
+
+.dropdown-user {
+  display: none;
+  z-index: 2;
+  list-style-type: none;
+  position: absolute;
+  opacity: 0;
+  top: 55px;
+  right: 0;
+  background-color: #f7f7f7;
+  padding: 0;
+  font-size: 16px;
+  border-radius: 10px;
+  box-shadow: none;
+  visibility: hidden;
+  height: fit-content;
+  transition: visibility 0.2s, opacity 0.2s linear, bottom 0.2s linear,
+  box-shadow 0.2s linear;
+  min-width: 14rem;
+
+  &.active {
+    opacity: 1;
+    bottom: 0;
+    display: block;
+    visibility: visible;
+    box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.25);
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    height: 45px;
+    transition: 0.3s ease;
+    padding: 0 1rem;
+    gap: 1rem;
+
+    &:hover {
+      background: var(--bg-hover-3);
+      cursor: pointer;
+    }
+
+    &:first-child {
+      border-radius: 10px 10px 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 10px 10px;
+    }
+
+    &:first-of-type {
+      border-radius: 10px;
+    }
+
+    & span {
+      @include fs-5;
+      @include fw-400;
+      color: var(--fc-primary);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    & i {
+      @include fs-4;
+      @include fw-500;
+      color: var(--fc-primary);
+    }
+  }
 }

src/app/core/components/header/header.component.ts

@@ -1,15 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+
+import { AuthService } from '@services/auth.service';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent {
+  @ViewChild('dropdownUser') dropdownUser: ElementRef;
+  @ViewChild('inputSearch') inputSearch: ElementRef;
+  userActive = this.authService.userActive;
+
+  constructor(
+    private authService: AuthService
+  ) { }
+
   changeVisibilitySidebar(): void {
     const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
     sidebarElement.classList.toggle('closed');
     const overlayElement = document.querySelector('.overlay') as HTMLElement;
     overlayElement.classList.toggle('opened');
   }
+
+  changeVisibilityOptions(): void {
+    this.dropdownUser.nativeElement.classList.toggle('active');
+  }
+
+  logout(): void {
+    this.authService.logout();
+  }
+
+  focusInputSearch(): void {
+    this.inputSearch.nativeElement.classList.toggle('focus');
+  }
 }

src/app/core/services/auth.service.ts

@@ -60,4 +60,9 @@ export class AuthService {
         return true;
     }), catchError(() => of(false)));
   }
+
+  logout(): void {
+    Storage.removeLocalStorage('token');
+    this.router.navigateByUrl('/login');
+  }
 }

src/styles.scss

@@ -301,6 +301,7 @@ input {
     & a {
       color: var(--fc-purple);
       text-decoration: none;
+      @include fw-500;
 
       &:hover {
         cursor: pointer;