<div *ngIf="showQrmodal">
  <app-qr-code-modal (closeQrModal)="showQrmodal = false"></app-qr-code-modal>
</div>
<div *ngIf="showAccountMergemodal">
  <app-account-merge-modal (closeAccountMergeModal)="showAccountMergemodal = false"></app-account-merge-modal>
</div>
<div *ngIf="!layoutConfiguration">
  <div class="ui relative main menu bs-0 d-block" [ngClass]="{'player-fullscreen-header': isFullScreenView}">
    <!--Header White Section-->
    <div class="ui container sb-header-ui-container">
      <div class="ui grid padded width-100">
        <div class="p-0 d-flex flex-ai-center" [ngClass]="isDesktopApp ? 'five wide column' : 'two wide column'">
          <!--Logo-->
          <a class="d-flex logo" tabindex="0" title="{{tenantInfo.titleName}}" role="link" aria-label="Navigate to Homepage">
            <img (click)="navigateToHome()" class="cursor-pointer" alt={{tenantInfo.titleName}}
              src="{{tenantInfo.logo}}">
          </a>
          <!--/Logo-->

          <!--Online/Offline-->
          <div *appDesktopOnly>
            <div class="d-flex flex-ai-center flex-jc-center ml-48" *ngIf="isConnected">
              <div class="status-container__icon mr-8">
                <img height="37px" src="assets/images/Online.svg" width="24px">
              </div>
              <div class="fnormal status-container__title">{{resourceService?.messages?.stmsg?.desktop?.onlineStatus}}
              </div>
            </div>
            <div class="d-flex flex-ai-center flex-jc-center ml-48" *ngIf="!isConnected">
              <div class="status-container__icon mr-8">
                <img height="37px" src="assets/images/Offline.svg" width="24px">
              </div>
              <div class="fnormal status-container__title">{{resourceService?.frmelmnts?.lbl?.offline}}</div>
            </div>
          </div>
          <!--/Online/Offline-->

        </div>
        <div class="p-0 d-flex flex-jc-flex-end flex-ai-center"
          [ngClass]="isDesktopApp ? 'seven wide column sb-desktop-header-list-items' : 'ten wide column sb-header-list-items'">
          <!--Hamburger Icon-->
          <!--
          <i class="large bars icon link primary-color mobile only" (click)="showSideBar()" tabindex="0"></i>
-->
          <!--/Hamburger Icon-->
          <!--Main Menu-->
          <app-main-menu [layoutConfiguration]="layoutConfiguration" class="d-flex computer only ml-auto" [showBackButton]="showBackButton">
          </app-main-menu>
          <!--/Main Menu-->
          <a class="profile-avtar p-0 mx-16">
            <app-in-app-notification *ngIf="userService?.loggedIn" [layoutConfiguration]="layoutConfiguration">
            </app-in-app-notification>
          </a>
          <!--Avtar Dropdown-->
          <a class="profile-avtar p-0">
            <div class="ui dropdown right top pointing">
              <div class="" name="Guest" *ngIf='!userProfile && !guestUser' tabindex="0" (click)="toggleSideMenu(true)"><img
                src="./assets/images/profile-icon.svg" alt="Guest User" width="48"></div>
                <sb-avatar tabindex="0"  *ngIf='!userProfile && guestUser' (click)="toggleSideMenu(true)" class ="avtarDesktopStyle"
                    [config]=avatarConfig initialsSize="2" [initial]="guestUser?.formatedName[0] || 'G'"
                    [title]="guestUser?.formatedName || 'Guest'">
                  </sb-avatar>
                  <sb-avatar tabindex="0" *ngIf='userProfile' (click)="toggleSideMenu(true)" 
                     [config]=avatarConfig initialsSize="2" [initial]="userProfile?.firstName[0]"
                    [title]="userProfile?.firstName">
                  </sb-avatar>
            </div>
          </a>
          <!--/Avtar Dropdown-->
        </div>
      </div>
    </div>
    <!--Header White Section-->
    <!--Header Blue Section-->
    <!--Computer-->
    <div class="sb-header-bg p-8 px-16"
      *ngIf="(showExploreHeader || userService.loggedIn && !showOfflineHelpCentre) && !router.url.includes('/contribute/program')">
      <ng-container *ngIf="contributeTabActive else defaultView">
        <div class="ui container d-flex flex-ai-center mx-0 px-8">
          <span class="fs-1 sb-color-white py-8">{{resourceService?.frmelmnts?.lbl?.availableForContribution}}</span>
        </div>
      </ng-container>
      <ng-template #defaultView>
        <div class="ui container d-flex flex-ai-center mx-0">
          <!--QR Button-->
          <button class="ui button qr-code-btn d-flex flex-ai-center computer only mr-0" appTelemetryInteract
            [telemetryInteractEdata]="enterDialCodeInteractEdata" (click)="showQrmodal = true;"
            title="{{resourceService.frmelmnts?.lbl?.enterQrCode}}" tabindex="0" *ngIf="!hideHeader">
            <i class="icon-svg icon-svg--xxs icon-qrcode mr-4"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#qr-code-icon"></use>
              </svg></i>
            <span>{{resourceService.frmelmnts?.lbl?.enterQrCode}}</span>
          </button>
          <!--/QR Button-->
          <!--Divider-->
          <span class="computer only search-qrcode-divider" *ngIf="!hideHeader"></span>
          <!--/Divider-->
          <!--Search Box-->
          <!--Logged in Pages-->
          <app-search [layoutConfiguration]="layoutConfiguration" class="sb-search-box b-0"
            *ngIf="!showExploreComponent && !hideHeader"
            [ngClass]="{'ml-auto mr-auto': searchBox.center, 'ml-0': !searchBox.center, 'small': searchBox.smallBox, 'large': searchBox.largeBox, 'medium': searchBox.mediumBox}">
          </app-search>
          <!--/Logged in Pages-->
          <!--Explore Pages-->
          <div class="sb-search-box b-0 large" *ngIf="showExploreComponent && !hideHeader"
            [ngClass]="{'ml-auto': searchBox.center, 'ml-0': !searchBox.center, 'small': searchBox.smallBox, 'large': searchBox.largeBox, 'medium': searchBox.mediumBox}">
            <div class="input-div relative">
              <!-- <i class="search icon"></i> -->
              <img src="assets/images/search-icon.svg" alt="Search Icon" class="search icon">
              <input type="text" id="keyword" name="filter_search" class="sb-search-input"
                title="{{resourceService?.frmelmnts?.prmpt?.search}}" [(ngModel)]='queryParam.key'
                placeholder="{{resourceService?.frmelmnts?.prmpt?.searchOrQr}}" tabindex="0"
                (keyup.enter)="onEnter(queryParam.key)" />
              <!-- <i class="close icon"></i> [(ngModel)]="key"
                <div class="sb-loader"></div> -->
            </div>
            <button appTelemetryInteract [telemetryInteractEdata]="getSearchButtonInteractEdata(queryParam.key)"
              class="sb-btn sb-btn-normal" (click)="onEnter(queryParam.key)"
              title="{{resourceService?.frmelmnts?.prmpt?.search}}" tabindex="0"
              tabindex="0">{{resourceService.frmelmnts?.lbl?.search}}</button>
          </div>
          <!--/Explore Pages-->
          <!--/Search Box-->
          <!--Load content -->
          <div class="computer only d-flex" *appDesktopOnly>
            <span class="search-qrcode-divider"></span>
            <button class="ui button qr-code-btn d-flex flex-ai-center sb-load-content-btn" type="button" (click)="showLoadContentModal=true" tabindex="0" > {{resourceService?.frmelmnts?.btn?.loadContent}} </button>
          </div>
          <!--/Load content -->
          <!--Language Dropdown-->
          <app-language-dropdown [layoutConfiguration]="layoutConfiguration" [languageRange]='languages'
            class="computer only ml-auto d-flex" *ngIf="isLanguageDropdown && languages && showLanguageDropdown()">
          </app-language-dropdown>
          <!--/Language Dropdown-->
        </div>
      </ng-template>
    </div>
    <!--/Computer-->
    <!--Mobile-->
    <div class="pt-8 px-16 mobile only"
      *ngIf="(showExploreHeader || userService.loggedIn && !showOfflineHelpCentre) && !contributeTabActive">
      <div class="ui mobile-view container d-flex flex-jc-space-between mx-0">
       <div class="mr-auto d-flex">
        <!--QR Button-->
        <button class="ui button qr-code-btn d-flex flex-ai-center" appTelemetryInteract
          [telemetryInteractEdata]="enterDialCodeInteractEdata" tabindex="0" (click)="showQrmodal = true;">
          <i class="icon-svg icon-svg--xxs icon-qrcode mr-4"><svg class="icon icon-svg--primary">
              <use xlink:href="./assets/images/sprite.svg#qr-code-icon"></use>
            </svg></i>
          <span class="d-flex flex-ai-center">
            {{resourceService.frmelmnts?.lbl?.enterQrCode}}
          </span>
        </button>
        <!--/QR Button-->
      <!--load content button-->
      <div *appDesktopOnly>
        <button class="ui button qr-code-btn d-flex flex-ai-center sb-load-content-btn ml-16" type="button"> {{resourceService?.frmelmnts?.btn?.loadContent}} </button>
      </div>
      <!--/load content button-->
       </div>
        <!--Language Dropdown-->
        <app-language-dropdown [layoutConfiguration]="layoutConfiguration" [languageRange]='languages'
          class="mobile only" *ngIf="languages && !router.isActive('workspace', false)">
        </app-language-dropdown>
        <!--/Language Dropdown-->
      </div>
    </div>
    <!--/Mobile-->
    <!--/Header Blue Section-->
  </div>
</div>

<div *ngIf="layoutConfiguration"
  [ngClass]="{'player-fullscreen-header': isFullScreenView}">
  <div class="sbt-header sbt-fluid-header-bg">
    <div class="sbt-container">
      <!--Header section-->
      <header>
        <div class="sbt-header-bar sb-g">
          <div class="sb-g-col-xs-12 sb-g-col-md-3 sb-g-col-lg-3 sb-g-col-xxxl-4 sbt-header-logo">
            <div class="d-flex flex-ai-center flex-jc-space-between w-100">
              <!--Logo-->
              <a class="logo sbt-logo" tabindex="0" title="{{tenantInfo.titleName}}" role="link"
                aria-label="Navigate to Homepage">
                <img (click)="navigateToHome()" class="cursor-pointer" alt={{tenantInfo.titleName}}
                  src="{{tenantInfo.logo}}">
              </a>
              <!--/Logo-->
              <div class="d-flex flex-ai-center sb-responsive-header">
                <!-- Notification dropdown -->
                <a class="profile-avtar p-0" tabindex="0">
                  <app-in-app-notification *ngIf="userService?.loggedIn" [layoutConfiguration]="layoutConfiguration">
                  </app-in-app-notification>
                </a>
                <!--Avtar Dropdown-->
                <a class="profile-avtar p-0">
                  <div class="ui dropdown right top pointing">
                    <div class="sbt-guest-profile" tabindex="0" name="Guest" *ngIf='!userProfile && !guestUser'
                      (click)="toggleSideMenu(true)"><img src="./assets/images/profile-icon.svg" alt="Guest User"
                        width="48"></div>
                <sb-avatar tabindex="0"  *ngIf='!userProfile && guestUser' (click)="toggleSideMenu(true)" class ="avtarDesktopStyle"
                    [config]=avatarConfig initialsSize="2" [initial]="guestUser?.formatedName[0] || 'G'"
                    [title]="guestUser?.formatedName || 'Guest'">
                </sb-avatar>
                  <sb-avatar tabindex="0" *ngIf='userProfile' (click)="toggleSideMenu(true)"  
                     [config]=avatarConfig initialsSize="2" [initial]="userProfile?.firstName[0]"
                    [title]="userProfile?.firstName">
                  </sb-avatar>
                  </div>
                </a>
                <!--/Avtar Dropdown-->
              </div>
            </div>

          </div>
          <div
            class="sb-g-col-xs-12 sb-g-col-md-4 sb-g-col-lg-5 sb-g-col-xxxl-8 sbt-header-tool-bar flex-jc-center relative">
            <div class="sbt-search-bar-panel">
              <app-search [layoutConfiguration]="layoutConfiguration" class="sbt-search-box large">
              </app-search>
            </div>
            <div class="search-box-dropdown-list">
              <div class="search-title"> search Sunbird for <span>"Social"</span>
              </div>
              <div class="dropdown-list-items">
                <div class="list-items">
                  <div class="list-item-title-section">
                    <img src="./assets/images/history_icon.svg" alt="history-image" class="history-icon mr-8">
                    <span class="history-title">10th class social science text book</span>\
                  </div>
                  <div class="search-icon">
                    <i class="icon-svg icon-svg--xxs">
                      <svg class="icon icon-svg--black">
                        <use xlink:href="assets/images/sprite.svg#search"></use>
                      </svg></i>
                  </div>
                </div>
                <div class="list-items">
                  <div class="list-item-title-section">
                    <img src="./assets/images/history_icon.svg" alt="history-image" class="history-icon mr-8">
                    <span class="history-title">10th class social science standard 2</span>
                  </div>
                  <div class="search-icon">
                    <i class="icon-svg icon-svg--xxs">
                      <svg class="icon icon-svg--black">
                        <use xlink:href="assets/images/sprite.svg#search"></use>
                      </svg></i>
                  </div>
                </div>
                <div class="list-items">
                  <div class="list-item-title-section">
                    <img src="./assets/images/history_icon.svg" alt="history-image" class="history-icon mr-8">
                    <span class="history-title">social</span>
                  </div>
                  <div class="search-icon">
                    <i class="icon-svg icon-svg--xxs">
                      <svg class="icon icon-svg--black">
                        <use xlink:href="assets/images/sprite.svg#search"></use>
                      </svg></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="sb-g-col-xs-12 sb-g-col-md-5 sb-g-col-lg-4 sb-g-col-xxxl-4 sbt-header-tool-bar">
            <div class="d-flex flex-ai-center sbt-dropdown-profile-area">
              <!-- language dropdown -->
              <app-language-dropdown [layoutConfiguration]="layoutConfiguration" [languageRange]='languages'
                *ngIf=" isLanguageDropdown && languages && showLanguageDropdown()">
              </app-language-dropdown>
              <!-- Notification dropdown -->
              <a class="profile-avtar p-0 ml-16">
                <app-in-app-notification *ngIf="userService?.loggedIn" [layoutConfiguration]="layoutConfiguration">
                </app-in-app-notification>
              </a>
              <!--Avtar Dropdown-->
              <a class="profile-avtar p-0 ml-16">
                <div class="ui dropdown right top pointing">
                  <div class="sbt-guest-profile" aria-haspopup="true" aria-controls="overlaySidebarID"
                    aria-label="Guest User" tabindex="0" name="Guest" *ngIf='!userProfile && !guestUser'
                    (click)="toggleSideMenu(true)"><img src="./assets/images/profile-icon.svg" alt="Guest User"
                      width="48"></div>
                  <sb-avatar aria-haspopup="true" aria-controls="overlaySidebarID" *ngIf='!userProfile && guestUser' tabindex="0"
                    (click)="toggleSideMenu(true)"  [config]=avatarConfig initialsSize="2" [initial]="guestUser?.formatedName[0] || 'G'"
                    [attr.aria-label]="'Welcome ' + (guestUser?.formatedName || 'Guest') + ', ' + 'Click here to continue to your profile'"
                    [attr.title]="'Welcome ' + (guestUser?.formatedName || 'Guest') + ', ' + 'Click here to continue to your profile'">
                  </sb-avatar>
                  <sb-avatar aria-haspopup="true" aria-controls="overlaySidebarID" *ngIf='userProfile' tabindex="0"
                    (click)="toggleSideMenu(true)" [config]=avatarConfig initialsSize="2" [initial]="userProfile?.firstName[0]"
                    title="'Welcome ' + userProfile?.firstName + ', ' + 'Click here to continue to your profile'"
                    [attr.title]="userProfile?.firstName">
                  </sb-avatar>
                </div>
              </a>
              <!--/Avtar Dropdown-->
            </div>
          </div>
        </div>
      </header>
      <nav title="menu-bar">
        <div class="sbt-header-menu-bar" *ngIf="showMainMenuBar">
          <!--  sb-g <div class="sb-g-col-xs-12 sb-g-col-md-3 sb-g-col-lg-3 sb-g-col-xxxl-4"></div>
          <div class="sb-g-col-xs-12 sb-g-col-md-9 sb-g-col-lg-9  sb-g-col-xxxl-12 sbt-header-menu-extension"></div> -->
          <div class="sbt-header-menu">
            <app-main-menu [layoutConfiguration]="layoutConfiguration" [showBackButton]="showBackButton">
            </app-main-menu>
          </div>
          <div class="ui container d-flex flex-ai-center" *ngIf="showBackButton">
            <button (click)="backButton.goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" type="button"
              attr.aria-label=“{{resourceService?.frmelmnts?.btn?.back}}”><i
                class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
                  <use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
                </svg></i><span>{{resourceService?.frmelmnts?.btn?.back}}</span> </button>
            <div class="d-flex flex-dc ml-16">
              <h4 class="mb-4 explore-title text-capitalize">{{showingResult}}</h4>
              <div class="fsmall"></div>
              <div class="explore-description-info">{{showingDescription}}</div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>

