Admin toolbar loads fully expanded

Created on 6 July 2023, over 1 year ago
Updated 14 July 2023, over 1 year ago

Problem/Motivation

I am seeing a new behavior since installing Drupal 10.1.1 (updating from Drupal 10.0.10).

Now, when logged in as an admin, the toolbar initially loads as expanded on all pages. After a moment the entire toolbar collapses, but it is quite distracting when navigating the site.

I have replicated this in Google Chrome (114.0.5735.198) and Safari (16.5.1) on macOS 13.4.1. This happens 100% of the time for me when loading the site in a new browser window, and fairly often while browsing the site.

This only seems to happen when using the Horizontal, Modern Toolbar layout.

I have tried logging out, clearing all caches/local storage, but the issue persists.

Steps to reproduce

1. Install Drupal 10.1.1 with Gin Admin theme (8.x-3.0-rc4) and Gin Toolbar (8.x-1.0-rc3)
2. Set the Navigation (Drupal Toolbar) setting to: Horizontal, Modern Toolbar
3. Browse around the site

Iā€™m attaching a screenshot of what I am seeing.

šŸ› Bug report
Status

Fixed

Component

User interface

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jabeler
  • šŸ‡ØšŸ‡­Switzerland dalanz

    I'm facing the same behavior. This seems to be related to the changes in Drupal 10.1 assets aggregation. If you turn off the CSS Aggregation (/admin/config/development/performance), the admin toolbar loads normally.

  • šŸ‡ŗšŸ‡øUnited States kevinfunk

    Turning off CSS Aggregation doesn't fix the issue for me. I also see the issue using Claro with Admin Toolbar using Drupal 10.1.

  • šŸ‡ŗšŸ‡øUnited States socalerich

    Also happening for me after 10.1.1. What's weird is it was happening for me locally and then somehow stopped, but I don't know what I did to make it stop. When I moved the code to the dev server, it started happening on dev and it wont go away even after clearing cache, turning off aggregation, etc.

  • šŸ‡ŗšŸ‡øUnited States socalerich

    OK, I just figured out what I did to remedy this at least for me. I went to the server in question and went to Appearance > Settings > Gin and under "Navigation (Drupal Toolbar)", I switched the setting to "Legacy, Classic Drupal Toolbar" and saved it but then switched it right back to "Horizontal, Modern Toolbar" after saving and for some reason that got rid of the problem.

  • šŸ‡®šŸ‡³India vaibhav_arora

    I am not able to reproduce this same issue on my local, I tried it with Drupal 10.1.2, gin admin theme, and gin toolbar but it is working fine as the admin toolbar is showing in collapsed only also I have attached the below screenshot and video for reference.
    Please guide as if I am missing any steps to reproduce this issue.

  • šŸ‡ŗšŸ‡øUnited States socalerich

    This issue is with Drupal 10.1.1.

  • šŸ‡®šŸ‡³India vaibhav_arora

    @SoCalErich I tried the same with updating Drupal from 10.0.10 to 10.1.1 but still not able to reproduce it, I have attached a video too for the reference.

  • First commit to issue fork.
  • @bnjmnm opened merge request.
  • Status changed to Needs review over 1 year ago
  • šŸ‡ŗšŸ‡øUnited States bnjmnm Ann Arbor, MI

    Drupal 10.1 changed it so horizontal menus are visible on load so the correct space is allocated on initial render and prevents a reflow. Looks like this can be an issue on a toolbar that exposes more of the menu. I was able to consistently reproduce the issue (put a debugger; at the beginning of Drupal.behaviors.toolbar in core's toolbar.js to see it happening for more than a blip). The MR fixes it.

  • šŸ‡®šŸ‡¹Italy finex

    Hi, I'm also experiencing this bug.

  • Status changed to Fixed over 1 year ago
  • šŸ‡ØšŸ‡­Switzerland saschaeggi Zurich

    Thanks @bnjmnm for the fix šŸ™‡

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

Production build 0.71.5 2024