pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add dropdown logout

Browse source
This commit is contained in:
Kenta420-Poom 2023-09-20 12:53:32 +07:00
parent 1ff1e6a90c
commit cc3e146cc2
2 changed files with 35 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

122
client/src/app/core/layout/header.component.html
View file

@ -22,104 +22,38 @@
{{ user.username }}
</span>
</div>
<img
class="h-16 rounded-full"
src="{{ user.image }}"
loading="lazy"
alt="profile picture"
/>
<div class="relative">
<img
class="h-16 rounded-full cursor-pointer"
src="{{ user.image }}"
loading="lazy"
alt="profile picture"
(click)="toggleDropdown()"
[class.open]="isMenuOpen"
/>
<!-- Dropdown Items -->
<div
class="absolute right-0 w-40 mt-2 py-2 bg-white rounded-md shadow-xl z-20"
*ngIf="isMenuOpen"
>
<ul>
<li>
<!-- logout button -->
<button
class="flex items-center w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900"
(click)="logout()"
>
Logout
</button>
</li>
</ul>
</div>
</div>
</div>
<ng-template #login_button>
<app-google-button></app-google-button>
</ng-template>
<div
class="relative inline-block text-left text-gray-800"
(click)="closeMenu()"
>
<div>
<span class="rounded-md shadow-sm">
<button
(click)="isMenuOpen = !isMenuOpen"
type="button"
class="inline-flex items-center justify-between w-full rounded-md border border-gray-300 h-10 px-4 py-4 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-800 transition ease-in-out duration-150 btn-focus"
id="options-menu"
[attr.aria-haspopup]="isMenuOpen"
[attr.aria-expanded]="isMenuOpen"
>
<span> {{ label }} </span>
<img
src="https://s.svgbox.net/hero-solid.svg?ic=chevron-down&fill=grey-800"
class="-mr-1 ml-2 h-5 w-5"
/>
</button>
</span>
</div>
<ng-container *ngIf="isMenuOpen">
<div
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg text-sm overflow-hidden border z-20"
>
<div
class="rounded-md bg-white shadow-xs"
role="menu"
[attr.aria-orientation]="'vertical'"
[attr.aria-labelledby]="'options-menu'"
>
<div>
<div class="bg-gray-100 p-4 flex items-center">
<div class="w-full">
<img
class="h-8 w-8 rounded-full mb-2"
src="https://fayazz.co/fayaz.jpg"
alt="avatar"
/>
<p class="font-semibold text-base">Fayaz Ahmed</p>
<button
class="flex items-center justify-between w-full focus:outline-none"
>
<p class="text-gray-600">fayaz@email.com</p>
<img
src="https://s.svgbox.net/hero-solid.svg?ic=cog&fill=grey-700"
class="h-4 w-4"
/>
</button>
</div>
</div>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a routerLink="/" class="p-4 flex items-center space-x-2">
<img
src="https://s.svgbox.net/hero-outline.svg?ic=currency-rupee"
class="h-6 w-6"
/>
<span> Transaction History </span>
</a>
<a routerLink="/" class="p-4 flex items-center space-x-2">
<img
src="https://s.svgbox.net/hero-outline.svg?ic=heart"
class="h-6 w-6"
/>
<span> Favourites </span>
</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a
routerLink="/"
(click)="isMenuOpen = false"
class="p-4 flex items-center space-x-2"
>
<img
src="https://s.svgbox.net/hero-outline.svg?ic=logout"
class="h-6 w-6"
/>
<span> Logout </span>
</a>
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
</nav>

11
client/src/app/core/layout/header.component.ts
View file

@ -1,5 +1,5 @@
import { DatePipe, NgIf } from '@angular/common';
import { Component, Input, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { User } from '../models/user.model';
import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
import { UserService } from '../services/user.service';
@ -14,7 +14,6 @@ export class HeaderComponent implements OnInit {
user: User | null = null;
date: Date = new Date();
isMenuOpen = false;
label = 'Menu';
constructor(private userService: UserService) {}
@ -22,7 +21,11 @@ export class HeaderComponent implements OnInit {
this.userService.currentUser.subscribe((user) => (this.user = user));
}
closeMenu(): void {
this.isMenuOpen = false;
toggleDropdown() {
this.isMenuOpen = !this.isMenuOpen;
}
logout(): void {
this.userService.logout();
}
}