Issue #3499461 by tim bozeman: Add a navigation_plus Help mode

contextual_help.module

@@ -55,3 +55,12 @@ function contextual_help_toolbar() {
 
   return $items;
 }
+
+/**
+ * Implements hook_theme_registry_alter().
+ */
+function contextual_help_theme_registry_alter(&$theme_registry) {
+  if (!empty($theme_registry['menu_region__footer']['path'])) {
+    $theme_registry['menu_region__footer']['path'] = \Drupal::service('extension.list.module')->getPath('contextual_help') . '/templates';
+  }
+}

src/HelpManager.php

@@ -2,6 +2,7 @@
 
 namespace Drupal\contextual_help;
 
+use Drupal\Core\Render\Markup;
 use Drupal\Core\Url;
 use Drupal\Component\Serialization\Json;
 use Drupal\Core\Cache\CacheBackendInterface;
@@ -83,6 +84,59 @@ class HelpManager extends DefaultPluginManager {
     ];
   }
 
+  /**
+   * Get help topics.
+   *
+   * @return array
+   *   An unordered list of links to help plugin modals for this page.
+   *
+   * @throws \Drupal\Component\Plugin\Exception\PluginException
+   */
+  public function getHelpTopicsForNavigationModule(): array {
+    $help_topic_definitions = $this->getDefinitions();
+    usort($help_topic_definitions, function ($a, $b) {
+      return $a['weight'] <=> $b['weight'];
+    });
+    $help_topics = [];
+    foreach ($help_topic_definitions as $definition) {
+      $instance = $this->createInstance($definition['id']);
+      if ($instance->applies($this->routeMatch)) {
+        $help_topics[$definition['id']] = $this->getHelpLinkForNavigationModule($definition);
+      }
+    }
+
+    return $help_topics;
+  }
+
+  /**
+   * Get a link to the help plugin text by plugin definition.
+   *
+   * @param $definition
+   *   The plugin definition.
+   *
+   * @return array
+   *   The build array defining the link.
+   */
+  public function getHelpLinkForNavigationModule($definition) {
+    return [
+      '#type' => 'link',
+      '#title' => Markup::create('<span class="toolbar-button__label">' . $definition['title'] . '</span>'),
+      '#url' => Url::fromRoute('contextual_help.tray', ['plugin_id' => $definition['id']]),
+      '#options' => ['query' => \Drupal::destination()->getAsArray()],
+      '#attributes' => [
+        'class' => ['new', 'use-ajax', 'toolbar-button', 'toolbar-button--collapsible', 'navigation-plus-button'],
+        'data-icon-text' => mb_substr($definition['title'], 0, 2, "UTF-8"),
+        'data-dialog-type' => 'modal',
+        'data-dialog-options' => Json::encode([
+          'width' => 900,
+        ]),
+      ],
+      '#wrapper_attributes' => [
+        'class' => ['toolbar-block__list-item'],
+      ],
+    ];
+  }
+
   /**
    * Get a link to the help plugin text by plugin id.
    *

src/Plugin/Mode/Help.php

+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\contextual_help\Plugin\Mode;
+
+use Drupal\navigation_plus\Attribute\Mode;
+use Drupal\navigation_plus\ModeInterface;
+use Drupal\navigation_plus\ModePluginBase;
+use Drupal\Core\StringTranslation\TranslatableMarkup;
+
+/**
+ * Help mode plugin.
+ */
+#[Mode(
+  id: 'help',
+  label: new TranslatableMarkup('Help'),
+  weight: 10,
+)]
+final class Help extends ModePluginBase {
+
+  static private ?array $helpTopics = NULL;
+
+  private function getHelpTopics() {
+    if (is_null(self::$helpTopics)) {
+      self::$helpTopics = \Drupal::service('contextual_help')->getHelpTopicsForNavigationModule();
+    }
+    return self::$helpTopics;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function applies(): bool {
+    return !empty($this->getHelpTopics());
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getIconPath(): string {
+    $path = $this->extensionList->getPath('navigation');
+    return "/$path/assets/icons/help.svg";
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildToolbarItems(array &$variables, ModeInterface $mode): array {
+    // Add help options.
+    return self::$helpTopics;
+  }
+
+}

templates/menu-region--footer.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation to display the navigation footer menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the user menu.
+ * - help: TRUE if "Help" module is enabled.
+ * - title: A name of account.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link URL, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *
+ * @ingroup themeable
+ */
+#}
+{% set menu_heading_id = 'menu--' ~ menu_name|clean_unique_id %}
+<div class="admin-toolbar__item">
+  <h4 id="{{ menu_heading_id }}" class="toolbar-block__title visually-hidden focusable">{{ title }}</h4>
+  <ul class="toolbar-block__list">
+    <li id="admin-toolbar-user-menu" class="toolbar-block__list-item toolbar-block__list-item--user toolbar-popover" data-toolbar-popover>
+      {% include '@navigation/toolbar-button.html.twig' with {
+        action: true,
+        attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': 'admin-toolbar-user-menu', 'data-toolbar-popover-control': true}),
+        icon:  menu_name|clean_class,
+        text: title,
+        extra_classes: 'toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',
+        has_safe_triangle: TRUE,
+      } only %}
+      <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper>
+        <span class="toolbar-popover__header toolbar-button toolbar-button--large toolbar-button--dark toolbar-button--non-interactive">{{ title }}</span>
+        <ul class="toolbar-menu toolbar-popover__menu">
+          {% for item in items %}
+            <li class="toolbar-menu__item toolbar-menu__item--level-1">
+              <a
+                href="{{ item.url }}"
+                class="toolbar-button"
+              >{{ item.title }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </li>
+  </ul>
+</div>