Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

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

Open
1 task done
Monilprajapati opened this issue Feb 1, 2024 · 4 comments
Open
1 task done
Labels
⭐ goal: addition undefined 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) 💬 talk: discussion undefined

Comments

@Monilprajapati
Copy link

Monilprajapati commented Feb 1, 2024

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

@Monilprajapati Monilprajapati added ⭐ goal: addition undefined 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) labels Feb 1, 2024
Copy link
Contributor

github-actions bot commented Feb 1, 2024

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
Copy link
Contributor

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.

@EddieHubCommunity EddieHubCommunity unlocked this conversation Apr 27, 2024
@Monilprajapati
Copy link
Author

Monilprajapati commented Apr 28, 2024

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
Copy link
Contributor

amandamartin-dev commented Apr 28, 2024

@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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
⭐ goal: addition undefined 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) 💬 talk: discussion undefined
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants