-
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* feat(home-module): initial UI redesign * chore: updated icon with primeng class Co-authored-by: Sashikumar Yadav <[email protected]>
- Loading branch information
1 parent
a83bc9f
commit fc0ec0b
Showing
7 changed files
with
241 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 87 additions & 32 deletions
119
pdf/src/app/shared/components/header/header.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,107 @@ | ||
| import { CommonModule } from '@angular/common' | ||
| import { ChangeDetectionStrategy, Component, inject } from '@angular/core' | ||
| import { RouterLinkWithHref } from '@angular/router' | ||
| import { | ||
| ChangeDetectionStrategy, | ||
| Component, | ||
| inject, | ||
| signal, | ||
| } from '@angular/core' | ||
| import { RouterLinkActive, RouterLinkWithHref } from '@angular/router' | ||
| import { AuthService } from '@pdfun/angular/services' | ||
| import { LoginComponent, ProfileComponent } from '@pdfun/ui/auth' | ||
|
|
||
| @Component({ | ||
| selector: 'pdf-header', | ||
| standalone: true, | ||
| imports: [CommonModule, LoginComponent, ProfileComponent, RouterLinkWithHref], | ||
| imports: [ | ||
| CommonModule, | ||
| LoginComponent, | ||
| ProfileComponent, | ||
| RouterLinkWithHref, | ||
| RouterLinkActive, | ||
| ], | ||
| template: ` | ||
| <!-- REPLACE With PrimeNG Menubar --> | ||
| <header class="m-8 flex justify-between items-center flex-wrap"> | ||
| <a class="flex items-center" routerLink="/"> | ||
| <img src="/assets/pdfun.png" alt="PDFun logo" class="w-10" /> | ||
| </a> | ||
| <header class="bg-gray-800 py-4 px-6"> | ||
| <div | ||
| class="container mx-auto flex items-center justify-between flex-wrap" | ||
| > | ||
| <div class="flex items-center"> | ||
| <a | ||
| class="md:hidden text-gray-400 hover:text-white focus:outline-none mr-2" | ||
| (click)="toggleMobileMenu()" | ||
| > | ||
| <i class="pi pi-bars pi-lg"></i> | ||
| </a> | ||
| <a routerLink="/" class="flex items-center mr-6"> | ||
| <img src="/assets/pdfun.png" alt="PDFun logo" class="h-8 mr-2" /> | ||
| <span class="text-white font-semibold text-lg">PDFun</span> | ||
| </a> | ||
| <nav class="hidden md:block"> | ||
| <div class="flex gap-4"> | ||
| <a | ||
| routerLink="/" | ||
| routerLinkActive="text-gray-200" | ||
| [routerLinkActiveOptions]="{ exact: true }" | ||
| class="text-gray-400 no-underline hover:text-white transition-colors duration-300" | ||
| > | ||
| Resize PDF | ||
| </a> | ||
| <div class="flex gap-2"> | ||
| <ul class="flex gap-2 list-none"> | ||
| <li> | ||
| <a | ||
| class="no-underline text-black hover:text-blue-800 hover:underline" | ||
| routerLink="/" | ||
| >Resize PDF</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <a | ||
| class="no-underline text-black hover:text-blue-800 hover:underline" | ||
| routerLink="/pdf-to-images" | ||
| >PDF to Images</a | ||
| > | ||
| </li> | ||
| </ul> | ||
| @defer (on timer(200ms)) { | ||
| <div class="flex items-center gap-4"> | ||
| @if(authService.isLoggedIn()) { | ||
| <lib-profile /> | ||
| } @else { | ||
| <lib-login /> | ||
| <a | ||
| routerLink="/pdf-to-images" | ||
| routerLinkActive="text-gray-200" | ||
| class="text-gray-400 no-underline hover:text-white transition-colors duration-300" | ||
| > | ||
| PDF to Images | ||
| </a> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| <div class="flex items-center"> | ||
| @defer (on timer(200ms)) { | ||
| <div class="flex items-center gap-4"> | ||
| @if(authService.isLoggedIn()) { | ||
| <lib-profile /> | ||
| } @else { | ||
| <lib-login /> | ||
| } | ||
| </div> | ||
| } | ||
| </div> | ||
| } | ||
| </div> | ||
| <div | ||
| class="md:hidden bg-gray-700 p-4 mt-4" | ||
| [ngClass]="{ hidden: !showMobileMenu() }" | ||
| > | ||
| <div class="flex flex-col gap-4"> | ||
| <a | ||
| routerLink="/" | ||
| routerLinkActive="text-gray-100" | ||
| [routerLinkActiveOptions]="{ exact: true }" | ||
| class="text-gray-400 no-underline hover:text-white transition-colors duration-300" | ||
| (click)="toggleMobileMenu()" | ||
| > | ||
| Resize PDF | ||
| </a> | ||
| <a | ||
| routerLink="/pdf-to-images" | ||
| routerLinkActive="text-gray-100" | ||
| class="text-gray-400 no-underline hover:text-white transition-colors duration-300" | ||
| (click)="toggleMobileMenu()" | ||
| >PDF to Images | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| `, | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class HeaderComponent { | ||
| authService = inject(AuthService) | ||
| showMobileMenu = signal(false) | ||
|
|
||
| toggleMobileMenu() { | ||
| this.showMobileMenu.update((value) => !value) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.