Hamburger Icon in small screen is not working

[Aarav238]

Describe the bug
Hamburger icon is not containing any data and it is useless to keep this in the navbar.

To Reproduce
we can remove this icon or make it disable, we can also give some list that will render when we click on icon.

1. Go to 'Homeapage'
2. Click on 'Inspect and make screen samll'
3. Scroll down to 'then you will see the hamburger icon and click on it'
4. See error

Expected behavior
It should not be there or should not show blank page on clicking on it.

Screenshots
If applicable, add screenshots to help explain your problem.

Software (please complete the following information):

• OS: Windows
• Browser: Chrome
• Volto VersionL: 17.1.1
• Plone Version : 6.0.6
• Plone REST API Version: 8.40.0

[Aarav238]

@sneridagh Please assign this to me.

[davisagli]

@Aarav238 We do not assign issues in the plone organization. Please follow our contribution guidelines: https://6.docs.plone.org/contributing/first-time.html

[davisagli]

The hamburger menu is only empty if there are no items in the site's navigation. In that case it would make sense to hide the hamburger icon.

[Aarav238]

Yeah @davisagli , that will be better than removing it, So I have signed the contributor agreement. How much will it take for confirmation?

[stevepiercy]

@Aarav238 if you read First-time contributors, then you would have read the linked section Contributing to Plone, which contains the answer you seek.

[Aarav238]

Yeah thanks @stevepiercy , I have signed the agreement and am excited to contribute.

[ichim-david]

The hamburger menu is only empty if there are no items in the site's navigation. In that case it would make sense to hide the hamburger icon.

@davisagli @Aarav238 Personally I think that we are trying to solve a non-existent issue as in real-world scenarios Volto is tied to a CMS which by definition has content that requires navigating the website.
When you create the Plone Site it comes with some content added by default.
If you really have this SPA one page only I'm sure you can add a CSS rule to hide the navigation button or you would use something that is a better fit for that kind of content.

[Aarav238]

@ichim-david Thanks for this, So should I work on this @davisagli ?

[davisagli]

@Aarav238 You're welcome to work on it if you want to. I agree with @ichim-david that it's not a critical issue, but it also sounds pretty easy to fix.

[Aarav238]

Okay @davisagli , I wil raise a PR as soon as possible. Thanks !!

[Aarav238]

@davisagli I have read the contribution documentation , so can you please how to setup volto for development locally ?

[stevepiercy]

@Aarav238 now continue your education by reading more of the same documentation at https://6.docs.plone.org/install/install-from-packages.html. We do not provide support on GitHub. If you need support, use https://community.plone.org/.

[Ravi-kumar9347]

Hello there,

I hope this message finds you well. I'm relatively new to the Plone community. I've successfully set up the project on my local laptop, and I'm enthusiastic about contributing to Volto. We can solve the above issue by using these steps

1. Introducing a state variable hideHamburger to manage the visibility of the Hamburger icon.
2. Check if the navigation items are empty or undefined to determine whether to hide the Hamburger icon.
3. Set the hideHamburger state based on the condition.
4. Update the component's class dynamically using the hide-hamburger class when hideHamburger is true.
5. Applie CSS to hide the Hamburger icon when the hide-hamburger class is present.
6. Ensure the CSS rule targets the mobile Hamburger icon by selecting the .hamburger-wrapper.mobile element.

can you help me that these steps is suitable or not for above issue?
and can you you help to find out the path of related CSS files for above one?

Your assistance will be greatly appreciated. Thank you!

[Aarav238]

@Ravi-kumar9347 I think now it is working properly , it rendering those items from props ig and we need to check when we are not getting any items in props for navigation.

[Aarav238]

@Ravi-kumar9347 You setup this using containers or locally?

[Ravi-kumar9347]

I set up backend and frontend locally

[Ravi-kumar9347]

@Aarav238 can you please help me to find out the css files?

[Aarav238]

There is no need of finding css files , just check whether items are empty or not and conditionally render the icon.