logout button when hovered profile name

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>

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 {

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() {
     }

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>