D-Net

<div>

  <div class="uk-offcanvas-content">

    <!--MOBILE & PAD PORTRAIT-->

    <div class="tm-header-mobile uk-hidden@m">

      <ng-container *ngIf="isHomeRoute() ; else smallHeader">

        <div class="uk-hidden@m">

          <a href="/"><img alt="BETA" class="medium-beta-indication-nonFixed" src="../../../assets/img/beta_flag.svg"></a>

        </div>

        <nav class="uk-navbar-container uk-navbar" uk-navbar>

          <div class="uk-navbar-right">

            <ul class="uk-navbar-nav">

              <li>

                <a class="" href="#">

                  <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">

                  </div>

                </a>

                <div class="uk-navbar-dropdown">

                  <ul class="uk-nav uk-navbar-dropdown-nav">

                    <li class="uk-active"><a routerLink="/home">Home</a></li>

                    <li class="uk-active"><a [routerLink]="['/overview','europe']">OA in Europe</a></li>

                    <!--<li class="uk-active"><a href="#">About</a></li>-->

                    <li class="uk-active"><a routerLink="/methodology">Methodology</a></li>

                    <!--<li class="uk-nav-divider"></li>-->

                    <!--<li class="uk-active"><a routerLink="/home">Sign In</a></li>-->

                  </ul>

                </div>

              </li>

            </ul>

          </div>

        </nav>

        <nav class="uk-navbar-container uk-navbar" uk-navbar="">

          <div class="uk-navbar-center">

            <a class="uk-navbar-item uk-logo" routerLink="/home">

              <img src="../../../assets/img/OS_Logo_Vertical.svg" alt="Open Science Observatory" width="161"

                   class="uk-responsive-height"> </a>

          </div>

        </nav>

      </ng-container>

      <ng-template #smallHeader>

        <div class="uk-hidden@m">

          <a href="/"><img alt="BETA" class="medium-beta-indication-fixed" src="../../../assets/img/beta_flag.svg"></a>

        </div>

        <nav class="uk-navbar-container uk-navbar smallHeader" uk-navbar>

          <div class="uk-navbar-left">

            <a class="uk-navbar-item uk-logo" routerLink="/home">

              <img src="../../../assets/img/OS_Logo_small.svg" alt="Open Science Observatory" width="36"

                   class="uk-responsive-height"> </a>

          </div>

          <div class="uk-navbar-center">

            <div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry">

              <span id="search-icon" uk-search-icon></span>

              <ng-autocomplete

                [data]="countriesCollection"

                [searchKeyword]="keyword"

                placeHolder="Search for a country..."

                (selected)='selectCountryFromAutocompleteEvent($event)'

                (inputChanged)='onChangeSearch($event)'

                (inputFocused)='onFocused($event)'

                historyIdentifier="countriesCollection"

                [itemTemplate]="itemTemplate"

                [notFoundTemplate]="notFoundTemplate">

              </ng-autocomplete>

              <ng-template #itemTemplate let-item>

                <a [innerHTML]="item.name"></a>

              </ng-template>

              <ng-template #notFoundTemplate let-notFound>

                <div [innerHTML]="notFound"></div>

              </ng-template>

            </div>

            <!--<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">-->

            <!--<span uk-search-icon></span>-->

            <!--<input class="uk-search-input" type="search" placeholder="Search for a country...">-->

            <!--&lt;!&ndash;<input type="text">&ndash;&gt;-->

            <!--</div>-->

          </div>

          <div class="uk-navbar-right">

            <ul class="uk-navbar-nav">

              <li>

                <a class="" href="#">

                  <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">

                  </div>

                </a>

                <div class="uk-navbar-dropdown">

                  <ul class="uk-nav uk-navbar-dropdown-nav">

                    <li class="uk-active"><a routerLink="/home">Home</a></li>

                    <li class="uk-active"><a [routerLink]="['/overview', 'europe']">OA in Europe</a></li>

                    <!--<li class="uk-active"><a href="#">About</a></li>-->

                    <li class="uk-active"><a routerLink="/methodology">Methodology</a></li>

                    <!--<li class="uk-nav-divider"></li>-->

                    <!--<li class="uk-active"><a routerLink="/home">Sign In</a></li>-->

                  </ul>

                </div>

              </li>

            </ul>

          </div>

        </nav>

      </ng-template>

    </div>

    <!--LAPTOP & PAD LANDSCAPE-->

    <div class="uk-visible@m">

      <a href="/"><img alt="BETA" class="large-beta-indication" src="../../../assets/img/beta_flag.svg"></a>

    </div>

    <div class="tm-header uk-visible@m tm-header-transparent" uk-header="">

      <div class="uk-navbar-container uk-sticky uk-navbar-transparent" uk-sticky="top:0" media="768"

           cls-active="uk-active uk-navbar-sticky" style="" animation="uk-animation-slide-top"

           top=".tm-header + [class*="uk-section"]" cls-inactive="uk-navbar-transparent">

        <div class="uk-container uk-container-expand">

          <nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;}">

            <div class="uk-navbar-left">

              <a routerLink="/home" class="uk-logo uk-navbar-item">

                <img src="../../../assets/img/OS_Logo_Horizontal.svg" alt="Open Science Observatory" class="uk-responsive-height">

              </a>

            </div>

            <div class="uk-navbar-right">

              <ul class="uk-navbar-nav" >

                <li class="uk-parent" [routerLinkActive]="['uk-active']">

                  <a routerLink="/home" [routerLinkActive]="['uk-active']">

                    Home

                  </a>

                </li>

                <li class="uk-parent" [routerLinkActive]="['uk-active']">

                  <a [routerLink]="['/overview', 'europe']" [routerLinkActive]="['uk-active']">

                    OA in Europe

                  </a>

                </li>

                <li class="uk-parent" [routerLinkActive]="['uk-active']">

                  <a routerLink="/methodology" [routerLinkActive]="['uk-active']">

                    Methodology

                  </a>

                </li>

                <!--<li class="uk-parent" [routerLinkActive]="['uk-active']">-->

                  <!--<a routerLink="/home" [routerLinkActive]="['uk-active']">-->

                    <!--Sign In-->

                  <!--</a>-->

                <!--</li>-->

              </ul>

            </div>

          </nav>

        </div>

      </div>

      <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" hidden="hidden"></div>

    </div>

  </div>

</div>