Proposal: menu (below navbar-header) should be responsive design and not always horizontal

Hi XWiki Community,

I am improving our company XWiki instance (hosted and managed by XWiki SAS) and I am becoming more familiar to XWiki.

It would be great to support responsive design for the menu.
Currently it is generated as a menu-horizontal which is OK on a computer screen:

But in a mobile device, it is not relevant any more:
image
As it should be vertical!

How to fix it in a clean way?
A javascript fix to change the class menu-horizontal to menu-vertical?

PS : I do not seen any XWiki instance with an horizontal menu beeing kept for mobile device. See for example: xwiki.org or extensions.xwiki.org on which the menu simply disappear for small screens…

Hope to see it correctly implemented in the future.

Best Regards,
Luc

This is a simple application that helps you create navigation menus to be displayed either horizontally as a top bar after the page header or vertically in a side panel. The application has been written using the App Within Minutes Application so you should be familiar with the home page.

From https://extensions.xwiki.org/xwiki/bin/view/Extension/Menu%20Application#HDescription

In the definition of this menu, it’s clearly defined that the menu comes with a set orientation. You can use the Panel Menus if you want a vertical menu.

From what I remember, the template used to generate the content of the menu changes depending on whether you’re in a vertical or horizontal menu, so just swapping one class very probably won’t work. This is an old feature, and the code quality isn’t very good in today’s context, so I doubt there’s a quick and easy fix. I tried improving things last year when I updated the horizontal menu’s accessibility, but I’m pretty sure there’s still a few differences in the models that makes it so that they cannot be easily swapped.


If you think this feature is necessary for XWiki, you’re welcome to contribute to the project either by implementing it yourself or sponsoring its development.

In any case, the first step would be to open an improvement ticket on our Jira.


Have a good day!
Lucas C.