<div class="overlay-sidebar" *ngIf="showSideMenu">
  <div class="overlay-sidebar__menu" tabindex="0" role="dialog" id="overlaySidebarID" aria-labelledby="dialog1_label" aria-modal="true" aria-label="open sidebar navigation">
    <div class="profile__info">
      <em class="icon-svg icon-svg--xs icon-close" role="button" aria-label="Close sidebar navigation" title="Close sidebar" tabindex="0"
        (click)="toggleSideMenu(false)">
        <svg class="icon icon-svg--gray">
          <use xlink:href="./assets/images/sprite.svg#close"></use>
        </svg>
      </em>

      <div *ngIf="userService.loggedIn">
        <div class="mb-16">
          <sb-member-card [config]=cardConfig [initial]="userProfile?.firstName[0]" tabindex="0"
            [title]="userProfile?.firstName" [isMenu]="false">
          </sb-member-card>
        </div>
        <div class="fsmall sb-color-gray-400 my-12 profile__info__desc text-left">
          {{resourceService.frmelmnts?.lbl?.useInstanceAs | interpolate:'{instance}': instance}}
        </div>

        <div appOnlineOnly (click)="toggleSideMenu(false);navigate('/profile/create-managed-user')"
        role="button" tabindex="0" class="add-user mb-16" *ngIf="totalUsersCount <1">
          <div class="add-user__icon">
            <img src="assets/images/user-circle.svg" alt="Add user">
          </div>
          <div class="add-user__label fnormal sb-color-secondary">
            {{resourceService.frmelmnts?.lbl?.addUser}}
          </div>
        </div>

        <div appOnlineOnly class="d-flex flex-w-wrap">
          <sb-member-list tabindex="0" [layoutConfig]=memberCardConfig [memberList]="userListToShow" [isMenu]="false"
            (cardClick)="switchUser($event)">
          </sb-member-list>
          <div class="more-user ml-16 mt-8" *ngIf="totalUsersCount >2" role="button" tabindex="0" attr.aria-label="More Users"
            (click)="toggleSideMenu(false);navigate('/profile/choose-managed-user')">
            <div class="more-user__btn"><img src="/assets/images/more.svg" alt="More"></div>
            <div class="more-user__label"> {{resourceService.frmelmnts?.lbl?.more}}
              ({{totalUsersCount - userListToShow.length}})
            </div>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="userService?.loggedIn">
      <div class="profile__actions">
        <div appOnlineOnly class="add-user add-user--horizontal" tabindex="0" aria-label="Add User" role="button" *ngIf="totalUsersCount >=1"
          (click)="toggleSideMenu(false);navigate('/profile/create-managed-user')">
          <div class="add-user__icon">
            <img src="assets/images/user-circle.svg" alt="Add user">
          </div>
          <div class="add-user__label fnormal sb-color-secondary">
            {{resourceService.frmelmnts?.lbl?.addAnotherUser}}
          </div>
        </div>
        <ul class="profile__actions__list pl-0">
          <div class="mobile only" *ngIf="!layoutConfiguration" tabindex="0">
            <app-content-type [layoutConfiguration]="layoutConfiguration" (closeSideMenu)="toggleSideMenu(false)">
            </app-content-type>
          </div>

          <li class="list-item" tabindex="0" role="link" (click)="toggleSideMenu(false)" routerLink="profile">
            <i class="icon-svg icon-svg--sm icon-profileuser mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#profileuser"></use>
              </svg></i>
            {{resourceService.frmelmnts?.lnk?.profile}}
          </li>

          <li class="list-item" role="link" *ngIf="userType=='administrator' || showReportMenu" tabindex="0" [routerLink]="['/solution/solution-listing']" (click)="toggleSideMenu(false);" >
            <i class="icon-svg icon-svg--sm icon-profileuser mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/statistics.svg#Layer_1"></use>
              </svg></i>
            {{resourceService.frmelmnts?.lnk?.report}}
          </li>

          <li class="list-item" tabindex="0" role="link" *ngIf='!isDesktopApp && permissionService.permissionAvailable'
            appPermission [permission]='adminDashboard' (click)="toggleSideMenu(false)"
            [routerLink]="reportsListVersion === 'v2' ? 'dashBoard/reports': 'dashBoard/organization' ">
            <i class="icon-svg icon-svg--sm icon-dashboard mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#dashboard"></use>
              </svg></i>
            {{resourceService.frmelmnts?.lnk?.dashboard}}
          </li>
        
          <li class="list-item" *ngIf='!isDesktopApp && permissionService.permissionAvailable' appPermission
          [permission]='programDashboardRole' (click)="toggleSideMenu(false)" routerLink="program">
          <i class="icon-svg icon-svg--sm icon-dashboard mr-8"><svg class="icon icon-svg--primary">
              <use xlink:href="./assets/images/sprite.svg#dashboard"></use>
            </svg></i>
            {{resourceService.frmelmnts?.lnk?.programDashboard}}
        </li>

          <li class="list-item" tabindex="0" role="link" (click)="toggleSideMenu(false)"
            *ngIf='!isDesktopApp && permissionService.permissionAvailable' appPermission [permission]='orgSetupRole'
            routerLink="org/orgType">
            {{resourceService.frmelmnts?.lbl?.orgtypes}}
          </li>
          <li class="list-item" tabindex="0" role="link" *ngIf='!isValidCustodianOrgUser && !isDesktopApp'
            (click)="toggleSideMenu(false);showAccountMergemodal = true;">
            <i class="icon-svg icon-svg--sm icon-mergeaccount mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#mergeaccount"></use>
              </svg></i>
            {{resourceService.frmelmnts?.lbl?.mergeAccount}}
          </li>
          <li class="list-item" tabindex="0" role="link" (click)="toggleSideMenu(false)"
            *ngIf='!isDesktopApp && permissionService.permissionAvailable' appPermission [permission]='orgAdminRole'
            routerLink="manage">
            <i class="icon-svg icon-svg--sm icon-manage mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#manage"></use>
              </svg></i>
            {{resourceService.frmelmnts?.lbl?.manage}}
          </li>

          <li class="list-item" tabindex="0" (click)="toggleSideMenu(false)" *ngIf='!isDesktopApp && permissionService.permissionAvailable'
            appPermission [permission]='orgAdminRole' routerLink="uci-admin">
            <i class="icon-svg icon-svg--sm icon-manage mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#Admin-icon"></use>
              </svg></i>
            {{resourceService.frmelmnts?.lbl?.communicationConsole}} 
          </li>

          <li class="list-item" role="link" appOnlineOnly (click)="toggleSideMenu(false)"
            [class.active]="router.isActive(routerLinks?.groups,false)" tabindex="0"
            *ngIf="!router.isActive('', true) && !isDesktopApp" [routerLink]="[navigateToGroups()]" appTelemetryInteract
            [telemetryInteractEdata]="myGroupIntractEData">
            <i class="icon-svg icon-svg--sm icon-groups mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#groups"></use>
              </svg></i>
            {{resourceService?.frmelmnts?.tab?.mygroups}} <span class="group__type mx-8">New</span>
          </li>

          <li class="list-item"  role="link" [class.active]="router.isActive('/workspace',false)" appTelemetryInteract
            [telemetryInteractEdata]="workspaceMenuIntractEdata" (click)="toggleSideMenu(false)"
            *ngIf='!isDesktopApp && isLayoutAvailable() && permissionService.permissionAvailable' appPermission
            [permission]='workSpaceRole' [routerLink]="[navigateToWorkspace()]" tabindex="0">
            <i class="icon-svg icon-svg--sm icon-workspace mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#workspace"></use>
              </svg></i>
            {{resourceService?.frmelmnts?.tab?.workspace}}
          </li>
          <li class="list-item" role="link" tabindex="0" appTelemetryInteract [telemetryInteractEdata]="helpMenuIntractEdata"
            (click)="toggleSideMenu(false);navigate('/faq')">
            <i class="icon-svg icon-svg--sm icon-help mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#help"></use>
              </svg></i>
            {{resourceService?.frmelmnts?.tab?.help}}
          </li>
          <li  *ngIf="showSwitchTheme" class="list-item" role="link" tabindex="0" (click)="toggleSideMenu(false);switchLayout()">
            <i class="icon-svg icon-svg--sm icon-login mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#switchlayout"></use>
              </svg></i>
            <span *ngIf="layoutConfiguration">{{resourceService?.frmelmnts?.lbl?.switchToOldLayout}}</span>
            <span *ngIf="!layoutConfiguration">{{resourceService?.frmelmnts?.lbl?.switchToJoyLayout}}</span>
          </li>
          <li class="list-item" role="link" tabindex="0" (click)="toggleSideMenu(false);" routerLink="/desktop/telemetry"
            *appDesktopOnly>
            <i class="icon-svg icon-svg--sm icon-manage mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#sync"></use>
              </svg></i>
            <span>{{resourceService?.frmelmnts?.lbl?.desktop?.syncTelemetry}}</span>
          </li>
          <li class="list-item hide" role="link" tabindex="0" (click)="toggleSideMenu(false);">
            <i class="icon-svg icon-svg--sm icon-login mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#switchlayout"></use>
              </svg></i>
            {{resourceService?.frmelmnts?.lbl?.accessible}}
          </li>

          <li appOnlineOnly class="list-item" role="link" tabindex="0" appTelemetryInteract
            [telemetryInteractEdata]="getLogoutInteractEdata()" (click)="toggleSideMenu(false);logout()">
            <i class="icon-svg icon-svg--sm icon-logout mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#logout"></use>
              </svg></i>
            {{resourceService.frmelmnts?.lnk?.logout}}
          </li>
          <li *appDesktopOnly class="list-item" role="link" tabindex="0" (click)="toggleSideMenu(false);" appTelemetryInteract
            [telemetryInteractEdata]="aboutUsEdata" routerLink="/desktop/about-us">
            <i class="icon-svg icon-svg--sm icon-login mr-8"><svg class="icon icon-svg--primary">
                <use xlink:href="./assets/images/sprite.svg#profileuser"></use>
              </svg></i>
            {{resourceService?.frmelmnts?.lbl?.desktop?.about_us | interpolate:'{instance}': instance}}
          </li>
        </ul>
      </div>
    </div>
    <ng-container>
      <div *ngIf="!userService.loggedIn">
        <div class="mb-16">
          <sb-member-card [config]=cardConfig tabindex="0" [initial]="guestUser?.formatedName[0] || 'G'"
            [title]="guestUser?.formatedName || 'Guest'">
          </sb-member-card>
        </div>
        <div class="profile__actions">
          <ul class="profile__actions__list pl-0">

            <div class="mobile only" *ngIf="!layoutConfiguration" tabindex="0">
              <app-content-type [layoutConfiguration]="layoutConfiguration" (closeSideMenu)="toggleSideMenu(false)">
              </app-content-type>
            </div>
            <li class="list-item" tabindex="0" role="link" (click)="toggleSideMenu(false)" routerLink="guest-profile">
              <i class="icon-svg icon-svg--sm icon-profileuser mr-8"><svg class="icon icon-svg--primary">
                  <use xlink:href="./assets/images/sprite.svg#profileuser"></use>
                </svg></i>
              {{resourceService.frmelmnts?.lnk?.profile}}
            </li>
            <li appOnlineOnly class="list-item" role="link" tabindex="0" (click)="toggleSideMenu(false)"
              [class.active]="router.isActive(routerLinks?.explore,false)" *ngIf="!router.isActive('', true) && !isDesktopApp"
              [routerLink]="[navigateToGroups()]" appTelemetryInteract [telemetryInteractEdata]="myGroupIntractEData">
              <i class="icon-svg icon-svg--sm icon-groups mr-8"><svg class="icon icon-svg--primary">
                  <use xlink:href="./assets/images/sprite.svg#groups"></use>
                </svg></i>
              {{resourceService?.frmelmnts?.tab?.mygroups}} <span class="group__type mx-8">New</span>
            </li>
            <li  *ngIf="showSwitchTheme" class="list-item" tabindex="0" role="link" (click)="toggleSideMenu(false);switchLayout()">
              <i class="icon-svg icon-svg--sm icon-login mr-8"><svg class="icon icon-svg--primary">
                  <use xlink:href="./assets/images/sprite.svg#switchlayout"></use>
                </svg></i>
              <span *ngIf="layoutConfiguration">{{resourceService?.frmelmnts?.lbl?.switchToOldLayout}}</span>
              <span *ngIf="!layoutConfiguration">{{resourceService?.frmelmnts?.lbl?.switchToJoyLayout}}</span>
            </li>
            <li class="list-item" tabindex="0" role="link" (click)="toggleSideMenu(false);" routerLink="/desktop/telemetry"
              *appDesktopOnly>
              <i class="icon-svg icon-svg--sm icon-manage mr-8"><svg class="icon icon-svg--primary">
                  <use xlink:href="./assets/images/sprite.svg#sync"></use>
                </svg></i>
              <span>{{resourceService?.frmelmnts?.lbl?.desktop?.syncTelemetry}}</span>
            </li>
            <li class="list-item" tabindex="0" role="link" appTelemetryInteract [telemetryInteractEdata]="helpMenuIntractEdata"
              (click)="toggleSideMenu(false);navigate('/faq')">
              <i class="icon-svg icon-svg--sm icon-help mr-8"><svg class="icon icon-svg--primary">
                  <use xlink:href="./assets/images/sprite.svg#help"></use>
                </svg></i>
              {{resourceService?.frmelmnts?.tab?.help}}
            </li>
            <li *ngIf="!isDesktopApp" tabindex="0" role="link" class="list-item hide" (click)="toggleSideMenu(false)">
              <i class="icon-svg icon-svg--sm icon-login mr-8"><svg class="icon icon-svg--primary">
                  <use xlink:href="./assets/images/sprite.svg#switchlayout"></use>
                </svg></i>
              {{resourceService?.frmelmnts?.lbl?.accessible}}
            </li>
            <li *ngIf="isDesktopApp" tabindex="0" role="link" class="list-item hide" (click)="toggleSideMenu(false)" appOnlineOnly>
              <i class="icon-svg icon-svg--sm icon-login mr-8"><svg class="icon icon-svg--primary">
                  <use xlink:href="./assets/images/sprite.svg#switchlayout"></use>
                </svg></i>
              {{resourceService?.frmelmnts?.lbl?.accessible}}
            </li>
            <li *ngIf="!isDesktopApp" tabindex="0" role="link" class="list-item p-0" (click)="toggleSideMenu(false);clearFiltersCache()"
              appTelemetryInteract [telemetryInteractEdata]="signInIntractEdata">
              <a appOnlineOnly href={{hrefPath}} class="d-flex flex-ai-center list-item-a">
                <i class="icon-svg icon-svg--sm icon-login mr-8"><svg class="icon icon-svg--primary">
                    <use xlink:href="./assets/images/sprite.svg#login"></use>
                  </svg></i>
                {{resourceService.frmelmnts?.btn?.login}}
              </a>
            </li>
            <li class="list-item p-0" tabindex="0" role="link" (click)="toggleSideMenu(false)" appTelemetryInteract
              [telemetryInteractEdata]="signInIntractEdata" *appDesktopOnly appOnlineOnly>
              <a appOnlineOnly (click)="doLogin()" class="d-flex flex-ai-center list-item-a">
                <i class="icon-svg icon-svg--sm icon-login mr-8"><svg class="icon icon-svg--primary">
                    <use xlink:href="./assets/images/sprite.svg#login"></use>
                  </svg></i>
                {{resourceService.frmelmnts?.btn?.login}}
              </a>
            </li>
            <li *appDesktopOnly class="list-item" role="link" tabindex="0" (click)="toggleSideMenu(false);" appTelemetryInteract
              [telemetryInteractEdata]="aboutUsEdata" routerLink="/desktop/about-us">
              <i class="icon-svg icon-svg--sm icon-login mr-8"><svg class="icon icon-svg--primary">
                  <use xlink:href="./assets/images/sprite.svg#profileuser"></use>
                </svg></i>
              {{resourceService?.frmelmnts?.lbl?.desktop?.about_us | interpolate:'{instance}': instance}}
            </li>

          </ul>
        </div>
      </div>
    </ng-container>
  </div>
