Issue #3310969 by smulvih2: Support horizontal main menu in GCWeb

Stephen Mulvihill · sylus · commit 479f8d351c1e · 2022-10-23T20:17:28.000-04:00
diff --git a/src/Plugin/Preprocess/Menu.php b/src/Plugin/Preprocess/Menu.php
@@ -81,6 +81,16 @@ public function preprocess(array &$variables, $hook, array $info) {
       }
     }
 
+    // Determine menu orientation.
+    $config = \Drupal::config('wxt_library.settings');
+    $menu_type = $config->get('wxt.menu_type');
+    if ($menu_type) {
+      $variables['menu_type'] = 'horizontal';
+    }
+    else {
+      $variables['menu_type'] = 'default';
+    }
+
     parent::preprocess($variables, $hook, $info);
   }
 
diff --git a/src/Plugin/Preprocess/Region.php b/src/Plugin/Preprocess/Region.php
@@ -36,6 +36,14 @@ public function preprocessVariables(Variables $variables) {
         $variables->addClass(['pagedetails']);
       }
     }
+
+    if ($wxt_active == 'gcweb') {
+      $config = \Drupal::config('wxt_library.settings');
+      $menu_type = $config->get('wxt.menu_type');
+      if ($region === 'search' && $menu_type) {
+          $variables->addClass(['visible-md visible-lg']);
+      }
+    }
   }
 
 }
diff --git a/templates/menu/menu--main--gcweb.html.twig b/templates/menu/menu--main--gcweb.html.twig
@@ -21,21 +21,33 @@
   We call a macro which calls itself to render the full tree.
   @see http://twig.sensiolabs.org/doc/tags/macro.html
 #}
-{{ menus.menu_links(items, attributes, 0, menu_name|clean_class, gcweb_cdn, gcweb_cdn_url, language) }}
+{{ menus.menu_links(menu_type, items, attributes, 0, menu_name|clean_class, gcweb_cdn, gcweb_cdn_url, language) }}
 
-{% macro menu_links(items, attributes, menu_level, menu_name, gcweb_cdn, gcweb_cdn_url, language) %}
+{% macro menu_links(menu_type, items, attributes, menu_level, menu_name, gcweb_cdn, gcweb_cdn_url, language) %}
   {% import _self as menus %}
   {% if items %}
     {% if menu_level == 0 %}
       {% if gcweb_cdn and gcweb_cdn_url %}
         <ul role="menu" aria-orientation="vertical" data-ajax-replace="{{ gcweb_cdn_url }}{{ language }}.html">
       {% else %}
-        <ul role="menu" aria-orientation="vertical">
+        {% if menu_type == 'default' %}
+          <ul role="menu" aria-orientation="vertical">
+        {% elseif menu_type == 'horizontal' %}
+          <ul role="menubar"{{ attributes.addClass('list-inline', 'menu') }}>
+        {% endif %}
       {% endif %}
     {% elseif menu_level == 1 %}
-      <ul role="menu" aria-orientation="vertical"{{ attributes.removeClass('menu', 'list-inline') }}>
+      {% if menu_type == 'default' %}
+        <ul role="menu" aria-orientation="vertical"{{ attributes.removeClass('menu', 'list-inline') }}>
+      {% elseif menu_type == 'horizontal' %}
+        <ul role="menu"{{ attributes.addClass('sm', 'list-unstyled').removeClass('menu', 'list-inline') }} aria-expanded="false" aria-hidden="true">
+      {% endif %}
     {% else %}
-      <ul role="menu" aria-orientation="vertical">
+      {% if menu_type == 'default' %}
+        <ul role="menu" aria-orientation="vertical">
+      {% elseif menu_type == 'horizontal' %}
+        <ul role="menu"{{ attributes.addClass('dropdown-menu', menu_name) }}>
+      {% endif %}
     {% endif %}
     {% for item in items %}
       {%
@@ -46,14 +58,24 @@
         ]
       %}
       {% if menu_level == 0 and item.is_expanded %}
