@if (page !== 'consultation' && page !== 'patient-details' && page !== 'payment' && page !== 'signup' && page !==
  'pharmacy-index') {
  <header class="header header-custom header-fixed header-one">
    <div class="container">
      <nav class="navbar navbar-expand-lg header-nav">
        <div class="navbar-header">
          <a (click)="toggleSidebar()" id="mobile_btn" href="javascript:void(0);">
            <span class="bar-icon">
              <span></span>
              <span></span>
              <span></span>
            </span>
          </a>
          <a [routerLink]="routes.home1" class="navbar-brand logo">
            <img src="assets/img/logo.png" class="img-fluid" alt="Logo" />
          </a>
        </div>
        <div class="main-menu-wrapper">
          <div class="menu-header">
            <a [routerLink]="routes.adminLogin" class="menu-logo">
              <img src="assets/img/logo.svg" class="img-fluid" alt="Logo" />
            </a>
            <a id="menu_close" (click)="hideSidebar()" class="menu-close" href="javascript:void(0);">
              <i class="fas fa-times"></i></a>
            </div>
            <ul class="main-nav">
              @for (mainMenus of header; track mainMenus) {
                @if (mainMenus.separateRoute === false) {
          <li class="has-submenu" [class.active]="base === mainMenus.base" [ngClass]="{
                  megamenu: mainMenus.tittle === 'Home'
                }">
                    <a href="javascript:void(0);" (click)="mainMenus.showAsTab = !mainMenus.showAsTab">{{ mainMenus.tittle
                      }} <i class="fas fa-chevron-down"></i></a>
            <ul class="submenu" [ngClass]="{
                    'd-block': mainMenus.showAsTab === true,
                    'mega-submenu': mainMenus.tittle === 'Home'
                  }">
                        @for (menu of mainMenus.menu; track menu) {
                          @if (
                            menu.hasSubRoute === false &&
                            mainMenus.tittle !== 'Home'
                            ) {
                            @if (page !== 'appointments' && page !== 'settings') {
                              <li routerLinkActive="active">
                                @if (menu.openInNewTab === false) {
                                  <a [routerLink]="menu.route">{{ menu.menuValue }}</a>
                                }
                                @if (menu.openInNewTab === true) {
                                  <a [target]="'_blank'" [routerLink]="menu.route">{{ menu.menuValue }}</a>
                                }
                              </li>
                            }
                            @if (page === 'appointments' || page === 'settings') {
                              <li [class.active]="page === menu.page">
                                @if (menu.openInNewTab === false) {
                                  <a [routerLink]="menu.route">{{ menu.menuValue }}</a>
                                }
                                @if (menu.openInNewTab === true) {
                                  <a [target]="'_blank'" [routerLink]="menu.route">{{ menu.menuValue }}</a>
                                }
                              </li>
                            }
                          }
                          @if (menu.hasSubRoute === true) {
                            <li class="has-submenu" routerLinkActive="active">
                              <a (click)="menu.showSubRoute = !menu.showSubRoute" [routerLink]="menu.route">{{ menu.menuValue
                              }}</a>
                <ul class="submenu" [ngClass]="{
                            'd-block': menu.showSubRoute === true
                          }">
                                @for (subMenu of menu.subMenus; track subMenu) {
                                  @if (mainMenus.tittle !== 'Home') {
                                    <li routerLinkActive="active">
                                      <a [routerLink]="subMenu.route">{{
                                        subMenu.menuValue
                                      }}</a>
                                    </li>
                                  }
                                }
                              </ul>
                            </li>
                          }
                          @if (menu.menuValue === 'General Home') {
                            <li>
                              <div class="megamenu-wrapper">
                                <div class="row">
                                  @for (menu of mainMenus.menu; track menu) {
                                    <div class="col-lg-2">
                                      <div class="single-demo" routerLinkActive="active">
                                        <div class="demo-img">
                                          <a [routerLink]="menu.route" class="inner-demo-img"><img [src]="menu.img" class="img-fluid"
                                          alt="img" /></a>
                                        </div>
                                        <div class="demo-info">
                                          <a class="inner-demo-img" [routerLink]="menu.route">{{
                                            menu.menuValue
                                          }}</a>
                                        </div>
                                      </div>
                                    </div>
                                  }
                                </div>
                              </div>
                            </li>
                          }
                        }
                      </ul>
                    </li>
                  }
                }
                @if (base !== 'doctors' && base !== 'patients' && base !== 'pharmacy' || last === 'pharmacy-register' || last
                  === 'map-grid' || last === 'map-list' && page !== 'invoices' || last === 'doctor-register') {
                  @if (page !== 'invoices' && page !== 'call') {
                    <li class="searchbar">
                      <a href="javascript:void(0);" (click)="toggleSearch()"><i class="feather icon-search"></i></a>
                      <div class="togglesearch" [ngClass]="searchField ? 'd-block' : 'd-none'">
                        <form>
                          <div class="input-group">
                            <input type="text" class="form-control" />
                            <button type="button" class="btn" (click)="navigation()" (keydown)="navigation()"
                            tabindex="1">Search</button>
                          </div>
                        </form>
                      </div>
                    </li>
                  }
                  @if (page !== 'invoices' && page !== 'call') {
                    <li class="login-link"><a [routerLink]="routes.userLogin">Login / Signup</a></li>
                  }
                  @if (page !== 'invoices' && page !== 'call') {
                    <li class="register-btn">
                      <a [routerLink]="routes.register" class="btn reg-btn"><i class="feather icon-user"></i>Register</a>
                    </li>
                  }
                  @if (page !== 'invoices' && page !== 'call') {
                    <li class="register-btn">
                      <a [routerLink]="routes.userLogin" class="btn btn-primary log-btn"><i
                      class="feather icon-lock"></i>Login</a>
                    </li>
                  }
                }
              </ul>
            </div>
            @if (last !== 'doctor-register' && base === 'doctors' || page === 'invoices' || last === 'video-call') {
              <ul class="nav header-navbar-rht">
                <!-- Cart -->
                @if (page !== 'add-billing' && page !== 'add-prescription' && page !== 'edit-billing' && last !== 'edit-blog' &&
                  page !== 'edit-prescription' && last !== 'doctor-register') {
                  <li class="nav-item dropdown noti-nav view-cart-header me-3">
                    <a href="javascript:void(0)" class="dropdown-toggle nav-link p-0 position-relative" data-bs-toggle="dropdown">
                      <i class="fa-solid fa-cart-shopping"></i> <small class="unread-msg1">7</small>
                    </a>
                    <div class="dropdown-menu notifications dropdown-menu-end">
                      <div class="shopping-cart">
                        <ul class="shopping-cart-items list-unstyled">
                          <li class="clearfix">
                            <div class="close-icon"><i class="fa-solid fa-circle-xmark"></i></div>
                            <a [routerLink]="routes.productDescription"><img class="avatar-img rounded"
                            src="assets/img/products/product.jpg" alt="User Image"></a>
                            <a [routerLink]="routes.productDescription" class="item-name">Benzaxapine Croplex</a>
                            <span class="item-price">$849.99</span>
                            <span class="item-quantity">Quantity: 01</span>
                          </li>
                          <li class="clearfix">
                            <div class="close-icon"><i class="fa-solid fa-circle-xmark"></i></div>
                            <a [routerLink]="routes.productDescription"><img class="avatar-img rounded"
                            src="assets/img/products/product1.jpg" alt="User Image"></a>
                            <a [routerLink]="routes.productDescription" class="item-name">Ombinazol Bonibamol</a>
                            <span class="item-price">$1,249.99</span>
                            <span class="item-quantity">Quantity: 01</span>
                          </li>
                          <li class="clearfix">
                            <div class="close-icon"><i class="fa-solid fa-circle-xmark"></i></div>
                            <a [routerLink]="routes.productDescription"><img class="avatar-img rounded"
                            src="assets/img/products/product2.jpg" alt="User Image"></a>
                            <a [routerLink]="routes.productDescription" class="item-name">Dantotate Dantodazole</a>
                            <span class="item-price">$129.99</span>
                            <span class="item-quantity">Quantity: 01</span>
                          </li>
                        </ul>
                        <div class="booking-summary pt-3">
                          <div class="booking-item-wrap">
                            <ul class="booking-date">
                              <li>Subtotal <span>$5,877.00</span></li>
                              <li>Shipping <span>$25.00</span></li>
                              <li>Tax <span>$0.00</span></li>
                              <li>Total <span>$5.2555</span></li>
                            </ul>
                            <div class="booking-total">
                              <ul class="booking-total-list text-align">
                                <li>
                                  <div class="clinic-booking pt-3">
                                    <a class="apt-btn" [routerLink]="routes.cart">View Cart</a>
                                  </div>
                                </li>
                                <li>
                                  <div class="clinic-booking pt-3">
                                    <a class="apt-btn" [routerLink]="routes.productCheckout">Checkout</a>
                                  </div>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                }
                <!-- /Cart -->
                <!-- Notifications -->
                @if (page !== 'add-billing' && page !== 'add-prescription' && page !== 'edit-billing' && last !== 'edit-blog'&&
                  page !== 'edit-prescription' && last !== 'doctor-register') {
                  <li class="nav-item dropdown noti-nav me-3 pe-0">
                    <a href="javascript:void(0)" class="dropdown-toggle nav-link p-0" data-bs-toggle="dropdown">
                      <i class="fa-solid fa-bell"></i> <span class="badge">5</span>
                    </a>
                    <div class="dropdown-menu notifications dropdown-menu-end ">
                      <div class="topnav-dropdown-header">
                        <span class="notification-title">Notifications</span>
                      </div>
                      <div class="noti-content">
                        <ul class="notification-list">
                          <li class="notification-message">
                            <a href="javascript:void(0)">
                              <div class="notify-block d-flex">
                                <span class="avatar">
                                  <img class="avatar-img" alt="Ruby perin" src="assets/img/clients/client-01.jpg">
                                </span>
                                <div class="media-body">
                                  <h6>Travis Tremble <span class="notification-time">18.30 PM</span></h6>
                                  <p class="noti-details">Sent a amount of $210 for his Appointment <span
                                  class="noti-title">Dr.Ruby perin </span></p>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="notification-message">
                            <a href="javascript:void(0)">
                              <div class="notify-block d-flex">
                                <span class="avatar">
                                  <img class="avatar-img" alt="Hendry Watt" src="assets/img/clients/client-02.jpg">
                                </span>
                                <div class="media-body">
                                  <h6>Travis Tremble <span class="notification-time">12 Min Ago</span></h6>
                                  <p class="noti-details"> has booked her appointment to <span class="noti-title">Dr. Hendry
                                  Watt</span></p>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="notification-message">
                            <a href="javascript:void(0)">
                              <div class="notify-block d-flex">
                                <div class="avatar">
                                  <img class="avatar-img" alt="Maria Dyen" src="assets/img/clients/client-03.jpg">
                                </div>
                                <div class="media-body">
                                  <h6>Travis Tremble <span class="notification-time">6 Min Ago</span></h6>
                                  <p class="noti-details"> Sent a amount $210 for his Appointment <span
                                  class="noti-title">Dr.Maria Dyen</span></p>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="notification-message">
                            <a href="javascript:void(0)">
                              <div class="notify-block d-flex">
                                <div class="avatar avatar-sm">
                                  <img class="avatar-img" alt="client-image" src="assets/img/clients/client-04.jpg">
                                </div>
                                <div class="media-body">
                                  <h6>Travis Tremble <span class="notification-time">8.30 AM</span></h6>
                                  <p class="noti-details"> Send a message to his doctor</p>
                                </div>
                              </div>
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                }
                <!-- /Notifications -->
                <!-- User Menu -->
                @if (page !== 'add-billing' && page !== 'add-prescription' && page !== 'edit-billing' && last !== 'edit-blog' &&
                  page !== 'edit-prescription' && last !== 'doctor-register') {
                  <li class="nav-item dropdown has-arrow logged-item">
                    <a href="javascript:void(0)" class="dropdown-toggle nav-link" data-bs-toggle="dropdown">
                      <span class="user-img">
                        <img class="rounded-circle" src="assets/img/doctors/doctor-thumb-02.jpg" width="31" alt="Darren Elder">
                      </span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                      <div class="user-header">
                        <div class="avatar avatar-sm">
                          <img src="assets/img/doctors/doctor-thumb-02.jpg" alt="User Image" class="avatar-img rounded-circle">
                        </div>
                        <div class="user-text">
                          <h6>Darren Elder</h6>
                          <p class="text-success mb-0">Available</p>
                        </div>
                      </div>
                      <a class="dropdown-item" [routerLink]="routes.doctorDashboard">Dashboard</a>
                      <a class="dropdown-item" [routerLink]="routes.doctorProfileSettings">Profile Settings</a>
                      <a class="dropdown-item" [routerLink]="routes.userLogin">Logout</a>
                    </div>
                  </li>
                }
                @if (page === 'edit-billing' || page === 'add-billing' || page !== 'add-prescription' && page !== 'appointments'
                  && page !== 'available-timings' && page !== 'accounts' && last !== 'doctor-add-blog' && last !== 'doctor-blog'
                  && page !== 'doctor-change-password' && page !== 'doctor-dashboard' && page !== 'doctor-profile-settings' &&
                  last !== 'doctor-pending-blog' && last !== 'doctor-register' && page !== 'doctor-search-grid' && last !==
                  'edit-blog' && page !== 'edit-prescription' && page !== 'edit-prescription' && page !== 'my-patients' && last
                  !== 'pharmacy-register' && page !== 'patient-profile' && page !== 'reviews' && page !== 'schedule-timings' &&
                  page !== 'invoices' && last !== 'video-call' && page !== 'chat-doctor' && last !== 'doctor-profile-settings' &&
                  page !== 'doctor-payment' && page !== 'doctor-request' && last !== 'doctor-business-settings' && last !== 'doctor-insurance-settings') {
                  <li class="nav-item dropdown has-arrow logged-item">
                    <a href="javascript:void(0)" class="dropdown-toggle nav-link" data-bs-toggle="dropdown">
                      <span class="user-img">
                        <img class="rounded-circle" src="assets/img/patients/patient.jpg" width="31" alt="Darren Elder">
                      </span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                      <div class="user-header">
                        <div class="avatar avatar-sm">
                          <img src="assets/img/patients/patient.jpg" alt="User Image" class="avatar-img rounded-circle">
                        </div>
                        <div class="user-text">
                          <h6>Darren Elder</h6>
                          <p class="text-muted mb-0">Doctor</p>
                        </div>
                      </div>
                      <a class="dropdown-item" [routerLink]="routes.doctorDashboard">Dashboard</a>
                      <a class="dropdown-item" [routerLink]="routes.doctorProfileSettings">Profile Settings</a>
                      <a class="dropdown-item" [routerLink]="routes.userLogin">Logout</a>
                    </div>
                  </li>
                }
                @if (page === 'add-prescription' || last === 'edit-blog' || page === 'edit-prescription') {
                  <li class="nav-item dropdown has-arrow logged-item">
                    <a href="javascript:void(0)" class="dropdown-toggle nav-link" data-bs-toggle="dropdown">
                      <span class="user-img">
                        <img class="rounded-circle" src="assets/img/doctors/doctor-thumb-02.jpg" width="31" alt="Darren Elder">
                      </span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                      <div class="user-header">
                        <div class="avatar avatar-sm">
                          <img src="assets/img/doctors/doctor-thumb-02.jpg" alt="User Image" class="avatar-img rounded-circle">
                        </div>
                        <div class="user-text">
                          <h6>Darren Elder</h6>
                          <p class="text-muted mb-0">Doctor</p>
                        </div>
                      </div>
                      <a class="dropdown-item" [routerLink]="routes.doctorDashboard">Dashboard</a>
                      <a class="dropdown-item" [routerLink]="routes.doctorProfileSettings">Profile Settings</a>
                      <a class="dropdown-item" [routerLink]="routes.userLogin">Logout</a>
                    </div>
                  </li>
                }
                <!-- /User Menu -->
              </ul>
            }
            @if (base === 'patients' || base === 'pharmacy' || last === 'voice-call') {
              <ul class="nav header-navbar-rht">
                <!-- Cart -->
                @if (last !== 'add-dependent' && last !== 'edit-dependent' && last !== 'pharmacy-register' && last !==
                  'map-grid' && last !== 'map-list') {
                  <li class="nav-item dropdown noti-nav view-cart-header me-3">
                    <a href="javascript:void(0)" class="dropdown-toggle nav-link p-0 position-relative" data-bs-toggle="dropdown">
                      <i class="fa-solid fa-cart-shopping"></i> <small class="unread-msg1">7</small>
                    </a>
                    <div class="dropdown-menu notifications dropdown-menu-end">
                      <div class="shopping-cart">
                        <ul class="shopping-cart-items list-unstyled">
                          <li class="clearfix">
                            <div class="close-icon"><i class="fa-solid fa-circle-xmark"></i></div>
                            <a [routerLink]="routes.productDescription"><img class="avatar-img rounded"
                            src="assets/img/products/product.jpg" alt="User Image"></a>
                            <a [routerLink]="routes.productDescription" class="item-name">Benzaxapine Croplex</a>
                            <span class="item-price">$849.99</span>
                            <span class="item-quantity">Quantity: 01</span>
                          </li>
                          <li class="clearfix">
                            <div class="close-icon"><i class="fa-solid fa-circle-xmark"></i></div>
                            <a [routerLink]="routes.productDescription"><img class="avatar-img rounded"
                            src="assets/img/products/product1.jpg" alt="User Image"></a>
                            <a [routerLink]="routes.productDescription" class="item-name">Ombinazol Bonibamol</a>
                            <span class="item-price">$1,249.99</span>
                            <span class="item-quantity">Quantity: 01</span>
                          </li>
                          <li class="clearfix">
                            <div class="close-icon"><i class="fa-solid fa-circle-xmark"></i></div>
                            <a [routerLink]="routes.productDescription"><img class="avatar-img rounded"
                            src="assets/img/products/product2.jpg" alt="User Image"></a>
                            <a [routerLink]="routes.productDescription" class="item-name">Dantotate Dantodazole</a>
                            <span class="item-price">$129.99</span>
                            <span class="item-quantity">Quantity: 01</span>
                          </li>
                        </ul>
                        <div class="booking-summary pt-3">
                          <div class="booking-item-wrap">
                            <ul class="booking-date">
                              <li>Subtotal <span>$5,877.00</span></li>
                              <li>Shipping <span>$25.00</span></li>
                              <li>Tax <span>$0.00</span></li>
                              <li>Total <span>$5.2555</span></li>
                            </ul>
                            <div class="booking-total">
                              <ul class="booking-total-list text-align">
                                <li>
                                  <div class="clinic-booking pt-3">
                                    <a class="apt-btn" [routerLink]="routes.cart">View Cart</a>
                                  </div>
                                </li>
                                <li>
                                  <div class="clinic-booking pt-3">
                                    <a class="apt-btn" [routerLink]="routes.productCheckout">Checkout</a>
                                  </div>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                }
                <!-- /Cart -->
                <!-- Notifications -->
                @if (last !== 'add-dependent' && last !== 'edit-dependent' && last !== 'pharmacy-register' && last !==
                  'map-grid' && last !== 'map-list' && last !== 'doctor-register') {
                  <li class="nav-item dropdown noti-nav me-3 pe-0">
                    <a href="javascript:void(0)" class="dropdown-toggle nav-link p-0" data-bs-toggle="dropdown">
                      <i class="fa-solid fa-bell"></i> <span class="badge">5</span>
                    </a>
                    <div class="dropdown-menu notifications dropdown-menu-end ">
                      <div class="topnav-dropdown-header">
                        <span class="notification-title">Notifications</span>
                      </div>
                      <div class="noti-content">
                        <ul class="notification-list">
                          <li class="notification-message">
                            <a href="javascript:void(0)">
                              <div class="notify-block d-flex">
                                <span class="avatar">
                                  <img class="avatar-img" alt="Ruby perin" src="assets/img/clients/client-01.jpg">
                                </span>
                                <div class="media-body">
                                  <h6>Travis Tremble <span class="notification-time">18.30 PM</span></h6>
                                  <p class="noti-details">Sent a amount of $210 for his Appointment <span
                                  class="noti-title">Dr.Ruby perin </span></p>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="notification-message">
                            <a href="javascript:void(0)">
                              <div class="notify-block d-flex">
                                <span class="avatar">
                                  <img class="avatar-img" alt="Hendry Watt" src="assets/img/clients/client-02.jpg">
                                </span>
                                <div class="media-body">
                                  <h6>Travis Tremble <span class="notification-time">12 Min Ago</span></h6>
                                  <p class="noti-details"> has booked her appointment to <span class="noti-title">Dr. Hendry
                                  Watt</span></p>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="notification-message">
                            <a href="javascript:void(0)">
                              <div class="notify-block d-flex">
                                <div class="avatar">
                                  <img class="avatar-img" alt="Maria Dyen" src="assets/img/clients/client-03.jpg">
                                </div>
                                <div class="media-body">
                                  <h6>Travis Tremble <span class="notification-time">6 Min Ago</span></h6>
                                  <p class="noti-details"> Sent a amount $210 for his Appointment <span
                                  class="noti-title">Dr.Maria Dyen</span></p>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="notification-message">
                            <a href="javascript:void(0)">
                              <div class="notify-block d-flex">
                                <div class="avatar avatar-sm">
                                  <img class="avatar-img" alt="client-image" src="assets/img/clients/client-04.jpg">
                                </div>
                                <div class="media-body">
                                  <h6>Travis Tremble <span class="notification-time">8.30 AM</span></h6>
                                  <p class="noti-details"> Send a message to his doctor</p>
                                </div>
                              </div>
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                }
                <!-- /Notifications -->
                <!-- User Menu -->
                @if (last !== 'add-dependent' && last !== 'edit-dependent' && last !== 'pharmacy-register' && last !==
                  'map-grid' && last !== 'map-list') {
                  <li class="nav-item dropdown has-arrow logged-item">
                    <a href="javascript:void(0)" class="dropdown-toggle nav-link" data-bs-toggle="dropdown">
                      <span class="user-img">
                        <img class="rounded-circle" src="assets/img/patients/patient.jpg" width="31" alt="Darren Elder">
                      </span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                      <div class="user-header">
                        <div class="avatar avatar-sm">
                          <img src="assets/img/patients/patient.jpg" alt="User Image" class="avatar-img rounded-circle">
                        </div>
                        <div class="user-text">
                          <h6>Richard Wilson</h6>
                          <p class="text-success mb-0">Available</p>
                        </div>
                      </div>
                      <a class="dropdown-item" [routerLink]="routes.patientDashboard">Dashboard</a>
                      <a class="dropdown-item" [routerLink]="routes.profileSettings">Profile Settings</a>
                      <a class="dropdown-item" [routerLink]="routes.userLogin">Logout</a>
                    </div>
                  </li>
                }
                @if (last === 'add-dependent' || last === 'edit-dependent') {
                  <li class="nav-item dropdown has-arrow logged-item">
                    <a href="javascript:void(0)" class="dropdown-toggle nav-link" data-bs-toggle="dropdown">
                      <span class="user-img">
                        <img class="rounded-circle" src="assets/img/doctors/doctor-thumb-02.jpg" width="31" alt="Darren Elder">
                      </span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                      <div class="user-header">
                        <div class="avatar avatar-sm">
                          <img src="assets/img/doctors/doctor-thumb-02.jpg" alt="User Image" class="avatar-img rounded-circle">
                        </div>
                        <div class="user-text">
                          <h6>Darren Elder</h6>
                          <p class="text-muted mb-0">Doctor</p>
                        </div>
                      </div>
                      <a class="dropdown-item" [routerLink]="routes.doctorDashboard">Dashboard</a>
                      <a class="dropdown-item" [routerLink]="routes.doctorProfileSettings">Profile Settings</a>
                      <a class="dropdown-item" [routerLink]="routes.userLogin">Logout</a>
                    </div>
                  </li>
                }
                <!-- /User Menu -->
              </ul>
            }
          </nav>
        </div>
      </header>
    }

    @if (page === 'consultation' || page === 'patient-details' || page === 'payment' || page === 'signup' || page !==
      'pharmacy-index') {
      <header class="header login-header-info">
        <nav class="navbar navbar-expand-lg header-nav">
          <div class="navbar-header">
            <a (click)="toggleSidebar()" id="mobile_btn" href="javascript:void(0);">
              <span class="bar-icon">
                <span></span>
                <span></span>
                <span></span>
              </span>
            </a>
            <a [routerLink]="routes.home1" class="navbar-brand logo">
              <img src="assets/img/logo.png" class="img-fluid" alt="Logo">
            </a>
          </div>
          <div class="main-menu-wrapper">
            <div class="menu-header">
              <a [routerLink]="routes.home1" class="menu-logo">
                <img src="assets/img/logo.png" class="img-fluid" alt="Logo">
              </a>
              <a id="menu_close" (click)="hideSidebar()" class="menu-close" href="javascript:void(0);">
                <i class="fas fa-times"></i>
              </a>
            </div>
            <ul class="main-nav">
              <li>
                <a [routerLink]="routes.faq">FAQ</a>
              </li>
              <li>
                <a [routerLink]="routes.loginEmail">Login</a>
              </li>
              <li class="flag-dropdown-hide">
                <div class="flag-dropdown">
                  <a class="dropdown-toggle" data-bs-toggle="dropdown" href="javascript:void(0)" role="button"
                    aria-expanded="false">
                    <img src="assets/img/flags/flag-01.png" alt="flag-image" height="20" class="flag-img">
                    <span>English</span>
                  </a>
                  <div class="dropdown-menu">
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img src="assets/img/flags/flag-01.png" alt="flag-image" height="16"> English
                    </a>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img src="assets/img/flags/flag-02.png" alt="flag-image" height="16"> French
                    </a>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img src="assets/img/flags/flag-03.png" alt="flag-image" height="16"> Spanish
                    </a>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img src="assets/img/flags/flag-05.png" alt="flag-image" height="16"> German
                    </a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <ul class="nav header-navbar-rht">
            <li class="nav-item dropdown">
              <div class="flag-dropdown">
                <a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" href="javascript:void(0)" role="button"
                  aria-expanded="false">
                  <img src="assets/img/flags/flag-01.png" alt="flag-image" height="20" class="flag-img"> <span>English</span>
                </a>
                <div class="dropdown-menu">
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img src="assets/img/flags/flag-01.png" alt="flag-image" height="16"> English
                  </a>
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img src="assets/img/flags/flag-02.png" alt="flag-image" height="16"> French
                  </a>
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img src="assets/img/flags/flag-03.png" alt="flag-image" height="16"> Spanish
                  </a>
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img src="assets/img/flags/flag-05.png" alt="flag-image" height="16"> German
                  </a>
                </div>
              </div>
            </li>
          </ul>
        </nav>
      </header>
    }

    @if (page === 'pharmacy-index') {
      <header class="header header-fixed bg-white">
        <div class="container">
          <nav class="navbar navbar-expand-lg header-nav">
            <div class="navbar-header">
              <a (click)="toggleSidebar()" id="mobile_btn" href="javascript:void(0);">
                <span class="bar-icon">
                  <span></span>
                  <span></span>
                  <span></span>
                </span>
              </a>
              <a [routerLink]="routes.home1" class="navbar-brand logo">
                <img src="assets/img/logo.png" class="img-fluid" alt="Logo">
              </a>
            </div>
            <div class="main-menu-wrapper">
              <div class="menu-header">
                <a [routerLink]="routes.home1" class="menu-logo">
                  <img src="assets/img/logo.png" class="img-fluid" alt="Logo">
                </a>
                <a (click)="hideSidebar()" id="menu_close" class="menu-close" href="javascript:void(0);">
                  <i class="fas fa-times"></i>
                </a>
              </div>
              <ul class="main-nav">
                @for (mainMenus of header; track mainMenus) {
                  @if (mainMenus.separateRoute === false) {
          <li class="has-submenu" routerLinkActive="active" [ngClass]="{
                  megamenu: mainMenus.tittle === 'Home'
                }">
                      <a href="javascript:void(0);" (click)="mainMenus.showAsTab = !mainMenus.showAsTab">{{ mainMenus.tittle
                        }} <i class="fas fa-chevron-down"></i></a>
            <ul class="submenu" [ngClass]="{
                    'd-block': mainMenus.showAsTab === true,
                    'mega-submenu': mainMenus.tittle === 'Home'
                  }">
                          @for (menu of mainMenus.menu; track menu) {
                            @if (
                              menu.hasSubRoute === false &&
                              mainMenus.tittle !== 'Home'
                              ) {
                              <li routerLinkActive="active">
                                @if (menu.openInNewTab === false) {
                                  <a [routerLink]="menu.route">{{ menu.menuValue }}</a>
                                }
                                @if (menu.openInNewTab === true) {
                                  <a [target]="'_blank'" [routerLink]="menu.route">{{ menu.menuValue }}</a>
                                }
                              </li>
                            }
                            @if (menu.hasSubRoute === true) {
                              <li class="has-submenu" routerLinkActive="active">
                                <a (click)="menu.showSubRoute = !menu.showSubRoute" [routerLink]="menu.route">{{ menu.menuValue
                                }}</a>
                <ul class="submenu" [ngClass]="{
                            'd-block': menu.showSubRoute === true
                          }">
                                  @for (subMenu of menu.subMenus; track subMenu) {
                                    @if (mainMenus.tittle !== 'Home') {
                                      <li routerLinkActive="active">
                                        <a [routerLink]="subMenu.route">{{
                                          subMenu.menuValue
                                        }}</a>
                                      </li>
                                    }
                                  }
                                </ul>
                              </li>
                            }
                            @if (menu.menuValue === 'General Home') {
                              <li>
                                <div class="megamenu-wrapper">
                                  <div class="row">
                                    @for (menu of mainMenus.menu; track menu) {
                                      <div class="col-lg-2">
                                        <div class="single-demo" routerLinkActive="active">
                                          <div class="demo-img">
                                            <a [routerLink]="menu.route" class="inner-demo-img"><img [src]="menu.img" class="img-fluid"
                                            alt="img" /></a>
                                          </div>
                                          <div class="demo-info">
                                            <a class="inner-demo-img" [routerLink]="menu.route">{{
                                              menu.menuValue
                                            }}</a>
                                          </div>
                                        </div>
                                      </div>
                                    }
                                  </div>
                                </div>
                              </li>
                            }
                          }
                        </ul>
                      </li>
                    }
                  }
                </ul>
              </div>
              <ul class="nav header-navbar-rht">
                <li class="nav-item contact-item">
                  <div class="header-contact-img">
                    <i class="far fa-hospital"></i>
                  </div>
                  <div class="header-contact-detail">
                    <p class="contact-header">Contact</p>
                    <p class="contact-info-header"> +1 315 369 5943</p>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link header-login" [routerLink]="routes.userLogin">login / Signup </a>
                </li>
              </ul>
            </nav>
          </div>
        </header>
      }