Search page not displayed correctly when using hamburger menu on Jenkins website in medium or small sized screens

[lakshmishreea122003]

When using the Jenkins website https://www.jenkins.io/ on medium or small-sized screens, I noticed that when I click on the hamburger icon to open the menu, and then click on the search icon, the search page does not show up correctly. The collapsed content does not disappear and covers the page, so I cannot see the search results or input. I can only see the search page after clicking on the hamburger icon again to close the menu.

Suggestion

It would be better if the collapsed content disappeared when clicked on the search icon or elsewhere in the background so that the search page would be seen immediately.

[krisstern]

Hi @lakshmishreea122003 Thanks for opening this issue! Could you please provide screenshots to illustrate the issue? I am asking because I cannot seem to be able to see what you saw.

[lakshmishreea122003]

when I reduce the size of the screen and click on the hamburger icon on the top-right, the page appears as in the screenshot above. In this state of the page when I click on the search icon. I cannot see the search page as the collapsed contents do not disappear, instead covers the page unlike in other popular websites in which the collapsed content disappears when clicked on the search icon or anywhere else in the background. This is not a problem in large screen.

[lakshmishreea122003]

I did look into many directories and files but was unable to figure out where the changes can be made. It would be very helpful if I can be given a clue as to where I can get started.

[krisstern]

Hi @lakshmishreea122003 Yes, I see the problem now. It appears there is significant overlapping of the navigation menu with the search modal / popup once you first reduce the size of the screen and then click on the hamburger button before clicking on the search bar. So one way to deal with it is to click on the hamburger button a second time. Or, we could improve on the UX by hiding the menu to reveal the search modal instead. I guess you would be interesed to submit a PR for the second suggestion.

You would want to update the mobile version (which I am guess maybe the android version in the generated pages). As I have not tried it yet I would not know the exact fix at the moment, but one place I would look is content/css/jenkins.css, where there are several mentioning of the navbar element. See if this is good enough information to start a PR. If not, do let us know.

[lakshmishreea122003]

Thanks for the information @krisstern. I'll start working on it.

[zbynek]

Note that the hamburger menu, searchbar and other components of the page are defined in another repository, yo can check https://github.com/jenkins-infra/jenkins-io-components/blob/main/src/jio-navbar.css

which I am guess maybe the android version

There is only one version of the pages.

[krisstern]

Thanks @zbynek for pointing this out! So if we later would like to build the website with an alternative tools then we will need to take into account this repository as well. Let me add this to the relevant GSoG ideas page over the next few days.

In the local build of the website I can see the following, hence the confusion:

[halkeye]

So this one is good from a technical point of view, but the scrollbars are a little jarring.

https://deploy-preview-63--jenkins-io-components.netlify.app/iframe.html?args=&id=example-navbar--mobile-search-box&viewMode=story

Its not immediately noticable that its scrollable in firefox mobile

@kmartens27 as the current owner of jenkins.io do you have any feelings about this?
@lakshmishreea122003 do you know if any other sites have long menus and what they do?

[lakshmishreea122003]

I have noticed a few websites use sidebars in place of scrollbars. I can proceed to try out the same if that is appropriate.
Example: https://www.mcafee.com/en-in/antivirus.html (small screen)
when we click on options like about in the collapsed content it shows up a sidebar.

sidebar

[lakshmishreea122003]

Since I had observed many websites use scrollbars I considered doing the same to fix the issue #6056 . But I shall make the necessary changes based on your suggestions.

[kmartens27]

Thanks so much @lakshmishreea122003! Thanks for looping me in @halkeye.

In reviewing the McAfee site, it appears that when the computer browser window is smaller and the About link is clicked, that selection's navigation is overlayed on the initial options

mcafee-navigation.mov

I agree with @halkeye that the scrolling option is not obvious when navigating the Jenkins page, and the McAfee site seems to have a bit of different functionality. Is the concern for smaller browser windows or mobile usage? The McAfee site also functions differently depending on which type of device is used, so this clarity would help.

The scrolling bars would absolutely help in cases where the browser window is so small that the list of navigation links is cut off/unable to be scrolled. Also, is the goal to ensure the search is shown when clicked/enabled or is it to make the navigation function differently? Finally, what are the smallest and largest dimensions you're working with when it comes to screen size?

[lakshmishreea122003]

This topic is related to the issue #6056 .
Yes, the concern is for smaller browser windows or mobile usage of size less than 991px(width).
I did work on this issue #6046 and PR is merged as well. The concern now is related to issue #6056 which is related to making the navigation function differently.

[lakshmishreea122003]

If using scrollbars is not appropriate to fix issue #6056 , in that case please do let me know what else can be done. This will help me work on the issue #6056 in a better manner and make necessary changes to PR jenkins-infra/jenkins-io-components#63 .

[lakshmishreea122003]

@kmartens27 I have previously tried to answer the questions you asked .
If using scrollbars is not appropriate to fix issue #6056 , in that case, please can you give me a clue as to what exactly is expected. This will help me work on the issue #6056 in a better manner and make necessary changes to PR jenkins-infra/jenkins-io-components#63 .

[kmartens27]

Hi @lakshmishreea122003, sorry for not responding sooner, I was trying to find some other examples of sites with similar functionality. As an alternative option, would it be possible to collapse some of the navigation links into their larger subject?

For example, the sub-headers for "User Guide" could be collapsed underneath it. Similarly, the "Guided Tour" and "More Tutorials" subsections could collapse into the "Tutorials header.

That would help to reduce the length of the box that comes up, and may reduce the need for the scroll bars, or at least make it more transitional.

The other quirk I noticed is that the Algolia search now appears on top of the hamburger and disables it from use, unless the search is cancelled out.

Would it be possible to restore the navigation buttons function in this sort of state?

[halkeye]

The other quirk I noticed is that the Algolia search now appears on top of the hamburger and disables it from use, unless the search is cancelled out.

I think thats the nature of storybook, I didn't setup storybook to have 0 padding like jenkins.io does

we don't really have any control on how algoila works or where it shows up, not without doing custom UI

[halkeye]

longer term i'd like to see the nav bar to be able to infinitely nest, that'll kinda fix the issue with number of results.

[kmartens27]

That makes sense @halkeye, thanks for clarifying!

[lakshmishreea122003]

Thanks for the information.
I shall work on the issue #6056 as per all your suggestions.