Menu problem in left sidebar

Hello,

Sidebar first and second regions use a custom menu template. You will need to create a custom (Horizontal/Vertical) menu template in the sub-theme.

I am attaching a sub-theme gmpe with with a custom template. I copied the vertical menu--primary-sidebar-menu-template-click.html.twig and renamed it menu--minerali.html.twig and also copied the css you injected into the style.css and added your logo.

For more information on menus, check out: https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/s... →

Best wishes,
Alaa

Thank you so much for the customization.

I have two more requests, if possible.

1. After opening the submenu, it should remain open otherwise the user does not know, or remember, if there are other links in the submenu. To find out he would have to reopen the link, and it doesn't occur to him to check, so he may not see some pages.

2. Can the space between links be reduced? I have menus with more than 20 links and it would become too long.

Thank you and greetings

Hello,

To ensure the clicked menu remains open, I've provided a solution at this link: https://www.drupal.org/project/solo/issues/3420931 💬 How to Create a Custom Sidebar Menu in the Solo Theme, Ensuring that Sub-menus Remain Open if They Contain an Active Link Fixed . Below is the necessary code to implement this feature.

For the CSS part, incorporate it into your sub-theme at ../gmpe/css/gmpe-style.css.

#page-wrapper .navigation-sidebar-template ul li.is-active > ul {
  display: block;
}

For the Javascript part, incorporate it into your sub-theme at ../gmpe/js/gmpe-script.js

((Drupal, drupalSettings, once) => {
  'use strict';

 Drupal.behaviors.addClassToParentUl = {
    attach: function (context, settings) {
      // Find all active list items within the context.
      const activeItems = context.querySelectorAll('.navigation-sidebar-template ul li.is-active');

      activeItems.forEach((item) => {
        // Find the closest UL ancestor of the current item.
        let closestUl = item.closest('ul');

        // Add 'toggled' classes if not present.
        if (!closestUl.classList.contains('toggled')) {
          closestUl.classList.add('toggled');
        }
      });
    }
  };

})(Drupal, drupalSettings, once);

*Regarding the space between links, add the below css to the sub-theme ../gmpe/css/gmpe-style.css

#page-wrapper .navigation-sidebar-template li a,
#page-wrapper .navigation-sidebar-template li button {
  padding-top: 4px!important;
  padding-bottom: 4px!important;
}

*Note: This code corresponds to the custom template included in the sub-theme, which utilizes the ".navigation-sidebar-template" class. To use a different template, simply replace the class name in the code with that of your chosen template.

Best wishes,
Alaa

Fantastic, thanks, it works perfectly, even if there is still a lot of space between the links: http://testns.gmpe.it/cms/biologia/biologia

Thanks for your patience

Hello,

Adjust the line height to suit your preferences. Modify the existing code to incorporate line height (line-height: 18px;). You're encouraged to experiment with this value to achieve the desired effect.

#page-wrapper .navigation-sidebar-template li a, 
#page-wrapper .navigation-sidebar-template li button {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 18px;
}

Please note: If you choose to reduce the line height, it might be a good idea to turn off the underline hover animation. To achieve this, simply navigate to the theme settings and add (dis-anim-link) in the "CSS Classes Only" field for the specific region you wish to modify.

Best wishes,
Alaa

Thanks, it works but I like it better the way it was before.

Thank you and Regards

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

I'm sorry to have to reopen the post, but on the test site: http://testns.gmpe.it/cms/ everything works perfectly, while on the new site I'm preparing: https://prova.gmpe.it/ the menus don't work correctly.

1. In the test site, all the menus are vertical without inserting the menu--xxxx.html.twig file into the template, using only the css. In the new site, the menus become vertical only by inserting the file for each menu.
2. On the test site, the submenus remain open, while on the new site they do not.
Compare the Biologia menu: http://testns.gmpe.it/cms/biologia/biologia and the Meteorologia menu: https://prova.gmpe.it/meteorologia/latmosfera

What could it depend on?

Thank you and greetings

Hello,

I checked this site http://testns.gmpe.it/cms/biologia/biologia and in the screenshot, I can see menu--minerali.html.twig and menu--biologia.html.twig suggestions. However, you should see menu--biologia.html.twig and menu--sidebar-first.html.twig. It's unclear why you have these suggestions.

Test Site

Demo Site

Please follow these steps to ensure there are no hooks in the sub-theme:

1. Ensure you are using Solo version 1.0.5.
2. Navigate to the menu structure page and confirm that the "biologia" menu is listed.
3. Ensure there is no gmpe_preprocess_block function in the sub-theme.
4. Delete themes/custom/gmpe/templates/navigation/menu--minerali.html.twig.
5. Copy themes/contrib/solo/templates/navigation/menu--primary-sidebar-menu-template-click.html.twig to themes/custom/gmpe/templates/navigation/ and rename it to menu--sidebar-first.html.twig.
6. Clear the caches. This template will now be used for any menu added inside the "sidebar first" region, and the same applies to all regions.
7. To keep the clicked menu open, ensure that the CSS/JS files are working correctly.

Note: The menu is open on load, but it will close if you click anywhere. To disable this feature, use the following code in your JavaScript file:

document.addEventListener('click', (event) => {
  if (event.target.closest('.navigation-sidebar-template')) {
    return;
  }
  event.stopPropagation();
}, true);

Best wishes,
Alaa

Thank you for everything you are doing for me.
Unfortunately it doesn't work.

0. In CSS Injector I have:
#page-wrapper .navigation-sidebar-template ul li.is-active > ul {
display: block;}
00. In gmpe-script.js I have:
((Drupal, drupalSettings, once) => {
'use strict';
……………………
1. ok
2. I don't have the Biologia menu because I haven't created it yet, but I have other menus.
3. I can't find it: where should I look?
4. ok
5. ok
6. ok
7. I'm not an expert: how do I know if they work correctly?

Thanks and best regards

Hello,

Please add all the CSS to ../gmpe/css/gmpe-style.css; there's no need to use the CSS injector. To verify that the styles are working correctly, disable aggregation, view the page source, and look for gmpe-style.css and gmpe-script.js. Currently, I see the CSS but not the JavaScript.

In the screenshot, I see the CSS classes block block-menu navigation menu--biologia (http://testns.gmpe.it/cms/admin/structure/menu/biologia).

For debugging, you can add two or three menus to the sidebar first and inspect the Twig suggestions as shown in the screenshot. You should always see the menu name followed by the region name suggestion, as demonstrated in the example screenshot.

Ensure there is no gmpe_preprocess_block function in the sub-theme. It should be in gmpe.theme.

Best wishes,
Alaa

1. I have loaded all the CSS into gmpe-style.css
They all work except:
#page-wrapper .navigation-sidebar-template ul li.is-active > ul {display: block;}
In http://testns.gmpe.it/cms/ it works and the menus are vertical.

2. I have disabled CSS and js aggregation.
I see them both.

3. Except Biologia, I have menu Approfondimenti/Minerali, Rocce, Fossili, etc
On the test site there are suggestions, on the new site there are none. They are completely different.

4. gmpe_preprocess_block is not there. You can check the zip in this post.

If I can't get the menu to work exactly like the one on the test site, which is perfect, I completely uninstall the site and recreate it from scratch.

Thanks and best regards

Hello,
You will need to enable the twig debugging to see the twig suggestions. https://www.drupal.org/docs/develop/theming-drupal/twig-in-drupal/debugg... →

#page-wrapper .navigation-sidebar-template ul li.is-active > ul {display: block;} In http://testns.gmpe.it/cms/ it works and the menus are vertical. It is targeting the verticals only, you can include the horizontal or any other. Simply add the div wrapper around the menu.

gmpe_preprocess_block is not there. You can check the zip in this post.
I don't see any files.

Best wishes,
Alaa

#page-wrapper .navigation-sidebar-template ul li.is-active > ul {display: block;} In http://testns.gmpe.it/cms/ it works and the menus are vertical. It is targeting the verticals only, you can include the horizontal or any other.

Of course it works in http://testns.gmpe.it/cms/, but it's in the new site https://prova.gmpe.it that it doesn't work. That's why I reopened the post.
I think the only thing to do is to uninstall everything and start over.

Thanks and best regards

I completely uninstalled the site and reinstalled. Now the menus work correctly, but I have to add the menu--xxxxx.html.twig file for each menu (21 files). That's fine.
Who knows why on the test site the menus work even without those files.

Now I have a new problem: the image in Top First Container has a strange border. I don't understand what it depends on. This problem had never arisen in previous installations.

Thanks and best regards

I'm sorry to reopen the post for the umpteenth time, but I'm recreating the site with Drupal 11 (https://prova.gmpe.it/) and the problem occurs again: the menu in the sidebar is horizontal.
I would like it to be exactly like on this site: https://cat-tobi.upf.edu/labelling_system/tonal_representation/pitch_acc...

- Drupal 11.0.5
- Solo 1.0.11
- CSS

#page-wrapper .navigation-sidebar-template ul li.is-active > ul {
  display: block;
}
#page-wrapper .navigation__primary li {
  --r-br: #B1B894;  /* New border color */
}
#page-wrapper .navigation-sidebar-template li a,
#page-wrapper .navigation-sidebar-template li button {
  padding-top: 4px!important;
  padding-bottom: 4px!important;
}

- js

/**
 * @file
 * This file is to add any custom js for the Solo Sub-theme.
 */

((Drupal, drupalSettings, once) => {
  'use strict';

 Drupal.behaviors.addClassToParentUl = {
    attach: function (context, settings) {
      // Find all active list items within the context.
      const activeItems = context.querySelectorAll('.navigation-sidebar-template ul li.is-active');

      activeItems.forEach((item) => {
        // Find the closest UL ancestor of the current item.
        let closestUl = item.closest('ul');

        // Add 'toggled' classes if not present.
        if (!closestUl.classList.contains('toggled')) {
          closestUl.classList.add('toggled');
        }
      });
    }
  };

})(Drupal, drupalSettings, once);

Where am I going wrong?

Thanks and best regards

Hello,

It seems that a contrib module related to menus is preventing the sidebar menu from inheriting the default template. The workaround is to create a custom Twig template for each menu you add to the sidebars.

Any side menu if you don't have this module will act like https://cat-tobi.upf.edu/labelling_system/tonal_representation/pitch_acc....

Best wishes,
Alaa

Thanks. It was the Menu Block module that was causing the problem. I uninstalled it and it deleted all menus. I had to re-insert them all.

There is still one thing that doesn't work: the submenu arrow appears only when you click on the menu.
See for example: https://www.gmpe.it/rocce/rocce

Thanks and best regards

Hello,

The menu on the page isn't rendered. Please check the menu configuration to ensure it's correctly assigned to the intended region.

Best wisehs,
Alaa

In the menu block I selected: Expand all menu links and now it works.
Strange, I had never selected this option.

Thanks and kind regards

I tried removing the js file and the site works the same.
I still need to put Expand all menu links.

Best regards