doneit-web/src/app/shared/header/header.page.html

<div class=" pb-10 ion-toolbar text-white">


  <div class="mobile d-flex  div-top-header justify-space-between">
    <div *ngIf="!hideSearchBtn" class="div-search">
      <div (click)="openSearch()">
        <ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon>
      </div>
    </div>
    <div class="div-logo height-fit-content">
      <img src='assets/images/logo-no-bg.png' alt='logo'>
    </div>
    <div class="div-profile cursor-pointer" (click)="openProfile()">
      <div *ngIf="this.notificationLength > 0" class="icon-badge" >{{this.notificationLength}}</div>
      <ion-icon class="icon" src='assets/images/icons-profile.svg'></ion-icon>
      <ion-label class="profile-text">{{loggeduser.Profile}}</ion-label>
    </div>
  </div>

  <div class="desktop mx-20">
    <div class="d-flex justify-space-between align-center">
      <div tab="events" class="div-logo height-fit-content">
        <img src='assets/images/logo-no-bg.png' alt='logo'>
      </div>

      <div class="d-flex flex-1 pr-20 pl-50">

        <div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/events')" [class.active]="locationPathname() == '/home/events'">
          <ion-icon class="font-40" src='assets/images/icons-nav-home-active.svg'></ion-icon>
          <span>Início</span>
        </div>

        <div class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/agenda')"  [class.active]="locationPathname() == '/home/agenda'">
          <ion-icon class="font-40" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
          <span>Agenda</span>
        </div>

        <div class="tab mr-20  d-flex align-center cursor-pointer" (click)="changeRoute('/home/gabinete-digital')" [class.active]="locationPathname() == '/home/gabinete-digital'">
          <ion-icon class="font-40" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
          <span>Gabinete</span>
        </div>

        <div class="tab mr-20  d-flex align-center cursor-pointer" (click)="changeRoute('/home/publications')"  [class.active]="locationPathname() == '/home/publications'">
          <ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
          <span>Acções</span>
        </div>

        <div class="tab mr-20  d-flex align-center cursor-pointer" (click)="changeRoute('/home/chat')" [class.active]="locationPathname() == '/home/chat'">
          <ion-icon class="font-40" src='assets/images/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
          <span>Chat</span>
        </div>

      </div>

      <div class="header-btns d-flex">
        <div *ngIf="!hideSearchBtn" class="mr-10 d-flex align-center cursor-pointer">
          <div style="padding-top: 5px;" (click)="openSearch();showSearch=true" *ngIf="!showSearch" >
            <ion-icon class="font-45"   src='assets/images/icons-search.svg'></ion-icon>
          </div>
          <button class="btn-no-color" (click)="closeSearch();showSearch=false;searchSubject=''" *ngIf="showSearch" >
            <ion-icon class="font-40" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
          </button>

          <div *ngIf="showSearch">
            <div class="d-flex search-input-container ml-10 justify-between"  *ngIf="showSearch" >
              <div class="icon" (click)="basicSearch()">
                <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
              </div>
              <div class="input-text d-flex ion-align-items-center">
                <ion-input (keyup.enter)="basicSearch()" [(ngModel)]='searchSubject' (ngModelChange)="dynamicSearch()" class="search-input text-black" type="search" placeholder="Pesquisar"></ion-input>
              </div>
              <div class="icon" (click)="clearSearchInput()">
                <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
              </div>
            </div>
          </div>
        </div>

        <div class="div-profile d-flex cursor-pointer" (click)="openProfile()">
          
          <ion-icon class="icon" src='assets/images/icons-profile.svg'></ion-icon>

          <div class="profile-text">
            <ion-label>{{profileLabel(loggeduser.Profile)}}</ion-label>
            <div *ngIf="this.notificationLength > 0 && !production" class="icon-badge" style="right: -18px;top: -9px;" >{{notificationLength}}</div>
          </div>

        </div>
      </div>
    </div>

  </div>

</div>