ISAICP-6762: Show links to the interoperable landing pages in the navigation bar

config/sync/core.extension.yml

@@ -67,6 +67,7 @@ module:
   image: 0
   image_library_widget: 0
   inline_entity_form: 0
+  interoperable_europe: 0
   isa2_analytics: 0
   joinup_bundle_class: 0
   joinup_collection: 0

web/modules/custom/joinup_communities/interoperable_europe/interoperable_europe.info.yml

@@ -0,0 +1,6 @@
+name: Interoperable Europe
+type: module
+description: Custom code for the Interoperable Europe community of the Joinup project.
+package: Joinup communities
+core_version_requirement: ^8 || ^9
+php: 7.1

web/modules/custom/joinup_communities/interoperable_europe/src/InteroperableEuropeCollectionInterface.php

@@ -0,0 +1,22 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\interoperable_europe;
+
+/**
+ * Interface for the Interoperable Europe collection.
+ */
+interface InteroperableEuropeCollectionInterface {
+
+  /**
+   * The RDF entity ID of the Interoperable Europe collection.
+   */
+  public const COLLECTION_ENTITY_ID = 'http://data.europa.eu/w21/8e30f798-ff2b-478b-9c09-5ed5a63b4c8c';
+
+  /**
+   * The node ID of the Interoperable Europe landing page.
+   */
+  public const LANDING_PAGE_ENTITY_ID = 704740;
+
+}

web/modules/custom/joinup_communities/joinup_collection/src/JoinupCollectionHelper.php