</div>

<app-load-offline-content [hideLoadButton]="true" (close)="showLoadContentModal=false" *ngIf="showLoadContentModal">
</app-load-offline-content>

./main-header.component.scss

@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use "layout/header" as *;

.sb-header-bg{
  background: var(--sb-header-bg) !important;
}

.overlay-sidebar,
.overlay-sidebar__menu {
  position: fixed;
  top: 0;
  height: 100%;
}

.overlay-sidebar {
  width: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  display: block;
  z-index: 99999;
  background: rgba(var(--sbt-sidemenu-overlay-bg), 0.4); //--rc-rgba-black

  &__menu {
    width: calculateRem(400px);
    right: 0;
    background: var(--sbt-sidemenu-bg);
    z-index: 100000;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: calculateRem(-6px) 0 calculateRem(10px) 0 rgba(var(--rc-rgba-black), 0.1);
  }
}

.profile {
  &__info {
    padding: calculateRem(40px) calculateRem(16px) calculateRem(8px) calculateRem(16px);
    background-color: var(--sidebar-profil-header-bg);
    position: relative;

    .icon-close {
      position: absolute;
      top: calculateRem(16px);
      left: calculateRem(16px);
      cursor: pointer;
    }

    &__desc {
      padding: 0 0.5rem;
    }
  }

  &__actions {
    &__list {

      .list-item {
        margin: 0 0 0 0;
        padding: calculateRem(16px) calculateRem(20px);
        cursor: pointer;
        display: flex;
        align-items: center;
        color: var(--primary-color);
        a {
          padding: calculateRem(16px) calculateRem(20px);
          width: 100%;
          display: flex;
          align-items: center;
          &:hover {
            text-decoration: none;
          }
        }
        img {
          width: calculateRem(24px);
          height: calculateRem(24px);
          margin-right: calculateRem(8px);
        }

        &:hover,
        &.active {
          background-color: var(--sidebar-profil-header-bg);
        }
      }
    }
  }
}


