MDL-71683 navigation: Implement the lang menu in the main navigation

- Part of: MDL-69588

lib/classes/navigation/output/primary.php

@@ -124,6 +124,7 @@ class primary implements renderable, templatable {
         $currentlang = current_language();
         $langs = get_string_manager()->get_list_of_translations();
         $nodes = [];
+        $activelanguage = '';
 
         // Add the lang picker if needed.
         foreach ($langs as $langtype => $langname) {
@@ -137,9 +138,16 @@ class primary implements renderable, templatable {
             ];
 
             $nodes[] = $node;
+
+            if ($isactive) {
+                $activelanguage = $langname;
+            }
         }
 
-        return $nodes;
+        return [
+            'title' => $activelanguage,
+            'items' => $nodes,
+        ];
     }
 
     /**

theme/boost/layout/columns2.php

@@ -66,6 +66,7 @@ $templatecontext = [
     'primarymoremenu' => $OUTPUT->more_menu(array_merge($primarymenu['primary'], $primarymenu['custom']), 'navbar-nav'),
     'secondarymoremenu' => $secondarynavigation,
     'usermenu' => $primarymenu['user'],
+    'langmenu' => $primarymenu['lang'],
 ];
 $nav = $PAGE->flatnav;
 $templatecontext['flatnavigation'] = $nav;

theme/boost/scss/moodle/navbar.scss

@@ -74,6 +74,17 @@
             }
         }
     }
+    .langmenu {
+        .dropdown-menu {
+            .dropdown-item {
+                &[aria-current="true"]::before {
+                    content: "\f00c";
+                    font-size: 0.75rem;
+                    padding-left: .25rem;
+                }
+            }
+        }
+    }
     .moodle-actionmenu .menubar,
     .action-menu-trigger .dropdown {
         height: 100%;

theme/boost/style/moodle.css

@@ -20023,6 +20023,10 @@ div.editor_atto_toolbar button .icon {
         content: "";
         font-size: 0.75rem;
         padding-left: .25rem; }
+  .navbar.fixed-top .langmenu .dropdown-menu .dropdown-item[aria-current="true"]::before {
+    content: "\f00c";
+    font-size: 0.75rem;
+    padding-left: .25rem; }
   .navbar.fixed-top .moodle-actionmenu .menubar,
   .navbar.fixed-top .action-menu-trigger .dropdown {
     height: 100%;

theme/boost/templates/language_menu.mustache

@@ -0,0 +1,63 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template theme_boost/language_menu
+
+    Language menu template.
+
+    Context variables required for this template:
+    * title - The title of the menu (displays the text of the currently active language).
+    * items - Array of data representing the available languages to be displayed in the language menu.
+       * link - If a link is provided render it.
+         * title - The title of the language item.
+         * text - The text displayed for the language item.
+         * url - The url link to activate the given language.
+         * isactive - Whether the language is currently active.
+
+    Example context (json):
+    {
+        "title": "English (en)",
+        "items": {
+            "link": {
+                "title": "English (en)",
+                "text": "English (en)",
+                "url": "http://example.com",
+                "isactive": 0
+            }
+        }
+    }
+}}
+<div class="langmenu">
+    <div class="dropdown show">
+        <a href="#" role="button" id="lang-menu-toggle" data-toggle="dropdown" aria-label="{{#str}}language{{/str}}" aria-haspopup="true" aria-controls="lang-action-menu" class="btn dropdown-toggle">
+            <i class="icon fa fa-language fa-fw mr-1" aria-hidden="true"></i>
+            <span class="langbutton">
+                {{title}}
+            </span>
+            <b class="caret"></b>
+        </a>
+        <div role="menu" aria-labelledby="lang-menu-toggle" id="lang-action-menu" class="dropdown-menu dropdown-menu-right">
+            {{#items}}
+                {{#link}}
+                    <a href="{{{url}}}" class="dropdown-item pl-5" role="menuitem" title="{{title}}" {{#isactive}}aria-current="true"{{/isactive}}>
+                        {{text}}
+                    </a>
+                {{/link}}
+            {{/items}}
+        </div>
+    </div>
+</div>

theme/boost/templates/navbar.mustache

@@ -61,6 +61,9 @@
     </ul>
 
     <div id="usernavigation" class="navbar-nav my-1 ml-auto">
+        {{#langmenu}}
+            {{> theme_boost/language_menu }}
+        {{/langmenu}}
         <div class="divider border-left h-50 align-self-center mx-1"></div>
         {{{ output.search_box }}}
         {{{ output.navbar_plugin_output }}}

theme/classic/style/moodle.css

@@ -20214,6 +20214,10 @@ div.editor_atto_toolbar button .icon {
         content: "";
         font-size: 0.75rem;
         padding-left: .25rem; }
+  .navbar.fixed-top .langmenu .dropdown-menu .dropdown-item[aria-current="true"]::before {
+    content: "\f00c";
+    font-size: 0.75rem;
+    padding-left: .25rem; }
   .navbar.fixed-top .moodle-actionmenu .menubar,
   .navbar.fixed-top .action-menu-trigger .dropdown {
     height: 100%;