Problem/Motivation

The current implementation in smaller viewports keeps a too restricted width for the menu that comes from desktop that isn't necessary on smaller breakpoints:

In fact, a wider width would help accommodate longer menu items.

Proposed resolution

Implement a width based on the viewport with. The goal is to keep a region visible of the front-end below, but just as a visual clue to explain that it's in there (and if they click in there they will close the button).

Designs:

CommentFileSizeAuthor
mobile-designs.png236.47 KBckrina
mobile-width.png55.17 KBckrina

Issue fork navigation-3393995

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:

About issue forks

Comments

ckrina created an issue. See original summary.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes

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

finnsky opened merge request !95

finnsky’s picture

finnsky commented
Status: Active » Needs review

0-559 --sidebar-width: 80vw
560+ --sidebar-width: 264px

I've taken breakpoints names from https://www.drupal.org/project/navigation/issues/3394349

Please review!

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

markie’s picture

markie commented
Issue tags: +DrupalCon Lille 2023

Adding Drupalcon Lille tag

  • ckrina committed c767f49c on 1.x authored by finnsky 
    Issue #3393995: Mobile: increase the width of the menu on mobile
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

Yasss, thanks both!!

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Needs review » Fixed

  • ckrina committed 3b614049 on 1.x 
    Revert "Issue #3393995: Mobile: increase the width of the menu on mobile...
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Fixed » Needs work

Sorry I just reverted this because with the latest changes the collapse toolbar button is missing :)

finnsky’s picture

finnsky commented
Status: Needs work » Needs review

finnsky opened merge request !104

  • 87480846 committed on 1.x 
    Mobile: increase the width of the menu on mobile - #3393995
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Needs review » Fixed

Thank you!!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.