.add-user {
  display: inline-block;
  text-align: center;
  cursor: pointer;

  &__icon {
    width: calculateRem(32px);
    height: calculateRem(32px);
    display: inline-block;

    img {
      max-width: 100%;
    }
  }

  &__label {
    margin-top: calculateRem(9px);
  }

  &--horizontal {
    display: flex;
    align-items: center;
    padding: calculateRem(4px) calculateRem(16px);
    background-color: var(--rc-bfe1cf);

    .add-user__label {
      margin-top: 0;
      margin-left: calculateRem(8px);
    }
  }
}

.more-user {
  text-align: center;
  cursor: pointer;

  &__btn {
    width: calculateRem(32px);
    height: calculateRem(32px);
    background: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 calculateRem(3px) 0 rgba(var(--rc-rgba-black), 0.1);

    img {
      max-width: 100%;
    }
  }

  &__label {
    font-size: var(--font-size-base);
    ;
    margin-top: calculateRem(8px);
  }
}

.my-avatar ::ng-deep .avatar-content {
  background-color: var(--red) !important;
}

@include respond-below(sm) {
  .profile__info {
    // padding: calculateRem(16px);

    .icon-close {
      right: calculateRem(16px);
      left: unset;
      z-index: 9999;
    }

    .user {
      flex-wrap: wrap;
      margin-bottom: calculateRem(8px) !important;

      &__name {
        width: 100%;
        margin-left: 0 !important;
      }
    }

    &__desc {
      margin-bottom: calculateRem(8px) !important;
    }
  }
}

@include respond-below(xs) {
  .overlay-sidebar__menu {
    width: 88%;
    left: 0;
    right: unset;
  }
}

//sb member card styles from CC 
.sb-member {
  display: flex;
  align-items: center;
  cursor: pointer;

  // Size variations
  &--small {
    .sb-member__img {
      width: calculateRem(32px);
      height: calculateRem(32px);
      font-size: calculateRem(20px);
    }

    .sb-member__name {
      font-size: calculateRem(14px);
    }
  }

  &--medium {
    .sb-member__img {
      width: calculateRem(48px);
      height: calculateRem(48px);
      font-size: calculateRem(34px);
    }

    .sb-member__name {
      font-size: calculateRem(16px);
    }
  }

  &--large {
    .sb-member__img {
      width: calculateRem(64px);
      height: calculateRem(64px);
      font-size: calculateRem(38px);
    }

    .sb-member__name {
      font-size: calculateRem(18px);
    }
  }

  // font weight bold and normal
  &--font-bold {
    .sb-member__name {
      font-weight: bold;
    }
  }

  // View variations
  &--horizontal {
    flex-direction: row;

    .sb-member__name {
      margin: 0 0 0 calculateRem(8px);
    }
  }

  &--vertical {
    flex-direction: column;

    .sb-member__name {
      margin: calculateRem(8px) 0 0 0;
      text-align: center;
    }
  }

  // avatar first letter
  &__img {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--white);
    box-shadow: 0 0 calculateRem(6px) 0 rgba(var(--rc-rgba-black), 0.1);
    font-weight: bold;
  }

  // avatar name
  &__name {
    font-weight: normal;
    cursor: pointer;
  }

}

