Why jquery menu collapse on all pages except front page

Question

I have a Drupal 8 site and them (upgraded from Drupal 7) and the main menu collapses to a button when the page is narrow enough (i.e. on a mobile device). Or at least it is supposed to. I did not design the theme.

SITUATION

Unfortunately when the menu is collapsed into a button, clicking on the button does NOT open the menu.

SITE SETUP

It seems that the old theme used jQuery to handle the collapse of the menu.

I have installed the jquery_ui module.

I added jquery to the .libraries.yml file

  dependencies:
    - core/jquery
    - core/jquery.ui
    - core/jquery.once

There are 4 template files which the only reason I can see is so that the main menu (which is hardcoded) can style the active menu item for the page.

• page--node--2.html.twig
• page--node--3.html.twig
• page--node--6.html.twig
• page.html.twig

Each of those pages has as the last line of the page a reference to the JavaScript file located in the site as

<script src="sites/all/themes/custom/mytheme/js/main.js"></script>

FIXED SOME OF IT

Adding jquery.main.js to the /js directory and adding the reference to it in the .library.yml file as

  js:
    js/main.js: {}
    js/jquery.main.js: {}

was enough to get all of the pages to collapse and open the menu EXCEPT THE FRONT PAGE.

JURY-RIG

I can get the front page menu to work if I add a reference to the bottom of the page to the jquery.main.js file I manually added to the local /js directory.

<script src="sites/all/themes/custom/mytheme/js/main.js"></script>

But then the other pages (not node 2, 3 or 6) which should use page.html.twig are run, it does NOT un-collapse the menu.

So for now I make a page--front.html.twig file which includes BOTH script referecnes to the JavaScript files, and all other pages have just the one (to main.js).

QUESTION I have a couple:

1. What is the more standard way to situate this? I don't imagine that having a local jquery.main.js file is the best solution but it wasn't working with out it.
2. Why would the front page not operate like the other pages in accessing the JavaScript and jQuery?

Thank you for any insight.

Answer 1

Doing

<script src="sites/all/themes/custom/mytheme/js/main.js"></script>

is bad Drupal practice. As per the docs you should be doing

my_theme.libraries.yml

menu-collapse:
  version: 1.x
  js:
    js/main.js: {}
  dependencies:
    - core/jquery
    - core/jquery.ui
    - core/jquery.once

page--node--2.html.twig
page--node--3.html.twig
page--node--6.html.twig
page.html.twig

{{ attach_library('theme_name/menu-collapse') }}

inside the template file(s).

Note: If this functionality is meant to be for every single page, rather then having to always add this to every variation of page.html.twig, add this in html.html.twig instead.

---

If after doing the above, the issue still persists

Why would the front page not operate like the other pages in accessing the JavaScript and jQuery?

Possibly due to jQuery being loaded twice.

Go to /admin/config/development/performance and uncheck Aggregate JavaScript files (remember to turn back on after your're finished debugging)

Then on your front page, right mouse click, and select inspect

Go to network, and select JS, then refresh the page with the inspector open. You'll be able to see all the JS files that are loaded.

---

If there are no jQuery duplicates, in the inspector go to the "Console tab" and see if there is a JS error.