[FEATURE] Create sidebar drawer for Documentation sidebar in docs page

[Monilprajapati]

Is this a unique feature?

• I have checked open AND closed issues and this is not a duplicate

Is your feature request related to a problem/unavailable functionality? Please describe.

Currently, on the mobile screen, the documentation page sidebar appears at the top, with its content positioned below the sidebar. I believe this issue is related to the flex property. This layout is not providing an optimal user experience for reading the documentation. I am attaching a preview of the problem for your reference.

docs.mp4

Proposed Solution

What I plan to do is add a fixed rounded button to the right bottom of the screen. This button will serve the purpose of opening the sidebar for mobile screens. When the user clicks on this button, the sidebar will open. Additionally, when the user clicks on a specific topic within the sidebar, it will close. It's worth noting that the sidebar will be present on the docs page, ensuring that when a user clicks on any content, the sidebar will close, allowing for easy reading of the documentation.

Screenshots

I have shared the preview of the problem, and I will update you with the preview of the solution shortly.

Do you want to work on this issue?

Yes

If yes to above, please explain how you would technically implement this

It will be an easy task for me. I will create a sideDrawer component to manipulate the document sidebar for the mobile screen. I will also incorporate smooth transitions and animations, similar to what I have added in the feature section under issue #9874. Additionally, I plan to make the navbar sticky after a certain scroll. This way, users won't need to scroll to the top to access the links and other navigation elements. This enhancement will be addressed within the same issue. The preview for it will be provided shortly.

ℹ️ Monilprajapati has some opened assigned issues: 🔧View assigned issues

[github-actions]

To reduce notifications, issues are locked until they are 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned) and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[amandamartin-dev]

Can you provide some mock of how this would look? I am also opening for discussion so others can weigh in on whether or not this is a feature to add or the UX is adequate for folks.

[Monilprajapati]

Hey @amandamartin-dev, here it is :

Checkout the animation of the Navbar and the Sidebar drawer button on right side bottom of the screen.

Before :

docs.mp4

After :

Biodrop.mp4

[amandamartin-dev]

@Monilprajapati Thank you so much for providing this mock. I personally find this a bit confusin becuase of the dual nav entry points and also the fact that the popover menu obscures the top navigation. I will leave this open as a discussion though for now and ultimately Eddie/Sara will make the final decision on if we want to go this direction! It is an interesting idea. Appreciate your time

ℹ️ amandamartin-dev has some opened assigned issues: 🔧View assigned issues