Hdf

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "editor.formatOnSave": true
-}
+  "editor.formatOnSave": false
+}

apps/datahub/src/app/app.module.ts

@@ -54,12 +54,13 @@ import { AppComponent } from './app.component'
 import { HeaderBadgeButtonComponent } from './home/header-badge-button/header-badge-button.component'
 import { HomeHeaderComponent } from './home/home-header/home-header.component'
 import { HomePageComponent } from './home/home-page/home-page.component'
+import { NavigationApproachComponent } from './home/navigation-approach/navigation-approach.component'
 import { KeyFiguresComponent } from './home/news-page/key-figures/key-figures.component'
 import { LastCreatedComponent } from './home/news-page/last-created/last-created.component'
 import { NewsPageComponent } from './home/news-page/news-page.component'
 import { OrganisationsPageComponent } from './home/organisations-page/organisations-page.component'
-import { SearchPageComponent } from './home/search/search-page/search-page.component'
 import { SearchFiltersComponent } from './home/search/search-filters/search-filters.component'
+import { SearchPageComponent } from './home/search/search-page/search-page.component'
 import { HeaderRecordComponent } from './record/header-record/header-record.component'
 import { NavigationBarComponent } from './record/navigation-bar/navigation-bar.component'
 import { RecordPageComponent } from './record/record-page/record-page.component'
@@ -83,6 +84,8 @@ import { RecordApisComponent } from './record/record-apis/record-apis.component'
 import { MatTabsModule } from '@angular/material/tabs'
 import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { RecordUserFeedbacksComponent } from './record/record-user-feedbacks/record-user-feedbacks.component'
+import { LinkMenuComponent } from './home/link-menu/link-menu.component'
+import { ThematicListComponent } from './home/news-page/themes/thematic-list.component'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 
@@ -103,12 +106,15 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     LastCreatedComponent,
     KeyFiguresComponent,
     NavigationMenuComponent,
+    NavigationApproachComponent,
     RecordRelatedRecordsComponent,
     RecordUserFeedbacksComponent,
     RecordMetadataComponent,
     RecordOtherlinksComponent,
     RecordDownloadsComponent,
     RecordApisComponent,
+    LinkMenuComponent,
+    ThematicListComponent,
   ],
   imports: [
     BrowserModule,

apps/datahub/src/app/home/header-badge-button/header-badge-button.component.html

@@ -1,10 +1,4 @@
-<button
-  class="badge-btn bg-primary-opacity-50 hover-bg-primary-opacity-100"
-  [class.active]="toggled"
-  (click)="toggle()"
->
-  <mat-icon *ngIf="icon" class="material-symbols-outlined align-middle mr-2">{{
-    icon
-  }}</mat-icon>
+<button class="badge-btn hover-bg-primary-darker" [class.active]="toggled" (click)="toggle()">
+  <mat-icon *ngIf="icon" class="material-symbols-outlined align-middle mr-2">{{ icon }}</mat-icon>
   <span>{{ label | translate }}</span>
-</button>
+</button>

apps/datahub/src/app/home/home-header/home-header.component.css

@@ -4,3 +4,22 @@
   background-color: white;
   box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
 }
+
+.bg-menu {
+  background-color: #ebebeb;
+}
+
+.container-title {
+  background-image: url('/assets/img/logo_header.webp');
+  min-height: 130px;
+  padding-left: 130px;
+  line-height: 130px;
+  background-repeat: no-repeat;
+  background-position: center left;
+}
+
+.container-title .font-title {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: normal;
+}

apps/datahub/src/app/home/home-header/home-header.component.html

