update move login button to shared component
This commit is contained in:
Kenta420-Poom
parent
930911d7a9
commit
1ff1e6a90c
9 changed files with 196 additions and 48 deletions
|
|
@ -1,3 +1,125 @@
|
|||
<header class="p-10">
|
||||
<h1>This is Header</h1>
|
||||
</header>
|
||||
<!-- nav bar with logo -->
|
||||
<nav class="bg-primary">
|
||||
<div class="flex items-center justify-between flex-wrap p-6">
|
||||
<div class="flex items-center flex-shrink-0 text-black mr-6">
|
||||
<img
|
||||
class="h-20 mr-2"
|
||||
src="/assets/logo.png"
|
||||
alt="Tao Bin | Forth Vanding Machine"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-row items-center" *ngIf="user; else login_button">
|
||||
<div class="flex flex-col items-center px-5">
|
||||
<span
|
||||
class="flex items-center text-primary text-xl font-normal font-[kanit]"
|
||||
>
|
||||
{{ date | date : "dd MMM yyyy" }}
|
||||
</span>
|
||||
<span
|
||||
class="flex items-center text-primary text-xl font-normal font-[kanit]"
|
||||
>
|
||||
{{ user.username }}
|
||||
</span>
|
||||
</div>
|
||||
<img
|
||||
class="h-16 rounded-full"
|
||||
src="{{ user.image }}"
|
||||
loading="lazy"
|
||||
alt="profile picture"
|
||||
/>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,28 @@
|
|||
import { NgIf } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { DatePipe, NgIf } from '@angular/common';
|
||||
import { Component, Input, 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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-header',
|
||||
templateUrl: './header.component.html',
|
||||
imports: [NgIf],
|
||||
imports: [NgIf, GoogleButtonComponent, DatePipe],
|
||||
standalone: true,
|
||||
})
|
||||
export class HeaderComponent {
|
||||
constructor() {}
|
||||
export class HeaderComponent implements OnInit {
|
||||
user: User | null = null;
|
||||
date: Date = new Date();
|
||||
isMenuOpen = false;
|
||||
label = 'Menu';
|
||||
|
||||
constructor(private userService: UserService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.userService.currentUser.subscribe((user) => (this.user = user));
|
||||
}
|
||||
|
||||
closeMenu(): void {
|
||||
this.isMenuOpen = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
<app-layout-footer></app-layout-footer>
|
||||
<!-- <app-layout-footer></app-layout-footer> -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue