search

EddieHubCommunity / BioDrop

Connect to your audience with a single link. Showcase the content you create and your projects in one place. Make it easier for people to find, follow and subscribe.
https://biodrop.io
MIT License
5.73k stars 3.97k forks source link

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

Open Monilprajapati opened 7 months ago

Monilprajapati commented 7 months ago

Is this a unique feature?

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.

https://github.com/EddieHubCommunity/BioDrop/assets/99136041/f76a3dc7-c996-49d4-b3ab-cce4384b3e05

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[bot] commented 7 months ago

To reduce notifications, issues are locked until they are https://github.com/EddieHubCommunity/BioDrop/labels/%F0%9F%8F%81%20status%3A%20ready%20for%20dev and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

amandamartin-dev commented 4 months ago

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 commented 4 months ago

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 :

https://github.com/EddieHubCommunity/BioDrop/assets/99136041/f76a3dc7-c996-49d4-b3ab-cce4384b3e05

After :

https://github.com/EddieHubCommunity/BioDrop/assets/99136041/1f295053-2710-4801-9e76-b0e28f33fa3b

amandamartin-dev commented 4 months ago

@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