@@ -14,7 +14,12 @@ class JoinupCollectionHelper {
   /**
    * The default entity ID of the Joinup collection.
    */
-  const JOINUP_COLLECTION_DEFAULT_ENTITY_ID = 'http://data.europa.eu/w21/df34e3a2-207b-4910-a804-344931654e20';
+  public const JOINUP_COLLECTION_DEFAULT_ENTITY_ID = 'http://data.europa.eu/w21/df34e3a2-207b-4910-a804-344931654e20';
+
+  /**
+   * The node ID of the Interoperability Solutions custom page.
+   */
+  public const INTEROPERABILITY_SOLUTIONS_ENTITY_ID = 704741;
 
   /**
    * Returns the entity ID of the Joinup collection.

web/themes/ventuno/package.json

@@ -14,10 +14,10 @@
     "postinstall": "npm run build"
   },
   "devDependencies": {
-    "@openeuropa/bcl-bootstrap": "0.8.0",
-    "@openeuropa/bcl-builder": "0.8.0",
-    "@openeuropa/bcl-theme-default": "0.8.0",
-    "@openeuropa/bcl-theme-joinup": "0.8.0",
+    "@openeuropa/bcl-bootstrap": "0.12.0",
+    "@openeuropa/bcl-builder": "0.12.0",
+    "@openeuropa/bcl-theme-default": "0.12.0",
+    "@openeuropa/bcl-theme-joinup": "0.12.0",
     "cross-env": "7.0.3",
     "del-cli": "^4.0.1",
     "glob": "7.1.7",

web/themes/ventuno/src/scss/components/_navbar.scss

@@ -2,8 +2,8 @@
   background-color: $primary;
   box-shadow: $box-shadow;
   padding: 0;
-  min-height: 46px;
-  @include media-breakpoint-up(sm) {
+  min-height: 54px;
+  @include media-breakpoint-up(md) {
     min-height: 72px;
   }
   .navbar-brand {
@@ -29,6 +29,7 @@
   }
   .nav-item {
     list-style: none;
+    position: relative;
     @include media-breakpoint-up(md) {
       padding: 0 $spacer*.5; // 0 8px
       &:last-of-type {
@@ -51,30 +52,16 @@
   }
   .accordion-collapse {
     position: absolute;
-    right: $spacer*.75;
-    z-index: 1;
+    right: 0;
+    z-index: 5; // Ensure the search icon stays below on small devices
     background: $primary;
     box-shadow: $box-shadow;
     margin-top: 1px;
     padding: $spacer; // 16px
+    white-space: nowrap;
     @include media-breakpoint-up(md) {
       max-width: 20*$spacer; // 320px
     }
-    @include media-breakpoint-up(sm) {
-      right: calc(50% - 258px);
-    }
-    @include media-breakpoint-up(md) {
-      right: calc(50% - 348px);
-    }
-    @include media-breakpoint-up(lg) {
-      right: calc(50% - 468px);
-    }
-    @include media-breakpoint-up(xl) {
-      right: calc(50% - 558px);
-    }
-    @include media-breakpoint-up(xxl) {
-      right: calc(50% - 648px);
-    }
   }
   .accordion-body {
     padding: 0; // Accordion resets
@@ -148,6 +135,13 @@
     background-color: transparent; // Accordion resets
     border: none; // Accordion resets
     border-radius: 0; // Accordion resets
+    box-shadow: none;
+    padding-top: $spacer; // 16px
+    padding-bottom: $spacer; // 16px
+    @include media-breakpoint-up(md) {
+      padding-top: $spacer * 1.5; // 24px
+      padding-bottom: $spacer * 1.5; // 24px
+    }
     &.collapsed {
       border: none; // Accordion resets
     }
@@ -222,6 +216,7 @@
     border-radius: 0 0 $border-radius $border-radius;
     border: none;
     background-color: $primary;
+    width: 320px;
 
     .popover-arrow {
       display: none;

web/themes/ventuno/templates/layout/page--home.html.twig

@@ -72,25 +72,32 @@
       </nav>
     </div>
     <header role="banner" class="region-header">
+      {% set items = logged_in ? [{
+        breakpoint: "lg",
+        classes: ["order-1"],
+        id: "landing-pages",
+        icon: { name: "justify" },
+        label: "",
+        links: landing_page_links,
+      }] : [] %}
+      {% set items = items|merge([{
+        breakpoint: logged_in ? "" : "lg",
+        id: logged_in ? "account" : "navbar-toggler",
+        icon: {
+          name: logged_in ? "person-circle" : "justify",
+        },
+        label: logged_in ? user_name : "",
+        links: logged_in ? profile_links : anonymous_links,
+      }]) %}
       {% include directory ~ '/templates/navigation/navbar.html.twig' with {
-        breakpoint: logged_in ? "" : "sm",
         brand: {
           src: base_path ~ directory ~ "/src/images/logo.svg",
           alt: "Joinup logo"|t,
           link: front_page,
         },
         collapse_id: "main-navbar",
         list_id: "main-navbar-list",
-        items: [
-          {
-            id: logged_in ? "account" : "navbar-toggler",
-            icon: {
-              name: logged_in ? "person-circle" : "justify",
-            },
-            label: logged_in ? user_name : "",
-            links: logged_in ? profile_links : anonymous_links,
-          },
-        ],
+        items: items,
       } %}
     </header>
 

web/themes/ventuno/templates/navigation/navbar.html.twig

@@ -2,8 +2,6 @@
 {% spaceless %}
 
 {# Parameters:
-  - breakpoint (string) (default: 'md')
-    options: ['', 'xs', 'sm', 'md', 'lg', 'xl']
   - brand (object) (default: {})
     format: {
       src: '',
@@ -38,7 +36,6 @@
     }]
 #}
 
-{% set _breakpoint = breakpoint|default('') %}
 {% set _brand = brand|default({}) %}
 {% set _collapse_id = collapse_id|default('') %}
 {% set _list_id = list_id|default('') %}
@@ -48,11 +45,6 @@
 {% set _navbar_toggler_classes = ['navbar-toggler'] %}
 {% set _list_id = list_id|default('accordion-1') %}
 {% set _list_classes = ['navbar-nav', 'accordion', 'accordion-flush'] %}
-{% set _list_item_classes = ['nav-item', 'accordion-item'] %}
-
-{% if _breakpoint %}
-  {% set _list_item_classes = _list_item_classes|merge(['d-' ~ _breakpoint ~ '-none']) %}
-{% endif %}
 
 {% if nav_attributes is empty %}
   {% set nav_attributes = create_attribute() %}
@@ -66,21 +58,16 @@
   {% set list_attributes = create_attribute() %}
 {% endif %}
 
-{% if list_item_attributes is empty %}
-  {% set list_item_attributes = create_attribute() %}
-{% endif %}
-
 {% set nav_attributes = nav_attributes.addClass(_nav_classes) %}
 {% set navbar_toggler_attributes = navbar_toggler_attributes.addClass(_navbar_toggler_classes) %}
 {% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('type', 'button') %}
 {% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('data-bs-toggle', 'collapse') %}
-{% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('data-bs-target', '#' ~ _collapse_id) %}
-{% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('aria-controls', _collapse_id) %}
+{% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('data-bs-target', '#' ~ _list_id) %}
+{% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('aria-controls', _list_id) %}
 {% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('aria-expanded', 'false') %}
 {% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('aria-label', 'Toggle navigation') %}
 {% set list_attributes = list_attributes.addClass(_list_classes) %}
 {% set list_attributes = list_attributes.setAttribute('id', _list_id) %}
-{% set list_item_attributes = list_item_attributes.addClass(_list_item_classes) %}
 
 <nav
   {{ nav_attributes }}
@@ -93,20 +80,20 @@
       <span class="navbar-motto d-none d-md-block">{{ _brand.motto }}</span>
     {% endif %}
 
-    <div class="collapse navbar-collapse rounded-bottom" id="{{ _collapse_id }}">
+    <div class="" id="{{ _collapse_id }}">
       <ul
         {{ list_attributes }}
       >
         {% for item in _items %}
-          {% if _breakpoint %}
+          {% if item.breakpoint %}
             {% for link in item.links %}
               {% if not link.hide_on_desktop %}
-                <li class="nav-item d-none d-{{ _breakpoint }}-inline-block">
+                <li class="nav-item d-none d-{{ item.breakpoint }}-inline-block">
                   {% if link.link %}
                     <a class="nav-link" href="{{ link.link }}" {{ anchor.extra_attributes }}>{{ link.label }}</a>
                   {% elseif link.popover %}
                     <button
-                      data-bs-toggle="popover"
+                      data-bs-toggle="collapse"
                       autocomplete="off"
                       data-bs-placement="bottom"
                       data-bs-content="<a class='popover__cta' href='{{ link.popover.cta.link }}' {{ link.popover.cta.attributes }}>{{ link.popover.cta.text }}</a><p class='popover__description'>{{ link.popover.description }}</p>"
@@ -125,6 +112,12 @@
               {% endif %}
             {% endfor %}
           {% endif %}
+          {% set list_item_attributes = create_attribute() %}
+          {% set _list_item_classes = item.classes|default([])|merge(['nav-item', 'accordion-item']) %}
+          {% if item.breakpoint %}
+            {% set _list_item_classes = _list_item_classes|merge(['d-' ~ item.breakpoint ~ '-none']) %}
+          {% endif %}
+          {% set list_item_attributes = list_item_attributes.addClass(_list_item_classes) %}
           <li {{ list_item_attributes }}>
             <span class="accordion-header" id="heading-{{ item.id }}">
               <button
@@ -150,7 +143,7 @@
               id="collapse-{{ item.id }}"
               class="accordion-collapse collapse rounded-bottom"
               aria-labelledby="heading-{{ item.id }}"
-              data-bs-parent="#{{ _collapse_id }}"
+              data-bs-parent="#{{ _list_id }}"
             >
               <div class="accordion-body">
                 <ul class="accordion-list">

web/themes/ventuno/ventuno.info.yml

@@ -11,6 +11,7 @@ libraries:
 
 libraries-override:
   oe_bootstrap_theme/style: false
+  oe_bootstrap_theme/bcl: false
   joinup_layout/twocol_60_40:
     css:
       theme:

web/themes/ventuno/ventuno.theme

@@ -11,8 +11,11 @@ use Drupal\Core\Menu\MenuLinkTreeElement;
 use Drupal\Core\Menu\MenuTreeParameters;
 use Drupal\Core\Url;
 use Drupal\collection\Entity\CollectionInterface;
+use Drupal\interoperable_europe\InteroperableEuropeCollectionInterface;
 use Drupal\joinup_bundle_class\LogoInterface;
 use Drupal\joinup_collection\JoinupCollectionHelper;
+use Drupal\node\Entity\Node;
+use Drupal\node\NodeInterface;
 use Drupal\rdf_entity\Entity\Rdf;
 use Drupal\smart_trim\Truncate\TruncateHTML;
 
@@ -51,6 +54,32 @@ function ventuno_preprocess_page(&$variables) {
   // Export the user name to display in the header.
   $variables['user_name'] = \Drupal::currentUser()->getDisplayName();
 
+  // Show links to 'Interoperable Europe' and 'Interoperability Solutions'.
+  $landing_page_links = [];
+  foreach ([
+    InteroperableEuropeCollectionInterface::LANDING_PAGE_ENTITY_ID,
+    JoinupCollectionHelper::INTEROPERABILITY_SOLUTIONS_ENTITY_ID,
+  ] as $node_id) {
+    try {
+      $node = Node::load($node_id);
+      if (!$node instanceof NodeInterface) {
+        throw new Exception();
+      }
+      $label = $node->getTitle();
+      $url = $node->toUrl();
+      $landing_page_links[] = [
+        'label' => $label,
+        'link' => $url,
+      ];
+    }
+    catch (Exception $e) {
+      // The custom pages cannot be loaded. This should not crash the page since
+      // these pages might not exist in projects that reuse the Joinup open
+      // source project.
+    }
+  }
+  $variables['landing_page_links'] = $landing_page_links;
+
   // Export the user account menu in the format expected by the header template.
   /** @var \Drupal\Core\Menu\MenuLinkTreeInterface $menu_link_tree */
   $menu_link_tree = \Drupal::service('menu.link_tree');
@@ -83,6 +112,9 @@ function ventuno_preprocess_page(&$variables) {
     'hide_on_desktop' => TRUE,
   ];
 
+  // Include the links to the interoperability landing pages.
+  $anonymous_links = array_merge($anonymous_links, $landing_page_links);
+
   // Generate a link to EU Login.
   $cas_login_link = Url::fromRoute('cas.login');
   $anonymous_links[] = [