:host ::ng-deep {
  .group__type {
    margin-left: 1.5rem;
    background: var(--red-100);
    position: relative;
    height: 1.25rem;
    padding: 0 .25rem 0 0.5rem;
    color: var(--white);
    margin-right: -.5rem;
    font-size: .6875rem;
    display: flex;
    align-items: center;
    font-weight: normal;
    html[dir="rtl"] & {
      padding: 0 .5rem 0 0.25rem;
    }
  }
  
  .group__type:after {
    content: "";
    width: 0;
    height: 0;
    border-width: .625rem .3125rem;
    border-style: solid;
    border-color: var(--red-100) transparent var(--red-100) var(--red-100);
    position: absolute;
    right: -.625rem;
    html[dir="rtl"] & {
      left: -.6rem;
      right: inherit;
      transform: rotate(180deg);
    }
  }
}


__textbooks {
  -webkit-mask-image: url(/assets/images/mask-image/textbooks.svg);
  mask-image: url(/assets/images/mask-image/textbooks.svg);
}

:host ::ng-deep {
  @include respond-below(sm) {
    html[layout='joy'] {
      .sbt-dropdown-profile-area,
      app-language-dropdown {
        width: 100%;
      }
      .ui.selection.sbt-dropdown.dropdown {
        min-width: 100%;
      }
    }
  }
}

.sbt-logo {
  height: calculateRem(80px);
  display:flex;
  align-items: center;
  img {
    min-height: 65%;
    height: 80%;
  }
}

.sb-load-content-btn{
  line-height: 0.5;
}

.explore-description-info{
  color: var(--gray-800);
    font-size: calculateRem(14px);
    letter-spacing: 0;
    line-height: calculateRem(19px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 74vw;
}

.explore-title {
  font-weight: bold;
}