@@ -1,84 +1,50 @@
-<header class="h-full px-5" [style.background]="backgroundCss">
-  <div
-    class="container-lg h-full mx-auto flex flex-col-reverse justify-between sm:flex-col sm:justify-end"
-  >
-    <div
-      class="py-8 relative z-40 mb-[184px] sm:mb-0"
-      [ngClass]="{ 'pointer-events-none': expandRatio < 0.2 }"
-      [style.transform]="'translate(0, ' + (1 - expandRatio) * 242 + 'px)'"
-    >
-      <div
-        data-cy="dh-title"
-        class="font-title text-[30px] absolute w-full sm:text-[48px] sm:leading-[58px]"
-        style="bottom: 100%"
-        [style.opacity]="expandRatio"
-        [innerHTML]="'datahub.header.title.html' | translate"
-      ></div>
-      <gn-ui-fuzzy-search
-        class="text-[18px] pointer-events-auto"
-        (itemSelected)="onFuzzySearchSelection($event)"
-        [autoFocus]="true"
-      ></gn-ui-fuzzy-search>
-      <div class="flex h-0 py-5 gap-3" [style.opacity]="-0.6 + expandRatio * 2">
-        <datahub-header-badge-button
-          [routerLink]="ROUTE_SEARCH"
-          *ngIf="isAuthenticated$ | async"
-          icon="star"
-          label="datahub.header.myfavorites"
-          [toggled]="searchFacade.favoritesOnly$ | async"
-          (action)="listFavorites($event)"
-        ></datahub-header-badge-button>
-        <div>
-          <button
-            type="button"
-            class="badge-btn bg-primary-opacity-50 hover-bg-primary-opacity-100"
-            (click)="clearSearchAndSort(SORT_BY_PARAMS.CREATE_DATE)"
-          >
-            <span translate="">datahub.header.lastRecords</span>
-          </button>
-        </div>
-        <div>
-          <button
-            type="button"
-            class="badge-btn bg-primary-opacity-50 hover-bg-primary-opacity-100"
-            (click)="clearSearchAndSort(SORT_BY_PARAMS.POPULARITY)"
-          >
-            <span translate="">datahub.header.popularRecords</span>
-          </button>
-        </div>
-        <div *ngFor="let preset of searchConfig?.SEARCH_PRESET">
-          <div>
-            <button
-              type="button"
-              class="badge-btn bg-primary-opacity-50 hover-bg-primary-opacity-100"
-              (click)="clearSearchAndFilterAndSort(preset)"
-            >
-              <span translate="">{{ preset['name'] }}</span>
-            </button>
-          </div>
-        </div>
+<header class="h-full" [style.background]="backgroundCss">
+  <div class="bg-menu px-5">
+    <div class="container-lg mx-auto">
+      <link-menu></link-menu>
+    </div>
+  </div>
+  <div class="bg-white px-5">
+    <div class="container-title container-lg mx-auto">
+      <div class="text-primary font-title text-[24px] sm:text-[32px]" [style.opacity]="expandRatio"
+        [innerHTML]="'datahub.header.title.html' | translate">
       </div>
     </div>
-    <!--
-    <div class="flex">
-      <datahub-header-badge-button
-        icon="star"
-        label="datahub.header.myfavorites"
-      ></datahub-header-badge-button>
-      <datahub-header-badge-button
-        class="mx-3"
-        label="datahub.header.connex"
-      ></datahub-header-badge-button>
+  </div>
+
+  <div class="bg-primary px-5">
+    <div class="container-lg mx-auto">
+      <datahub-navigation-menu class="tabs flex justify-between"
+        [style.opacity]="-0.6 + expandRatio * 5"></datahub-navigation-menu>
     </div>
