Problem/Motivation

Just recently a fix was committed to make sure we respect the navigation on the left in #3529285: Navigation left sidebar goes over the left sidebar. It seems like we are now using drawers instead of sidebars (#3529049: Replace sidebars modals by drawers ) so we need to add some CSS for the drawer that has placement="start" attribute.

Steps to reproduce

  1. Have Navigation bar on the left
  2. Click e.g. Libraries button

Proposed resolution

Add CSS in extra drawer.css file so Drupal's CSS variable will be respected.

Note that there was no RTL support added since this seems to be an untouched topic yet.

User interface changes

The drawer on the left is not behind the navigation.

CommentFileSizeAuthor
#24 Screenshot 2025-07-22 091457.jpeg70.93 KBronraney
#23 Screenshot 2025-07-22 091147.jpeg73.52 KBronraney
#9 db_navigation_2.jpg82.33 KBmogtofu33
#9 db_navigation_1.jpg98.69 KBmogtofu33

Issue fork display_builder-3531467

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

yannickoo created an issue. See original summary.

yannickoo opened merge request !10

yannickoo’s picture

yannickoo
Location Berlin
commented
Status: Active » Needs review
yannickoo’s picture

yannickoo
Location Berlin
commented
Related issues: +#3529285: Navigation left sidebar goes over the left sidebar, +#3529049: Replace sidebars modals by drawers
mogtofu33’s picture

mogtofu33 commented
Issue tags: +display_builder-1.0.0-alpha1
_izaac’s picture

_izaac commented
Status: Needs review » Reviewed & tested by the community

This has been tested and works fine.

pdureau’s picture

pdureau commented
Assigned: Unassigned » mogtofu33
pdureau’s picture

pdureau commented
mogtofu33’s picture

mogtofu33 commented
Assigned: mogtofu33 » Unassigned
Status: Reviewed & tested by the community » Needs work
StatusFileSize
new db_navigation_1.jpg98.69 KB
new db_navigation_2.jpg82.33 KB

It's working well when navigation is collapsed but when opened there is a displacement problem, probably to see for the size handling in assets/js/drawer.js
close
open

yannickoo’s picture

yannickoo
Location Berlin
commented

I can confirm that we need to investigate here because of the size calculation with the new navigation :/

goz’s picture

goz commented

I see two ways to deal with that.

  1. Add a left margin with same size of the navigation collapsed or expanded but not for sub-level
  2. Drawer can be closed, so we can choose to open it in front of navigation (or everything else), so we can use all width of the screen

What do you think about this ?

mogtofu33’s picture

mogtofu33 commented

I like the second option, keep in front.
First option involve reading the variable value in drawer.js (--drupal-displace-offset-left) and add it to the margin left and with set by js. Which seems too much.

mogtofu33’s picture

mogtofu33 commented
Issue tags: -display_builder-1.0.0-alpha1 +display_builder-1.0.0-alpha2
pdureau’s picture

pdureau commented
Title: [1.0.0-alpha1] Navigation left sidebar goes over the left drawer » Navigation left sidebar goes over the left drawer
mogtofu33’s picture

mogtofu33 commented
Issue tags: -display_builder-1.0.0-alpha2 +display_builder-1.0.0-alpha3

goz opened merge request !34

goz changed the visibility of the branch 3531467-1.0.0-alpha1-navigation-left to hidden.

goz’s picture

goz commented
Status: Needs work » Needs review
pdureau’s picture

pdureau commented
Assigned: Unassigned » mogtofu33
mogtofu33’s picture

mogtofu33 commented
Assigned: mogtofu33 » Unassigned
Status: Needs review » Fixed

  • mogtofu33 committed 251e6b7c on 1.0.x authored by goz 
    Issue #3531467 by goz, yannickoo: Navigation left sidebar goes over the...
ronraney’s picture

ronraney commented

I added as a patch, cleared cache, but it's still there. Is this part of the main alpha release? I will attach a screenshot of what I see.

ronraney’s picture

ronraney commented
StatusFileSize
new Screenshot 2025-07-22 091147.jpeg73.52 KB
ronraney’s picture

ronraney commented
StatusFileSize
new Screenshot 2025-07-22 091457.jpeg70.93 KB
yannickoo’s picture

yannickoo
Location Berlin
commented

I can confirm that the fix is not there anymore, I think this has been changed in this here #3536519: Z index problems

yannickoo’s picture

yannickoo
Location Berlin
commented

I have created a new follow-up issue to handle this after the refactoring: #3538195: Z-index is still too low to cover Navigation bar

Status: Fixed » Closed (fixed)

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

mogtofu33 closed merge request !10