-        <li role="presentation"{{ item.attributes.addClass(item_classes) }}>
-        <a role="menuitem" href="{{ item.url }}" tabindex="-1" aria-haspopup="true" aria-controls="{{ item.title | clean_id }}" aria-expanded="false">{{ item.title }}</a>
+        {% if menu_type == 'default' %}
+          <li role="presentation"{{ item.attributes.addClass(item_classes) }}>
+          <a role="menuitem" href="{{ item.url }}" tabindex="-1" aria-haspopup="true" aria-controls="{{ item.title | clean_id }}" aria-expanded="false">{{ item.title }}</a>
+        {% elseif menu_type == 'horizontal' %}
+          <li role="presentation"{{ item.attributes }}>
+          <a role="menuitem" class="dropdown-toggle item" href="{{ item.url }}">{{ item.title }}</a>
+        {% endif %}
       {% else %}
-        <li role="presentation"{{ item.attributes.addClass(item_classes) }}>
-        {{ link(item.title, item.url, {'role':['menuitem']}) }}
+        {% if menu_type == 'default' %}
+          <li role="presentation"{{ item.attributes.addClass(item_classes) }}>
+          {{ link(item.title, item.url, {'role':['menuitem']}) }}
+        {% elseif menu_type == 'horizontal' %}
+          <li role="presentation"{{ item.attributes }}>
+          {{ link(item.title, item.url, {'role':['menuitem']}) }}
+        {% endif %}
       {% endif %}
       {% if item.below %}
-        {{ menus.menu_links(item.below, attributes.removeClass('nav', 'navbar-nav'), menu_level + 1) }}
+        {{ menus.menu_links(menu_type, item.below, attributes.removeClass('nav', 'navbar-nav'), menu_level + 1) }}
       {% endif %}
       </li>
     {% endfor %}
diff --git a/templates/menu/menu--main-fr--gcweb.html.twig b/templates/menu/menu--main-fr--gcweb.html.twig
@@ -21,21 +21,33 @@
   We call a macro which calls itself to render the full tree.
   @see http://twig.sensiolabs.org/doc/tags/macro.html
 #}
-{{ menus.menu_links(items, attributes, 0, menu_name|clean_class, gcweb_cdn, gcweb_cdn_url, language) }}
+{{ menus.menu_links(menu_type, items, attributes, 0, menu_name|clean_class, gcweb_cdn, gcweb_cdn_url, language) }}
 
-{% macro menu_links(items, attributes, menu_level, menu_name, gcweb_cdn, gcweb_cdn_url, language) %}
+{% macro menu_links(menu_type, items, attributes, menu_level, menu_name, gcweb_cdn, gcweb_cdn_url, language) %}
   {% import _self as menus %}
   {% if items %}
     {% if menu_level == 0 %}
       {% if gcweb_cdn and gcweb_cdn_url %}
         <ul role="menu" aria-orientation="vertical" data-ajax-replace="{{ gcweb_cdn_url }}{{ language }}.html">
       {% else %}
-        <ul role="menu" aria-orientation="vertical">
+        {% if menu_type == 'default' %}
+          <ul role="menu" aria-orientation="vertical">
+        {% elseif menu_type == 'horizontal' %}
+          <ul role="menubar"{{ attributes.addClass('list-inline', 'menu') }}>
+        {% endif %}
       {% endif %}
     {% elseif menu_level == 1 %}
-      <ul role="menu" aria-orientation="vertical"{{ attributes.removeClass('menu', 'list-inline') }}>
+      {% if menu_type == 'default' %}
+        <ul role="menu" aria-orientation="vertical"{{ attributes.removeClass('menu', 'list-inline') }}>
+      {% elseif menu_type == 'horizontal' %}
+        <ul role="menu"{{ attributes.addClass('sm', 'list-unstyled').removeClass('menu', 'list-inline') }} aria-expanded="false" aria-hidden="true">
+      {% endif %}
     {% else %}
-      <ul role="menu" aria-orientation="vertical">
+      {% if menu_type == 'default' %}
+        <ul role="menu" aria-orientation="vertical">
+      {% elseif menu_type == 'horizontal' %}
+        <ul role="menu"{{ attributes.addClass('dropdown-menu', menu_name) }}>
+      {% endif %}
     {% endif %}
     {% for item in items %}
       {%
@@ -46,14 +58,24 @@
         ]
       %}
       {% if menu_level == 0 and item.is_expanded %}
-        <li role="presentation"{{ item.attributes.addClass(item_classes) }}>
-        <a role="menuitem" href="{{ item.url }}" tabindex="-1" aria-haspopup="true" aria-controls="{{ item.title | clean_id }}" aria-expanded="false">{{ item.title }}</a>
+        {% if menu_type == 'default' %}
+          <li role="presentation"{{ item.attributes.addClass(item_classes) }}>
+          <a role="menuitem" href="{{ item.url }}" tabindex="-1" aria-haspopup="true" aria-controls="{{ item.title | clean_id }}" aria-expanded="false">{{ item.title }}</a>
+        {% elseif menu_type == 'horizontal' %}
+          <li role="presentation"{{ item.attributes }}>
+          <a role="menuitem" class="dropdown-toggle item" href="{{ item.url }}">{{ item.title }}</a>
+        {% endif %}
       {% else %}
-        <li role="presentation"{{ item.attributes.addClass(item_classes) }}>
-        {{ link(item.title, item.url, {'role':['menuitem']}) }}
+        {% if menu_type == 'default' %}
+          <li role="presentation"{{ item.attributes.addClass(item_classes) }}>
+          {{ link(item.title, item.url, {'role':['menuitem']}) }}
+        {% elseif menu_type == 'horizontal' %}
+          <li role="presentation"{{ item.attributes }}>
+          {{ link(item.title, item.url, {'role':['menuitem']}) }}
+        {% endif %}
       {% endif %}
       {% if item.below %}
-        {{ menus.menu_links(item.below, attributes.removeClass('nav', 'navbar-nav'), menu_level + 1) }}
+        {{ menus.menu_links(menu_type, item.below, attributes.removeClass('nav', 'navbar-nav'), menu_level + 1) }}
       {% endif %}
       </li>
     {% endfor %}
diff --git a/templates/page/page--gcweb--book-index.html.twig b/templates/page/page--gcweb--book-index.html.twig
@@ -72,21 +72,47 @@
     <header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar">
       <div id="wb-bnr" class="{{ container }}">
         <div class="row">
-          <section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
+          <section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right {{ menu_type == 'horizontal' ? 'visible-md visible-lg' : '' }}">
             <h2 class="wb-inv">{{ 'Language selection'|t }}</h2>
             {{ page.language_toggle }}
           </section>
           {{ page.banner }}
+          {% if menu_type == 'horizontal' %}
+            <section class="wb-mb-links col-xs-4 col-sm-3 visible-sm visible-xs pull-right" id="wb-glb-mn">
+              <h2>{{ 'Search and menus'|t }}</h2>
+              <ul class="list-inline text-right chvrn">
+                <li>
+                  <a href="#mb-pnl" title="{{ 'Search and menus'|t }}" aria-controls="mb-pnl" class="overlay-lnk" role="button">
+                    <span class="glyphicon glyphicon-search">
+                      <span class="glyphicon glyphicon-th-list">
+                        <span class="wb-inv">{{ 'Search and menus'|t }}</span>
+                      </span>
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div id="mb-pnl"></div>
+            </section>
+          {% endif %}
           {{ page.search }}
         </div>
       </div>
