From 39aa0b7c2014c6826b03747a2ea436e2cc826a5a Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Wed, 24 Nov 2021 15:56:12 +0530
Subject: [PATCH] logout button when hovered profile name

---
 src/app/tabs/tabs.component.html | 15 +++++++++++----
 src/app/tabs/tabs.component.scss |  5 +++++
 src/app/tabs/tabs.component.ts   |  1 +
 src/assets/icons/logout.svg      |  1 +
 4 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/icons/logout.svg

diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html
index 0d2742e..b4d3a2c 100644
--- a/src/app/tabs/tabs.component.html
+++ b/src/app/tabs/tabs.component.html
@@ -21,10 +21,17 @@
         <span class="badge"> 9+ </span>
     </button>
 
-    <section class="profile-actions">
-        <img src="assets/icons/user.svg" alt="user icon">
-        <span> Hi, Joe Ghatto </span>
-        <img src="assets/icons/chevron-down.svg" alt="chevron down image">
+    <section class="profile-actions" (mouseover)="showLogout=true" (mouseout)="showLogout=false">
+        <ng-container *ngIf="!showLogout">
+            <img src="assets/icons/user.svg" alt="user icon">
+            <span> Hi, Joe Ghatto </span>
+            <img src="assets/icons/chevron-down.svg" alt="chevron down image">
+        </ng-container>
+        <ng-container *ngIf="showLogout">
+            <img src="assets/icons/logout.svg" class="logout-icon" alt="logout icon">
+            <span> Log me out </span>
+            <img src="assets/icons/chevron-down.svg" alt="chevron down image">
+        </ng-container>
     </section>
 
 </section>
diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss
index a362561..d9cff9a 100644
--- a/src/app/tabs/tabs.component.scss
+++ b/src/app/tabs/tabs.component.scss
@@ -161,6 +161,7 @@ $header-height: 10rem;
         position: relative;
         overflow: hidden;
         width: 20rem;
+        cursor: pointer;
 
         @media print {
             display: none;
@@ -184,6 +185,10 @@ $header-height: 10rem;
 
         img {
             width: 1.5rem;
+
+            &.logout-icon {
+                transform: scale(1.5);
+            }
         }
 
         span {
diff --git a/src/app/tabs/tabs.component.ts b/src/app/tabs/tabs.component.ts
index 1023d65..667e33f 100644
--- a/src/app/tabs/tabs.component.ts
+++ b/src/app/tabs/tabs.component.ts
@@ -7,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TabsComponent implements OnInit {
     showNotifications: boolean = false;
+    showLogout: boolean = false;
 
     constructor() {
     }
diff --git a/src/assets/icons/logout.svg b/src/assets/icons/logout.svg
new file mode 100644
index 0000000..2b1ea52
--- /dev/null
+++ b/src/assets/icons/logout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-o</title><path d="M304,336v40a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V136a40,40,0,0,1,40-40H256c22.09,0,48,17.91,48,40v40" style="fill:none;stroke:#6d654e;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="368 336 448 256 368 176" style="fill:none;stroke:#6d654e;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="176" y1="256" x2="432" y2="256" style="fill:none;stroke:#6d654e;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
\ No newline at end of file