User experience (UX)

Hello Richard,

The cheeky purpose of my post was to give some ideas to developers. The current menu is very nice, but when it includes many items, the attention required to locate a particular item quickly becomes tiring. Colors, bolding and spacing can help identify items more quickly and easily. It should also be possible to hide certain menu items, for example those that are never used in a course, for the sake of clarity.

Now, suppose the menu is that of a course on the school site, for which I do not have administration access. I can place the code in a block displayed on each page of the course. This should not be a problem.

I could put CSS code in a <style> element. However, the Atto editor automatically removes it. I can use the "Plain text area" editor which doesn't remove the <style> element, but sometimes I have to use the "Atto" editor, for example to insert an image in an activity. If by mistake I forget to put the editor back to "Plain text area" and I edit the activity in which I have my <style> code, I risk losing it without even realizing it. So I prefer to put the styling code in jQuery because it is not deleted by Atto. Although the syntax may differ a bit, it is essentially the same as CSS.

To use jQuery, you must first invoke it, then place the code in a script and set it to take effect when the page is loaded. To locate a menu item, I use a word contained within the item's text. For example, if I want all menu items containing the word "Chapter" to be colored, bold, and spaced from the previous item, the code is as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>

<script>
$(document).ready(function(){
  $("div#nav-drawer nav.list-group li a:contains(Chapter)").css("border-left","6px solid #F22");
  $("div#nav-drawer nav.list-group li a:contains(Chapter)").css("background-color","#ffe1e1");
  $("div#nav-drawer nav.list-group li a:contains(Chapter)").find("span").css("font-weight","bold");
  $("div#nav-drawer nav.list-group li:contains(Chapter)").css("padding-top","40px");
});
</script>

To preserve the highlighting of the selected menu item, the code is:

  $("#nav-drawer .active").css("background-color","#0F6FC5");
  $("#nav-drawer .active span").css("color","#FFF");

where I used hex colors (https://www.w3schools.com/css/css_colors_hex.asp ↗). You can obviously use the colors you want.

If I don't use some menu items, for example badges and competencies, I can hide them with the following code:

  $("div#nav-drawer nav.list-group li a:contains(Badges)").css("display","none");  
  $("div#nav-drawer nav.list-group li a:contains(Competencies)").css("display","none");

If you have access to the administration of the site, you can put the real equivalent CSS code in "Site administration / Appearance / Additional HTML", but this will affect all the courses of the site. Ideally, this functionality would be included in Moodle's UX or maybe in a plugin. In the meantime, you can use the little script above.