Problem/Motivation

The old toolbar let you click on top level admin menu items (IE Configuration, Appearance, etc).

Now you have to hover over the item, then click the top level item under it (with Admin Navigation Tools).

This makes the UI slower to use and more confusing for users familiar with how the old toolbar worked.

Even more confusing, SOME of the top level links are clickable, IF they don't have children.
Appearance, Extend, People can be clicked, but not Structure, Configuration, Reports.

Steps to reproduce

Click on a top level navigation item (that has children).
Nothing happens.

Proposed resolution

Make the top level items clickable, navigating to the top level config page.
Don't make them linked on mobile - need to be able to open the menu.

Admin Navigation clickable top links

Admin navigation clickable top links setting

Remaining tasks

Approve proposal and write patch.

User interface changes

Top level admin links are clickable.

API changes

None.

Data model changes

Update config schema.

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

mortona2k created an issue. See original summary.

mortona2k’s picture

Issue summary: View changes
wkr1shna’s picture

Assigned: Unassigned » wkr1shna

wkr1shna’s picture

Status: Active » Needs review

I've opened [MR !2](https://git.drupalcode.org/project/admin_navigation/-/merge_requests/2) for this issue.

The implementation adds configurable top-level navigation links on desktop while preserving submenu toggling on mobile. It also includes configuration schema updates and Kernel test coverage.

JavaScript syntax and Git whitespace checks passed locally. PHP Kernel tests and browser-level interactions have not yet been executed because the required local testing environment is unavailable.

Feedback and review are welcome.

anjuelsaphilip2020’s picture

StatusFileSize
new276.7 KB
new236.2 KB

Hi, I've verified and tested MR !2 for the Admin Navigation module on the 1.1.x-dev version. The top-level navigation items are navigating to their overview pages as expected. However, the submenu does not appear when hovering over the top-level items.
Following steps I followed:

  1. Hover over a top-level navigation item with child items, such as Configuration.
  2. Observe whether the submenu appears.
  3. Click the Configuration item.

Testing Result: After applying the patch, clicking the top-level Configuration item successfully navigates to the Configuration overview page. However, hovering over the item does not display the submenu, which may prevent users from accessing the child menu items.

Attaching screenshots for reference.
Thanks

anjuelsaphilip2020’s picture

Status: Needs review » Needs work
wkr1shna’s picture

Thanks for testing the MR and reporting this! I'll investigate the hover behavior, fix the submenu regression while preserving the top-level navigation functionality, and update the existing MR once the fix is tested.

mortona2k’s picture

Feedback from claude:

1. Keyboard regression with "Hide duplicate popover headers" on. The MR changes the click handler in admin-navigation-top.js to do nothing on keyboard activation (e.detail === 0). With headers hidden, Enter only opens a popover that has
   no header link, so keyboard users can no longer reach the parent page. Ours still navigates on Enter in that case.
2. Wrong breakpoint. The MR treats anything wider than 768px with a hovering pointer as desktop. Core switches to its mobile drawer at 1023px and turns hover off below that (toolbar-popover.js:108). Between 769 and 1023px, the MR makes
   a click navigate away while core expects the click to open the popover. Ours uses 64rem (1024px), the same as core.
3. A stray ~ CSS rule. The MR adds control[aria-expanded="true"] ~ wrapper { transform: translateX(var(--admin-toolbar-sidebar-width)) } with no media query and no position scoping.
   - Core applies that transform only at 64rem and up. Below that, --admin-toolbar-sidebar-width is 80vw, so on a phone an open popover would probably be pushed most of the way off-screen.
   - The rule isn't needed anyway: the MR's own comment says appending the link keeps the control and wrapper adjacent.
4. Sidebar hover details are missing. The pointer sits on the link, so the button never matches :hover. Ours fixes the side effects of that; the MR does none of these:
   - re-creates core's hover style on the button;
   - shows core's safe triangle;
   - passes the cursor position to the triangle (--safe-triangle-cursor-x/y).

   Without the safe triangle, moving the mouse diagonally into the submenu can close it, which may be part of the regression reported in #6. I haven't confirmed that.
5. Two code paths. The MR keeps the overlay code in admin-navigation-top.js and adds a second copy in admin-navigation-general.js. Nothing sets which runs first, so if top.js runs first, the hover-open and click handlers are bound
   twice. Ours moves the overlay into general.js only, and the position libraries declare a dependency on admin_navigation.general so it loads first.
6. Existing sites change behavior on update. The MR has no update hook, and ?? TRUE turns the feature on for every existing site. Ours adds admin_navigation_update_10001(), which sets it to FALSE for existing sites; only new installs
   get it on by default.
7. Dead code. The admin-navigation-top-level-clickable class it adds to <html> isn't used by any CSS.
8. Touch screens. The MR hides the overlay on all touch screens. Ours keeps it there when headers are hidden, because then the item is the only route to its own page.

I uploaded a patch that I've been using locally.

mortona2k’s picture

Issue summary: View changes
mortona2k’s picture

The reported issues are resolved, but there are tests failing.

I added an issue to add a .gitlab-ci.yml file: #3635700: Configure CI pipelines.

You should get the test tools setup locally so you don't have to wait for the CI. But you can merge that branch in here and the tests should run.

wkr1shna’s picture

I've integrated the CI configuration from issue #3635700 into the existing MR branch and set up a local Drupal testing environment.

I also resolved the PHPUnit test setup issues and addressed the failures in `AdminNavigationSettingsTest.php`.

Local verification:
- PHPUnit: 6 tests passed, 52 assertions.
- PHPCS (Drupal and DrupalPractice): 0 errors, 0 warnings.

All eight previously addressed review findings have been preserved.

The updated changes are pushed to the existing MR !2. Could you please take another look?

mortona2k’s picture

Better, but still some feedback from LLM. The first one is the most important.

1. Bug: on phones, with the bar at the top or bottom, tapping Structure in the mobile drawer leaves the page instead of opening its submenu. The handler that sends keyboard Enter to the parent page (js/admin-navigation-general.js:217) is added whenever admin-navigation-hide-headers is on , at any screen width. That option is on by default in the Position settings.
- Before, this code was in admin-navigation-top.js, which does nothing below 769px, so this is a regression from moving the code.
- Below 769px the headers are not actually hidden: that CSS rule only applies at 769px and up. Core's normal drawer is shown there, but the tap on the button still leaves the page. The children can only be reached through the parent page, which contradicts what the README says about touch screens.
- Fix: check the width when the click happens (if (!window.matchMedia('(min-width: 769px)').matches) return;), or only add the handler at that width.
2. Leftover test assertion. tests/src/Kernel/AdminNavigationSettingsTest.php:131 checks that admin-navigation-top-level-clickable is absent. That class was removed as dead code in the last round, so the assertion can never fail. Drop it.
3. The explicit schema checks are redundant. Kernel tests already check config against its schema on every save, so the SchemaCheckTestTrait calls add nothing. This is minor and fine to keep.
4. Update hook number. admin_navigation_update_10001() works: existing sites start from schema 8000 and new installs skip it. Since the module requires ^11.2, 11001 would match the usual numbering. It's cosmetic, but it can't be renamed once released.
5. No automated test of the behavior itself. The tests only cover config, the form, the hooks and the update hook. A FunctionalJavascript test of clicking versus hovering a parent item would protect what this MR is for. It's optional for this MR.