-      <nav class="gcweb-menu" data-trgt="mb-pnl" typeof="SiteNavigationElement">
-        <div class="{{ container }}">
-          <h2 class="wb-inv">{{ 'Menu'|t }}</h2>
-          <button type="button" aria-haspopup="true" aria-expanded="false">{{ main_menu_label|raw }}</button>
-          {{ page.navigation }}
-        </div>
-      </nav>
+      {% if menu_type == 'default' %}
+        <nav class="gcweb-menu" data-trgt="mb-pnl" typeof="SiteNavigationElement">
+          <div class="container">
+            <h2 class="wb-inv">{{ 'Menu'|t }}</h2>
+            <button type="button" aria-haspopup="true" aria-expanded="false">{{ main_menu_label|raw }}</button>
+            {{ page.navigation }}
+          </div>
+        </nav>
+      {% elseif menu_type == 'horizontal' %}
+        <nav aria-labelledby="topicsMenu" id="wb-sm" class="wb-menu visible-md visible-lg" data-trgt="mb-pnl">
+          <div class="pnl-strt {{ container }} nvbar">
+            <h2 id="topicsMenu" class="wb-inv">{{ 'Menu'|t }}</h2>
+            {{ page.navigation }}
+          </div>
+        </nav>
+      {% endif %}
       {{ page.breadcrumb }}
     </header>
   {% endblock %}
diff --git a/templates/page/page--gcweb--book-page.html.twig b/templates/page/page--gcweb--book-page.html.twig
@@ -72,21 +72,47 @@
     <header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar">
       <div id="wb-bnr" class="{{ container }}">
         <div class="row">
-          <section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
+          <section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right {{ menu_type == 'horizontal' ? 'visible-md visible-lg' : '' }}">
             <h2 class="wb-inv">{{ 'Language selection'|t }}</h2>
             {{ page.language_toggle }}
           </section>
           {{ page.banner }}
+          {% if menu_type == 'horizontal' %}
+            <section class="wb-mb-links col-xs-4 col-sm-3 visible-sm visible-xs pull-right" id="wb-glb-mn">
+              <h2>{{ 'Search and menus'|t }}</h2>
+              <ul class="list-inline text-right chvrn">
+                <li>
+                  <a href="#mb-pnl" title="{{ 'Search and menus'|t }}" aria-controls="mb-pnl" class="overlay-lnk" role="button">
+                    <span class="glyphicon glyphicon-search">
+                      <span class="glyphicon glyphicon-th-list">
+                        <span class="wb-inv">{{ 'Search and menus'|t }}</span>
+                      </span>
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div id="mb-pnl"></div>
+            </section>
+          {% endif %}
           {{ page.search }}
         </div>
       </div>
-      <nav class="gcweb-menu" data-trgt="mb-pnl" typeof="SiteNavigationElement">
-        <div class="{{ container }}">
-          <h2 class="wb-inv">{{ 'Menu'|t }}</h2>
-          <button type="button" aria-haspopup="true" aria-expanded="false">{{ main_menu_label|raw }}</button>
-          {{ page.navigation }}
-        </div>
-      </nav>
+      {% if menu_type == 'default' %}
+        <nav class="gcweb-menu" data-trgt="mb-pnl" typeof="SiteNavigationElement">
+          <div class="container">
+            <h2 class="wb-inv">{{ 'Menu'|t }}</h2>
+            <button type="button" aria-haspopup="true" aria-expanded="false">{{ main_menu_label|raw }}</button>
+            {{ page.navigation }}
+          </div>
+        </nav>
+      {% elseif menu_type == 'horizontal' %}
+        <nav aria-labelledby="topicsMenu" id="wb-sm" class="wb-menu visible-md visible-lg" data-trgt="mb-pnl">
+          <div class="pnl-strt {{ container }} nvbar">
+            <h2 id="topicsMenu" class="wb-inv">{{ 'Menu'|t }}</h2>
+            {{ page.navigation }}
+          </div>
+        </nav>
+      {% endif %}
       {{ page.breadcrumb }}
     </header>
   {% endblock %}
diff --git a/templates/page/page--gcweb.html.twig b/templates/page/page--gcweb.html.twig
@@ -72,21 +72,47 @@
     <header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar">
       <div id="wb-bnr" class="container">
         <div class="row">
