initial release

bizmatch/src/app/components/header/header.component.html

@@ -0,0 +1,11 @@
+<div class="wrapper">
+	<div class="pl-3 flex align-items-center gap-2">
+		<a routerLink="/home"><img src="assets/images/header-logo.png" height="40" alt="bizmatch" /></a>
+		<p-tabMenu [model]="tabItems" ariaLabelledBy="label" styleClass="flex" [activeItem]="activeItem">
+		</p-tabMenu>
+		<p-menubar [model]="menuItems"></p-menubar>
+		<div *ngIf="user$ | async as user else empty">Welcome, {{user.firstname}}</div>
+		<ng-template #empty>		
+		</ng-template>
+	</div>
+</div>

bizmatch/src/app/components/header/header.component.scss

@@ -0,0 +1,13 @@
+::ng-deep p-menubarsub{
+    margin-left: auto;
+}
+::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link{
+    border:1px solid #ffffff;
+}
+::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    border-bottom: 2px solid #3B82F6 !important;
+}
+::ng-deep .p-menubar{
+    border:unset;
+    background: unset;
+}

bizmatch/src/app/components/header/header.component.ts

@@ -0,0 +1,115 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { MenubarModule } from 'primeng/menubar';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { environment } from '../../../environments/environment';
+import { UserService } from '../../services/user.service';
+import { User } from '../../models/main.model';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { Observable } from 'rxjs';
+import { faUserGear } from '@fortawesome/free-solid-svg-icons';
+import { Router } from '@angular/router';
+
+@Component({
+	selector: 'header',
+	standalone: true,
+	imports: [CommonModule, MenubarModule, ButtonModule, OverlayPanelModule, TabMenuModule ],
+	templateUrl: './header.component.html',
+	styleUrl: './header.component.scss'
+})
+export class HeaderComponent {
+	public buildVersion = environment.buildVersion;
+	user:User;
+	user$:Observable<User>
+	public tabItems: MenuItem[];
+	public menuItems: MenuItem[];
+	activeItem
+	faUserGear=faUserGear
+	constructor(public userService: UserService,private router: Router) {
+		
+	}
+
+	ngOnInit(){
+		this.user$=this.userService.getUserObservable();
+		this.tabItems = [
+			{
+				label: 'Businesses for Sale',
+				routerLink: '/listings/business',
+				fragment:''
+			},
+			{
+				label: 'Professionals/Brokers Directory',
+				routerLink: '/listings/professionals_brokers',
+				fragment:''
+			},
+			{
+				label: 'Investment Property',
+				routerLink: '/listings/investment',
+				fragment:''
+			}
+		];
+		this.menuItems = [
+			{
+                label: 'User Actions',
+                icon: 'fas fa-cog',
+                items: [
+					{
+                        label: 'Account',
+                        icon: 'pi pi-user',
+						routerLink: '/account',
+						visible: this.isUserLoogedIn()
+                    },
+                    {
+                        label: 'Create Listing',
+                        icon: 'pi pi-plus-circle',
+						routerLink: "/createListing",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'My Listings',
+                        icon: 'pi pi-list',
+						routerLink:"/myListings",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'My Favorites',
+                        icon: 'pi pi-star',
+						routerLink:"/myFavorites",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'EMail Us',
+                        icon: 'fa-regular fa-envelope',
+						routerLink:"/emailUs",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'Logout',
+                        icon: 'fa-solid fa-right-from-bracket',
+						routerLink:"/logout",
+						visible: this.isUserLoogedIn()
+                    },
+					{
+                        label: 'Login',
+                        icon: 'fa-solid fa-right-from-bracket',
+						//routerLink:"/account",
+						command: () => this.login(),
+						visible: !this.isUserLoogedIn()
+                    },
+				]
+			}
+		]
+		this.activeItem=this.tabItems[0];
+	}
+	navigateWithState(dest: string, state: any) {
+		this.router.navigate([dest], { state: state });
+	}
+	isUserLoogedIn(){
+		return this.userService?.isLoggedIn();
+	}
+	login(){
+		this.userService.login(window.location.href);
+	}
+}