How to Create a Custom Sidebar Menu in the Solo Theme, Ensuring that Sub-menus Remain Open if They Contain an Active Link

Hello,

Below are the detailed steps for accomplishing the task with the Solo theme:

1. Download the Development version → .
2. Copy the file from the path ../solo/templates/navigation/menu--primary-sidebar-menu-template.html.twig to the directory ../cat_tobi/templates/navigation/. Once copied, rename the file to menu--labelling-system.html.twig. I think this is the name for the menu. https://cat-tobi.upf.edu/labelling_system
3. Incorporate the JavaScript by adding it to the file located at ../cat_tobi/js/cat-tobi-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);

4. Integrate the CSS by adding it to the file located at ../cat_tobi/css/cat-tobi-style.css
   

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

5. Clear the cache to apply the changes, and the process is complete!

Note: The Sole theme does not utilize jQuery. Should you incorporate any jQuery code, it will be necessary to include it as a dependency within the cat_tobi.libraries.yml file.
This video is for custom menu templates in Solo. https://www.youtube.com/watch?v=UJpNOawzl9E&list=PLZVSLeSmRrd1nqYAFOyalL...

Please follow these steps to ensure the task is completed correctly. If you have any questions or need further assistance, feel free to reach out.

Best wishes,
Alaa

My dear Saïd...

templates do not apply in my site, not directly to solo theme nor to the subtheme...

As I was facing this problem I completely uninstalled both the subtheme and solo them, and erased all of the files and directories and cleared cache, then I reinstalled solo theme, I have tried copying every menu template (and not template) to the menus I have available (menu--c.html.twig, menu--refer.html.twig and menu--labelling-system.html.twig), inside the templates directory of solo: eg.: cp menu--primary-sidebar-menu-template.html.twig menu--labelling-system.html.twig, but there were no changes whatsoever....

Then, after creating the navigation directory inside templates, I proceeded to install the subtheme and perform the exact same actions copying the theme menu twig files to the appropriate directory, cp templates/navigation/menu--primary-sidebar-menu-template.html.twig cat-tobi/templates/navigation/menu--labelling-system.html.twig

I have cleared cache every time, but there was no change at all in any of the atemps...

Hello,

It looks like you're tackling a complex issue with theme templates not being applied on your Drupal site. When dealing with such scenarios, indeed, module conflicts can be a common culprit. Modules, especially those that manipulate rendering or output, can sometimes interfere with how themes apply their templates. Disabling or testing the site without certain modules can help identify if a module is causing the issue.

Additionally, consulting Drupal's log messages can provide invaluable insights. Errors or warnings logged in /admin/reports/dblog often point directly to the source of problems, including issues related to theme templates. These logs can indicate if there are PHP errors, missing files, or other issues that prevent templates from being applied correctly.

I attached the sub-theme → I used for testing, and it has a custom template menu for sidebar.

Best of luck with resolving the template application issue.

Alaa

Choukran again, with your new development for my theme, menu template did apply, I though I will have to uninstall devel/development modules but it was not necessary at the end....

A little issue with menus, background is overlapping, how do I solve it, I've been looking around and the solution seems to be z-index, but some places discourage the use of it, I'm adding a video → for you to see what's going on...

Thanks

Hello,

I've made some adjustments to the z-index applied to all menus. In certain cases, such as when the menu is on the side or a helper menu, we might not need it. I've modified the code in the solo development environment to prioritize the main menus, giving the primary menu or primary side menu a higher z-index, while other menus will have z-index values of 1, 2, and 3. Feel free to download the development environment; it contains the latest code.

Best wishes,
Alaa

Sorry I didn't answer before, I was busy doing some other jobs and some other stuffs for this site also, I was retaking the issue after that, but today I realized there was a Solo update, after updating, the issue about overlapping menus went away, so you save me a good deal of time.....

thanks, million thanks as always almuealim alkabir!!

No worries at all! I'm glad to hear that the update resolved the overlapping menu issue and saved you some time. If there are any more questions or further assistance needed, feel free to reach out. Happy to help!