Fix BrandNavbar burger doesn't show submenus

[stefanocudini]

Fix follow problem, submenu items in custom menus

hidden only in collapsed menu button

Some fix inside .gn-brandmenu-bottom (collapsed menu)

• fix click events brad_navbar
• fix paddinds in submenus
• fix style in less code

Result of the PR:

submenu.mp4

For testing this fix is require to creare some menu and menu ites by admin interface, placed in TOPBAR_MENU_LEFT

NOTES:

• part of old code appeared to be unused.
• a possible improvement, but one that might break some dependencies with other projects, is to separate the block_script into a separate template file.

[gemini-code-assist]

Summary of Changes

Hello @stefanocudini, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a critical display and interaction bug within the BrandNavbar component, specifically concerning its burger menu and submenus. The changes ensure that when the navigation bar is collapsed, submenus are properly styled and can be interactively opened and closed by users, significantly improving the user experience for mobile and smaller screen sizes.

Highlights

• Submenu Visibility Fix: Resolved an issue where submenus in the BrandNavbar's burger menu were not displaying correctly when the navbar was collapsed.
• Collapsed Menu Styling: Applied specific CSS adjustments to the collapsed menu (.gn-brandmenu-bottom) for proper submenu appearance, including overriding default positioning, removing shadows and borders, and adjusting padding.
• Click Event Handling: Implemented JavaScript logic to correctly handle click events on dropdown buttons within the collapsed menu, allowing submenus to toggle open/closed interactively.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully fixes an issue where submenus in the collapsed 'burger' navigation bar were not functional. The approach involves adding a JavaScript click handler to toggle the visibility of submenus and adjusting the CSS to ensure they are displayed correctly within the collapsed menu structure. The changes are logical and effective. My review includes a few suggestions for cleaning up leftover code from development, such as commented-out blocks and a console.log statement, to improve code clarity and maintainability. I also noted the use of !important in the CSS, which could be revisited for better long-term maintainability.

[stefanocudini]

hi @dsuren1
I saw your code added here.
I can't replicate the use of the condition in else.
I have a menu configured by admin to have custom menus with sub-items.
But this block never seems to be used.
I'd like to make sure I'm not missing a specific condition in the menu configuration.

[stefanocudini]

@giohappy @dsuren1 in last commits i just remove css !important

[dsuren1]

@stefanocudini
Thanks for the PR. I believe the change mentioned below should be sufficient to achieve the desired outcome without modifying the expected behavior or styling

geonode-mapstore-client/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html

Lines 112 to 117 in 70bfa4c

	const clone = item.cloneNode(true);
	if (clone.tagName === 'LI') {
	menuBottomUl.appendChild(clone);
	} else {
	const items = clone.querySelectorAll(':scope > li');
	items.forEach(item => {

Change required

  const clone = item.cloneNode(true);
+ const hasDropdown = clone.tagName === 'LI' && (clone.querySelector('.dropdown') || clone.querySelector('.dropdown-toggle'));
- if (clone.tagName === 'LI') {
+ if (clone.tagName === 'LI' && !hasDropdown) {
    menuBottomUl.appendChild(clone);
} else {
- const items = clone.querySelectorAll(':scope > li');
+ const items = clone.tagName === 'LI' ? [clone] : clone.querySelectorAll(':scope > li');

Expected output

[stefanocudini]

Change required

  const clone = item.cloneNode(true);
+ const hasDropdown = clone.tagName === 'LI' && (clone.querySelector('.dropdown') || clone.querySelector('.dropdown-toggle'));
- if (clone.tagName === 'LI') {
+ if (clone.tagName === 'LI' && !hasDropdown) {
    menuBottomUl.appendChild(clone);
} else {
- const items = clone.querySelectorAll(':scope > li');
+ const items = clone.tagName === 'LI' ? [clone] : clone.querySelectorAll(':scope > li');

hi @dsuren1 thankyou for the suggestions, the rest internal logic in else block remain the same as the original?
Because in this way all submenu remain expanded..

[dsuren1]

hi @dsuren1 thankyou for the suggestions, the rest internal logic in else block remain the same as the original? Because in this way all submenu remain expanded..

Yes, I believe that is the behavior it was intended to have if it were functioning correctly. The idea of adding a collapsible menu button inside the dropdown is good, but it should be reviewed.

@giohappy and @allyoucanmap your thoughts on this?

[allyoucanmap]

@dsuren1 @stefanocudini for the moment I would prefer to keep the current behavior without button to expand the menu.

[dsuren1]

@allyoucanmap Thanks for the clarification.

@stefanocudini Could you kindly update the PR to clean up commented out code. Thanks!

[allyoucanmap]

@dsuren1 sorry again, I had an exchange with @stefanocudini and we will try his proposal, I just noticed the video in description