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

<nav class="bg-white border-neutral-200 dark:bg-neutral-900 print:hidden">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
      <img src="/assets/images/header-logo.png" class="h-10 w-auto"
        alt="BizMatch - Business Marketplace for Buying and Selling Businesses" />
    </a>
    <div class="flex items-center md:order-2 space-x-3 rtl:space-x-reverse">
      <!-- Filter button -->
      @if(isFilterUrl()){

      <div class="relative">
        <button type="button" id="sortDropdownButton"
          class="max-sm:hidden px-4 py-2 text-sm font-medium bg-white border border-neutral-200 rounded-lg hover:bg-neutral-100 hover:text-primary-600 dark:bg-neutral-800 dark:text-neutral-400 dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-700"
          (click)="toggleSortDropdown()"
          [ngClass]="{ 'text-primary-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-neutral-900': selectOptions.getSortByOption(sortBy) === 'Sort' }">
          <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(sortBy) }}
        </button>

        <!-- Sort options dropdown -->
        <div *ngIf="sortDropdownVisible"
          class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-neutral-200 rounded-lg drop-shadow-custom-bg dark:bg-neutral-800 dark:border-neutral-600">
          <ul class="py-1 text-sm text-neutral-700 dark:text-neutral-200">
            @for(item of sortByOptions; track item){
            <li (click)="sortByFct(item.value)"
              class="block px-4 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 cursor-pointer">{{ item.selectName ?
              item.selectName : item.name }}</li>
            }
          </ul>
        </div>
      </div>
      }
      <button type="button"
        class="flex text-sm bg-neutral-400 rounded-full md:me-0 focus:ring-4 focus:ring-neutral-300 dark:focus:ring-neutral-600"
        id="user-menu-button" aria-expanded="false" [attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'">
        <span class="sr-only">Open user menu</span>
        @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
        <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}"
          alt="{{ user?.firstname }} {{ user?.lastname }} profile photo" width="32" height="32" />
        } @else {
        <i class="flex justify-center items-center text-stone-50 w-8 h-8 rounded-full fa-solid fa-bars"></i>
        }
      </button>
      <!-- Dropdown menu -->
      @if(user){
      <div
        class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-neutral-100 rounded-lg shadow dark:bg-neutral-700 dark:divide-neutral-600"
        id="user-login">
        <div class="px-4 py-3">
          <span class="block text-sm text-neutral-900 dark:text-white">Welcome, {{ user.firstname }} </span>
          <span class="block text-sm text-neutral-500 truncate dark:text-neutral-400">{{ user.email }}</span>
        </div>
        <ul class="py-2" aria-labelledby="user-menu-button">
          <li>
            <a routerLink="/account" (click)="closeDropdown()"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Account</a>
          </li>
          @if((user.customerType==='professional' && user.customerSubType==='broker') || user.customerType==='seller' ||
          (authService.isAdmin() | async)){
          <li>
            @if(user.customerType==='professional'){
            <a routerLink="/createBusinessListing" (click)="closeDropdown()"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Create
              Listing</a>
            }@else {
            <a routerLink="/createCommercialPropertyListing" (click)="closeDropdown()"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Create
              Listing</a>
            }
          </li>
          <li>
            <a routerLink="/myListings" (click)="closeDropdown()"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">My
              Listings</a>
          </li>
          }
          <li>
            <a routerLink="/myFavorites" (click)="closeDropdown()"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">My
              Favorites</a>
          </li>
          <li>
            <a routerLink="/emailUs" (click)="closeDropdown()"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">EMail
              Us</a>
          </li>
          <li>
            <a routerLink="/logout" (click)="closeDropdown()"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Logout</a>
          </li>
        </ul>
        @if(authService.isAdmin() | async){
        <ul class="py-2">
          <li>
            <a routerLink="admin/users" (click)="closeDropdown()"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Users
              (Admin)</a>
          </li>
        </ul>
        }
        <ul class="py-2 md:hidden">
          <li>
            <a routerLink="/businessListings"
              [ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
              class="block px-4 py-2 text-sm font-semibold"
              (click)="closeMenusAndSetCriteria('businessListings')">Businesses</a>
          </li>
          @if ((numberOfCommercial$ | async) > 0) {
          <li>
            <a routerLink="/commercialPropertyListings"
              [ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
              class="block px-4 py-2 text-sm font-semibold"
              (click)="closeMenusAndSetCriteria('commercialPropertyListings')">Properties</a>
          </li>
          }
          <li>
            <a routerLink="/brokerListings"
              [ngClass]="{ 'text-primary-600': isActive('/brokerListings'), 'text-neutral-700': !isActive('/brokerListings') }"
              class="block px-4 py-2 text-sm font-semibold"
              (click)="closeMenusAndSetCriteria('brokerListings')">Professionals</a>
          </li>
        </ul>
      </div>
      } @else {
      <div
        class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-neutral-100 rounded-lg shadow dark:bg-neutral-700 dark:divide-neutral-600"
        id="user-unknown">
        <ul class="py-2" aria-labelledby="user-menu-button">
          <li>
            <a routerLink="/login" [queryParams]="{ mode: 'login' }"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Log
              In</a>
          </li>
          <li>
            <a routerLink="/login" [queryParams]="{ mode: 'register' }"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Sign
              Up</a>
          </li>
        </ul>
        <ul class="py-2 md:hidden">
          <li>
            <a routerLink="/businessListings"
              [ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
              class="block px-4 py-2 text-sm font-bold"
              (click)="closeMenusAndSetCriteria('businessListings')">Businesses</a>
          </li>
          @if ((numberOfCommercial$ | async) > 0) {
          <li>
            <a routerLink="/commercialPropertyListings"
              [ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
              class="block px-4 py-2 text-sm font-bold"
              (click)="closeMenusAndSetCriteria('commercialPropertyListings')">Properties</a>
          </li>
          }
          <li>
            <a routerLink="/brokerListings"
              [ngClass]="{ 'text-primary-600': isActive('/brokerListings'), 'text-neutral-700': !isActive('/brokerListings') }"
              class="block px-4 py-2 text-sm font-bold"
              (click)="closeMenusAndSetCriteria('brokerListings')">Professionals</a>
          </li>
        </ul>
      </div>
      }
    </div>
    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
      <ul
        class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-neutral-100 rounded-lg bg-neutral-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-neutral-800 md:dark:bg-neutral-900 dark:border-neutral-700">
        <li>
          <a routerLinkActive="active-link" routerLink="/businessListings"
            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/businessListings') }"
            class="block py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700 inline-flex items-center"
            aria-current="page" (click)="closeMenusAndSetCriteria('businessListings')">
            <img src="/assets/images/business_logo.png" alt="Business" class="w-5 h-5 mr-2 object-contain" width="20"
              height="20" />
            <span>Businesses</span>
          </a>
        </li>
        @if ((numberOfCommercial$ | async) > 0) {
        <li>
          <a routerLinkActive="active-link" routerLink="/commercialPropertyListings"
            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/commercialPropertyListings') }"
            class="block py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700 inline-flex items-center"
            (click)="closeMenusAndSetCriteria('commercialPropertyListings')">
            <img src="/assets/images/properties_logo.png" alt="Properties" class="w-5 h-5 mr-2 object-contain"
              width="20" height="20" />
            <span>Properties</span>
          </a>
        </li>
        }
        <li>
          <a routerLinkActive="active-link" routerLink="/brokerListings"
            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/brokerListings') }"
            class="inline-flex items-center py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700"
            (click)="closeMenusAndSetCriteria('brokerListings')">
            <img src="/assets/images/icon_professionals.png" alt="Professionals"
              class="w-5 h-5 mr-2 object-contain bg-transparent" style="mix-blend-mode: darken;" />
            <span>Professionals</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Mobile filter button -->
  <div class="md:hidden flex justify-center pb-4">
    <button (click)="toggleSortDropdown()" type="button" id="sortDropdownMobileButton"
      class="mx-4 w-1/2 px-4 py-2 text-sm font-medium bg-white border border-neutral-200 rounded-lg hover:bg-neutral-100 hover:text-primary-600 focus:ring-2 focus:ring-primary-600 focus:text-primary-600 dark:bg-neutral-800 dark:text-neutral-400 dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-700"
      [ngClass]="{ 'text-primary-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-neutral-900': selectOptions.getSortByOption(sortBy) === 'Sort' }">
      <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(sortBy) }}
    </button>
  </div>
</nav>