-          <section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
+          <section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right {{ menu_type == 'horizontal' ? 'visible-md visible-lg' : '' }}">
             <h2 class="wb-inv">{{ 'Language selection'|t }}</h2>
             {{ page.language_toggle }}
           </section>
           {{ page.banner }}
+          {% if menu_type == 'horizontal' %}
+            <section class="wb-mb-links col-xs-4 col-sm-3 visible-sm visible-xs pull-right" id="wb-glb-mn">
+              <h2>{{ 'Search and menus'|t }}</h2>
+              <ul class="list-inline text-right chvrn">
+                <li>
+                  <a href="#mb-pnl" title="{{ 'Search and menus'|t }}" aria-controls="mb-pnl" class="overlay-lnk" role="button">
+                    <span class="glyphicon glyphicon-search">
+                      <span class="glyphicon glyphicon-th-list">
+                        <span class="wb-inv">{{ 'Search and menus'|t }}</span>
+                      </span>
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div id="mb-pnl"></div>
+            </section>
+          {% endif %}
           {{ page.search }}
         </div>
       </div>
-      <nav class="gcweb-menu" data-trgt="mb-pnl" typeof="SiteNavigationElement">
-        <div class="container">
-          <h2 class="wb-inv">{{ 'Menu'|t }}</h2>
-          <button type="button" aria-haspopup="true" aria-expanded="false">{{ main_menu_label|raw }}</button>
-          {{ page.navigation }}
-        </div>
-      </nav>
+      {% if menu_type == 'default' %}
+        <nav class="gcweb-menu" data-trgt="mb-pnl" typeof="SiteNavigationElement">
+          <div class="container">
+            <h2 class="wb-inv">{{ 'Menu'|t }}</h2>
+            <button type="button" aria-haspopup="true" aria-expanded="false">{{ main_menu_label|raw }}</button>
+            {{ page.navigation }}
+          </div>
+        </nav>
+      {% elseif menu_type == 'horizontal' %}
+        <nav aria-labelledby="topicsMenu" id="wb-sm" class="wb-menu visible-md visible-lg" data-trgt="mb-pnl">
+          <div class="pnl-strt {{ container }} nvbar">
+            <h2 id="topicsMenu" class="wb-inv">{{ 'Menu'|t }}</h2>
+            {{ page.navigation }}
+          </div>
+        </nav>
+      {% endif %}
       {{ page.breadcrumb }}
     </header>
   {% endblock %}

Original file line number	Diff line number	Diff line change
`@@ -81,6 +81,16 @@ public function preprocess(array &$variables, $hook, array $info) {`
`81`	`81`	`}`
`82`	`82`	`}`
`83`	`83`
	`84`	`+ // Determine menu orientation.`
	`85`	`+ $config = \Drupal::config('wxt_library.settings');`
	`86`	`+ $menu_type = $config->get('wxt.menu_type');`
	`87`	`+ if ($menu_type) {`
	`88`	`+ $variables['menu_type'] = 'horizontal';`
	`89`	`+ }`
	`90`	`+ else {`
	`91`	`+ $variables['menu_type'] = 'default';`
	`92`	`+ }`
	`93`	`+`
`84`	`94`	`parent::preprocess($variables, $hook, $info);`
`85`	`95`	`}`
`86`	`96`
Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,14 @@ public function preprocessVariables(Variables $variables) {`
`36`	`36`	`$variables->addClass(['pagedetails']);`
`37`	`37`	`}`
`38`	`38`	`}`
	`39`	`+`
	`40`	`+ if ($wxt_active == 'gcweb') {`
	`41`	`+ $config = \Drupal::config('wxt_library.settings');`
	`42`	`+ $menu_type = $config->get('wxt.menu_type');`
	`43`	`+ if ($region === 'search' && $menu_type) {`
	`44`	`+ $variables->addClass(['visible-md visible-lg']);`
	`45`	`+ }`
	`46`	`+ }`
`39`	`47`	`}`
`40`	`48`
`41`	`49`	`}`