--->
-    <div [style.opacity]="-0.6 + expandRatio * 5">
-      <datahub-navigation-menu
-        class="tabs flex justify-between font-medium -mx-5 sm:mx-0 sm:mt-32 inset-x-0 bottom-0 z-50"
-      ></datahub-navigation-menu>
+  </div>
+  <div class="bg-secondary px-5">
+    <div class="container-lg mx-auto py-8 relative z-40"
+      [style.transform]="'translate(0, ' + (1 - expandRatio) * 45 + 'px)'">
+      <ng-container *ngIf="displaySortBadges$ | async">
+        <div class="container-lg mx-auto">
+          <div class="text-white text-[24px]" [style.opacity]="expandRatio"
+            [innerHTML]="'header.everyDataHdf' | translate">
+          </div>
+        </div>
+        <gn-ui-fuzzy-search class="text-[18px]" (itemSelected)="onFuzzySearchSelection($event)"></gn-ui-fuzzy-search>
+        <div class="flex h-0 py-5 gap-3" [style.opacity]="-0.6 + expandRatio * 2">
+          <datahub-header-badge-button [routerLink]="ROUTE_SEARCH" *ngIf="isAuthenticated$ | async" icon="star"
+            label="datahub.header.myfavorites" [toggled]="searchFacade.favoritesOnly$ | async"
+            (action)="listFavorites($event)"></datahub-header-badge-button>
+          <div *ngFor="let preset of searchConfig?.SEARCH_PRESET">
+            <div>
+              <button
+                type="button"
+                class="badge-btn bg-primary-opacity-50 hover-bg-primary-opacity-100"
+                (click)="clearSearchAndFilterAndSort(preset)"
+              >
+                <span translate="">{{ preset['name'] }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-container>
     </div>
   </div>
-  <gn-ui-language-switcher
-    *ngIf="showLanguageSwitcher"
-    class="language-switcher absolute top-2.5 left-2.5 text-[13px]"
-  ></gn-ui-language-switcher>
 </header>

apps/datahub/src/app/home/home-page/home-page.component.html

@@ -1,5 +1,5 @@
 <div id="home-page">
-  <gn-ui-sticky-header [fullHeightPx]="560" [minHeightPx]="90">
+  <gn-ui-sticky-header [fullHeightPx]="400" [minHeightPx]="90">
     <ng-template let-expandRatio>
       <datahub-home-header [expandRatio]="expandRatio"></datahub-home-header>
     </ng-template>

apps/datahub/src/app/home/home-page/home-page.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'datahub-home-page',

apps/datahub/src/app/home/link-menu/link-menu.component.css

@@ -0,0 +1,20 @@
+ul {
+  padding:5px;
+  min-height: 30px;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+ul li {
+  list-style-type: none;
+  float: left;
+  color: #837f7f;
+  font-size: 12px;
+}
+
+ul li a {
+  padding: 0px 12px;
+}
+
+ul li:last-child {
+  float: initial;
+}

apps/datahub/src/app/home/link-menu/link-menu.component.html

@@ -0,0 +1,16 @@
+<ul>
+  <li class="li"><a href="https://www.hautsdefrance.fr/categorie/les-sites-web/" target="_blank">Tous les sites</a></li>
+  <li>|</li>
+  <li><a href="https://guide-aides.hautsdefrance.fr/" target="_blank">Guides des aides</a></li>
+  <li>|</li>
+  <li><a href="https://www.prochorientation.fr/" target="_blank">Proch'Orientation</a></li>
+  <li>|</li>
+  <li><a href="https://tv.hautsdefrance.fr/" target="_blank">La WebTv</a></li>
+  <li>|</li>
+  <li><a href="https://europe-en-hautsdefrance.eu/" target="_blank">L'Europe s'engage en Hauts-de-France</a></li>
+  <li>|</li>
+  <li><a href="https://www.hautsdefrance.fr/categorie/dossiers/marches-publics/" target="_blank">Marchés publics</a>
+  </li>
+  <li>|</li>
+  <li><a href="https://generation.hautsdefrance.fr/" target="_blank">Génération Hauts-de-France</a></li>
+</ul>

apps/datahub/src/app/home/link-menu/link-menu.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { LinkMenuComponent } from './link-menu.component'
+import { NO_ERRORS_SCHEMA } from '@angular/core'
+
+describe('LinkMenuComponent', () => {
+  let component: LinkMenuComponent
+  let fixture: ComponentFixture<LinkMenuComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LinkMenuComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(LinkMenuComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/home/link-menu/link-menu.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'link-menu',
+  templateUrl: './link-menu.component.html',
+  styleUrls: ['./link-menu.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LinkMenuComponent { }

apps/datahub/src/app/home/navigation-approach/navigation-approach.component.html

@@ -0,0 +1,50 @@
+<nav
+  class="mx-4 mt-5 bg-primary flex justify-between py-2 px-4 text-sm rounded-lg text-white sm:space-x-8 sm:px-20 sm:py-5"
+>
+  <button
+    type="button"
+    *ngFor="let l of anchorLinks"
+    gnUiAnchorLink="{{ l.anchor }}"
+    gnUiAnchorLinkDisabledClass="cursor-default !opacity-30 !hover:opacity-30"
+    class="uppercase font-medium tracking-wider hidden sm:block opacity-80 hover:opacity-100"
+    translate
+  >
+    {{ l.label }}
+  </button>
+  <div
+    (click)="toggleMobileMenu()"
+    class="w-full flex justify-between cursor-pointer sm:hidden"
+  >
+    <div
+      class="shrink truncate"
+      [class]="displayMobileMenu ? 'block' : 'hidden'"
+    >
+      <div *ngFor="let l of anchorLinks">
+        <button
+          (click)="setActiveLabel($event.target)"
+          gnUiAnchorLink="{{ l.anchor }}"
+          gnUiAnchorLinkDisabledClass="cursor-default opacity-60"
+          class="block px-3 py-3 rounded-md font-medium uppercase tracking-wider w-full text-left truncate"
+          translate
+        >
+          {{ l.label }}
+        </button>
+      </div>
+    </div>
+    <button
+      class="block px-3 py-3 rounded-md font-medium uppercase tracking-wider shrink truncate sm:hidden"
+      [class]="displayMobileMenu ? 'hidden' : 'block'"
+      translate
+    >
+      {{ activeLabel }}
+    </button>
+    <button
+      type="button"
+      class="h-10 inline-flex items-center justify-center p-2 rounded-md shrink-0 sm:hidden"
+    >
+      <mat-icon class="material-symbols-outlined align-middle"
+        >expand_more</mat-icon
+      >
+    </button>
+  </div>
+</nav>