Skip to content

Conversation

@Amr-elwetaidy
Copy link
Contributor

Fix Logo/Icon Navigation Behavior

Description

This PR fixes an issue where clicking on the site logo or icon to navigate to the admin index page would first trigger the site dropdown menu before navigating. The fix prevents event propagation when clicking on these navigation elements, ensuring a smoother user experience without changing the visual appearance.

Changes

  • Added x-on:click.stop Alpine.js directive to logo and icon links in both site_logo.html and site_icon.html templates
  • The directive is conditionally applied only when site_dropdown is present, maintaining compatibility with configurations that don't use the dropdown

Problem Solved

Previously, when a user clicked on the logo or icon to navigate to the admin index page, the click event would:

  1. First trigger the dropdown toggle (due to event bubbling to the parent container)
  2. Then navigate to the admin index page

This created a jarring user experience where the dropdown would briefly appear before navigation occurred. With this fix, clicking on the logo or icon will:

  1. Stop event propagation (preventing the dropdown from opening)
  2. Navigate directly to the admin index page

Testing

Tested in various scenarios:

  • With site dropdown enabled/disabled
  • With both logo and icon configurations

@lukasvinclav
Copy link
Contributor

Good catch! Your code works but I choosed different approach here #1175. I just changed the a for a span without any href. Meanwhile, I found some other smaller issues like: 1. shrinking site icon 2. no truncate if the title is long 3. and wrong vertical center of title and description.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants