Problem/Motivation

Follow-up to #3180086: It should not be possible to have two dropdown menus appear at the same time within Olivero

That issue added logic which closes the sub-menus whenever avresize event happened. The motivation was to prevent 2 sub-menus being open if you switch

But this is too greedy. Not all viewport resizing results in a change between wide and narrow menu versions. It's reasonable to have a wide menu, then make your viewport even bigger.

Steps to reproduce

Example:I have a HD monitor (1920 x 1080), and my browser window is currently 1300 x 700. I see the wide version of the menu. Now I open a sub-menu, and it has lots of items. I'd like more room to read those, so I use the maximise-window feature of my OS. The browser viewport grows from 1300px to 1920px wide. Does the menu remain open?

Proposed resolution

Don't close menus on all resize events. Instead, close them when you decide to switch between narrow and wide menus.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Issue fork drupal-3191806

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

andrewmacpherson created an issue. See original summary.

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

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

andy-blum’s picture

Status: Active » Needs review
StatusFileSize
new5.27 KB

Took a first swing at this adding a new prop to the init() function to hold onto pre-resize width values. Additionally, added Drupal.debounce to rate-limit the resize handler per the @todo in the file.

gauravvvv’s picture

StatusFileSize
new5.27 KB

Re-rolled patch #3, Please review.

gauravvvv’s picture

StatusFileSize
new5.27 KB
andy-blum’s picture

Tests will likely continue to fail as the patch was created against 9.x.3

gauravvvv’s picture

9.3 will be ready for testing from week 3 of may.

andy-blum’s picture

#2 indicates new changes should be made to the 9.3.x branch. Is that true or are minor fixes like this still aimed at the 9.2.x branch?

gauravvvv’s picture

I have 9.3 branch in my local. There are very minor changes in 9.2 and 9.3.
I made these changes in 9.3 and it still passes 9.2 and it will pass 9.3 as well.

guilhermevp’s picture

I was unable to test the issue properly, could use more explicit details in how to test it.

How I did it:

1-Created submenus in the home link,
2-Downsized navigation page to 1600 x 900,
3-Expanded the menu,
4-Changed page to full-screen
5-Menu closes, before and after patch.

andy-blum’s picture

StatusFileSize
new5.18 KB

Reroll of #5

mherchel’s picture

Priority: Normal » Minor
ranjith_kumar_k_u’s picture

StatusFileSize
new5.17 KB

Fixed custom command failure

andy-blum’s picture

Status: Needs review » Needs work

Needs a re-roll

xjm’s picture

Priority: Minor » Major
Issue tags: +Usability, +Accessibility

This is a usability and accessibility issue, and is at least normal if not major. Content unexpectedly disappearing when I make my window bigger to try to read it sounds pretty bad, actually, so erring on the side of major.

mherchel’s picture

mherchel’s picture

StatusFileSize
new6.02 KB

Re-roll attached.

mherchel’s picture

Status: Needs work » Needs review
mherchel’s picture

StatusFileSize
new5.69 KB

Forgot to stage all my changes. New reroll attached.

mherchel’s picture

Status: Needs review » Needs work
  1. +++ b/core/themes/olivero/js/navigation.es6.js
    @@ -3,7 +3,7 @@
    +((Drupal, once, tabbable, debounce) => {
    

    I'm not opposed to integrating Drupal.debounce, but I'd like to keep it out of the scope of this issue. We have a Drupal.olivero.isDesktopNav() method that can do this.

  2. +++ b/core/themes/olivero/js/navigation.es6.js
    @@ -40,6 +40,36 @@
    +      (oldWidth > 1200 && newWidth < 1200) ||
    

    I don't like that we're encoding the navigation change breakpoint here. This means that if we ever change it, we'll need to remember to change this.

mherchel’s picture

Status: Needs work » Needs review
StatusFileSize
new2.46 KB
new2.46 KB

Attached is a patch that compares the new and old Drupal.olivero.isDesktopNav() value and if they don't match, it will allow the submenus to close.

No interdiff as this is a different approach.

Tugboat preview: https://3191806-resize-menu-close-ualwvqluvczjwoxevbjdriwl9mah4b3j.tugbo...

mherchel’s picture

Attached the same patch twice.

andy-blum’s picture

Status: Needs review » Needs work
StatusFileSize
new9.48 MB

The desktop submenus only close when we shrink enough to get to the mobile menu, but the mobile menu closes on any resize event. Screen recording attached.

mherchel’s picture

Issue tags: +banjo music

Added this tag per the last attached movie.

hooroomoo made their first commit to this issue’s fork.

hooroomoo’s picture

(user bnjmnm is teaching me how to contribute to Olivero and asked that I make this a merge request to facilitate that process)

kostyashupenko made their first commit to this issue’s fork.

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.

kristen pol’s picture

Status: Needs work » Needs review
Issue tags: +Bug Smash Initiative, +Needs manual testing

Thanks for the update. Tagging for manual testing.

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.

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

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

andy-blum’s picture

Status: Needs review » Needs work
andy-blum’s picture

Issue tags: -banjo music

"banjo music" is not a real tag.

mherchel’s picture

Issue tags: +bluegrass
gauravvvv’s picture

Updating attributions.

mgifford’s picture

Issue tags: +wcag1410

Adding 1.4.10 SC.

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.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.