Problem/Motivation

In Version 9.2, dropdown menus do not work at all when more than 2 levels of menu selected.

second-level-navigation.js?v=9.2.0:21 Uncaught TypeError: Cannot read property 'classList' of null
    at second-level-navigation.js?v=9.2.0:21
    at NodeList.forEach (<anonymous>)
    at toggleSubNav (second-level-navigation.js?v=9.2.0:19)
    at HTMLLIElement.<anonymous> (second-level-navigation.js?v=9.2.0:62)

Steps to reproduce

Create a main menu of three or more levels. In admin/structure/block/manage/olivero_main_menu set to display 4 menu levels and expand all menu links.

Proposed resolution

Rewrite second-level-navigation.js so that it can cater for more than two levels of menu. This was possible in the javascript for the 9.1 version of Olivero (albeit with some tweaking of the js)

CommentFileSizeAuthor
#16 Screen Shot 2022-09-22 at 4.47.41 PM.png778.51 KBandy-blum
#10 3221399-initial-work.patch16.67 KBmherchel

Comments

New Zeal created an issue. See original summary.

NewZeal’s picture

NewZeal commented
Title: Olivero theme: Menu dropdowns fatal error problem » Olivero theme: Menu dropdowns fatal error problem (v 9.2)
Issue summary: View changes
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Category: Bug report » Feature request

We don't support more than two levels. Note if we ever do support more than 3, we will likely need to figure out a different solution for #3190120: Olivero: Focused level-2 nav items should always be in viewport during keyboard navigation., which sets overflow: auto; around the dropdowns. This would clip any third level menus.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Olivero theme: Menu dropdowns fatal error problem (v 9.2) » Olivero: Support more than two levels of menu in primary menu.
jaime_pomales’s picture

jaime_pomales commented

Definitely concur with New Zeal here. second-level-navigation.js is broken in 9.2.2.

If, in the menu block, you specify any level over 2, the drop down menus disappear completely as reported above.

I understand developer time is limited, so I understand not explicitly supporting level 3 and above, but to break the menus completely seems excessive to me.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

yeah, you're right. we should handle this gracefully. I opened #3225241: Olivero primary menu JS completely breaks if site-builder specifies over 2 levels deep

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented

I've added a patch to mherchel's issue above, reviews & feedback appreciated

jaime_pomales’s picture

jaime_pomales commented

Thanks for looking at this. I applied the patch from the newly opened issue and it works perfectly.

Thank you so much, Andy. As we say in Puerto Rico, ¡Eres un ángel!

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Postponed

We'll do styling of the menu in this issue. Going to postpone this until #3225241: Olivero primary menu JS completely breaks if site-builder specifies over 2 levels deep is committed.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Version: 9.2.x-dev » 9.3.x-dev
StatusFileSize
new 3221399-initial-work.patch16.67 KB

Attached is an initial patch with some styling work for when we get to this.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
commented

Is this issue unblocked now?
(or what needs to be done to get it unblocked?)

stopopol’s picture

stopopol commented

+1

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Postponed » Active

Yeah, there's nothing blocking this at this point.

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Version: 9.5.x-dev » 10.1.x-dev
Status: Active » Postponed (maintainer needs more info)
StatusFileSize
new Screen Shot 2022-09-22 at 4.47.41 PM.png778.51 KB

This is unblocked, but is it still an issue?

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

smustgrave’s picture

smustgrave commented
Status: Postponed (maintainer needs more info) » Closed (outdated)

Closing out as there hasn't been a follow up #16 but if still a valid request please reopen

Thanks!

szaszg’s picture

szaszg commented

Hello andy-blum,

This is unblocked, but is it still an issue?

How can i produce this menu?

I try it with 10.1.8 and 10.4.1 but only "First submenu" appear...

Thanks,
Gergely