From 2b99e648cbca12a47c767abbafb951a2a132b93c Mon Sep 17 00:00:00 2001
From: Mihail Geshoski <mihail@moodle.com>
Date: Mon, 12 Sep 2022 14:05:38 +0800
Subject: [PATCH] MDL-75153 theme: Add template and styling for the tertiary
 nav selector

Adds new template dedicated for the general tertiary navigation element
which utilizes the exising select_menu output component. Also, adds
custom styling to the tertiary navigation selector element.
---
 .../tertiary_navigation_selector.mustache     | 83 +++++++++++++++++++
 .../boost/scss/moodle/tertiarynavigation.scss |  8 ++
 theme/boost/style/moodle.css                  |  4 +
 theme/classic/style/moodle.css                |  4 +
 4 files changed, 99 insertions(+)
 create mode 100644 lib/templates/tertiary_navigation_selector.mustache

diff --git a/lib/templates/tertiary_navigation_selector.mustache b/lib/templates/tertiary_navigation_selector.mustache
new file mode 100644
index 00000000000..f40a8b0f6aa
--- /dev/null
+++ b/lib/templates/tertiary_navigation_selector.mustache
@@ -0,0 +1,83 @@
+{{!
+    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 core/tertiary_navigation_selector
+
+    Tertiary navigation selector.
+
+    Context variables required for this template:
+    * name - name of the form element
+    * value - value of the form element
+    * baseid - id of the dropdown element and to be used to generate id for other elements used internally
+    * label - Element label
+    * labelattributes - Label attributes.
+    * selectedoption - Text of the selected option
+    * options - Array of options for the select with value, name, selected, isgroup and id properites.
+    Example context (json):
+    {
+        "name": "Tertiary navigation selector",
+        "value": "opt2",
+        "baseid": "select-menu56789",
+        "selectedoption": "Second option",
+        "options": [
+            {
+                "name": "First option",
+                "value": "opt1",
+                "id": "select-menu-option1",
+                "selected": false
+            },
+            {
+                "name": "Second option",
+                "value": "opt2",
+                "id": "select-menu-option2",
+                "selected": true
+            },
+            {
+                "selected": false,
+                "isgroup": {
+                    "name": "First group",
+                    "id": "select-menu-group1",
+                    "options": [
+                        {
+                            "name": "Third option",
+                            "value": "opt3",
+                            "id": "select-menu-option3",
+                            "selected": false
+                        },
+                        {
+                            "name": "Fourth option",
+                            "value": "opt4",
+                            "id": "select-menu-option4",
+                            "selected": false
+                        }
+                    ]
+                }
+            },
+            {
+                "name": "Fifth option",
+                "value": "opt5",
+                "id": "select-menu-option5",
+                "selected": false
+            }
+        ]
+    }
+}}
+<nav class="tertiary-navigation-selector">
+    {{>core/select_menu}}
+</nav>
+{{#js}}
+    document.querySelector('#{{baseid}}').addEventListener('change', function(e) {
+        window.location.href = e.target.value;
+    });
+{{/js}}
diff --git a/theme/boost/scss/moodle/tertiarynavigation.scss b/theme/boost/scss/moodle/tertiarynavigation.scss
index bda8a590fdd..625b27d824a 100644
--- a/theme/boost/scss/moodle/tertiarynavigation.scss
+++ b/theme/boost/scss/moodle/tertiarynavigation.scss
@@ -14,6 +14,14 @@
     .navitem:not(:last-child) {
         margin-right: 20px;
     }
+
+    .tertiary-navigation-selector {
+        .dropdown-toggle {
+            padding: 0;
+            font-size: 1.4rem;
+            font-weight: bold;
+        }
+    }
 }
 
 @media print {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index cbef26bc731..9f24a1bb234 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -21747,6 +21747,10 @@ div.editor_atto_toolbar button .icon {
     margin-bottom: 25px; }
   .tertiary-navigation .navitem:not(:last-child) {
     margin-right: 20px; }
+  .tertiary-navigation .tertiary-navigation-selector .dropdown-toggle {
+    padding: 0;
+    font-size: 1.4rem;
+    font-weight: bold; }
 
 @media print {
   .tertiary-navigation {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 7cf3880a279..5fb45d3dc1a 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -21693,6 +21693,10 @@ div.editor_atto_toolbar button .icon {
     margin-bottom: 25px; }
   .tertiary-navigation .navitem:not(:last-child) {
     margin-right: 20px; }
+  .tertiary-navigation .tertiary-navigation-selector .dropdown-toggle {
+    padding: 0;
+    font-size: 1.4rem;
+    font-weight: bold; }
 
 @media print {
   .tertiary-navigation {