GSSoC: Make sidebar hidden when click on any sidebar links

oxiton-foundation / click-metrics

Click Matrics is a powerful URL shortening and analytics platform designed to streamline the process of generating short URLs, creating QR codes, and tracking detailed analytics for each link.

https://click-metrics.vercel.app

MIT License

33 stars 49 forks source link

GSSoC: Make sidebar hidden when click on any sidebar links #152

Closed krishna-singha closed 2 weeks ago

krishna-singha commented 3 weeks ago

We need to enhance the user experience by implementing functionality that hides the sidebar whenever a link within the sidebar is clicked. This will allow the main content to take full focus.
Before claiming this issue go through #24
Discuss your approach here; if it's acceptable, we will assign you this issue.

github-actions[bot] commented 3 weeks ago

Thank you for creating this issue! 🎉 We'll look into it as soon as possible. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our #24 for guidelines on contributing to this project.

anisharma07 commented 2 weeks ago

APPROACH ONE: Sliding for Mobile only: For Desktop: Fix the sidebar at width > 1024 (optimum for viewing the main page with sidebar open) = For Mobile: make it sliding menu for mobile. (w<1024)

APPROACH TWO: sliding for both mobile and desktop At screens > 1024 (desktop screens) : IT will manually slide For MOBILE or width<1024 : Will be closed by Default; IT will close when link is clicked

ALSO: i'm thinking of adding a overlay to mobile version of sidebar that will look like below ss: It will help to close sidebar easily

Screenshot 2024-06-08 193834

I will fix all major bugs related to sidebar... in one PR ...like this scrolling one too

https://github.com/oxiton-foundation/click-metrics/assets/126901961/065b31b3-4eb0-4e56-b65a-f19d6385d58c

If you like any of the approach ... let me know and assign this issue to me please consider levelling up the ISSUE if you want all these changes done in a single PR...

krishna-singha commented 2 weeks ago

Ok your approach two was cool. You can continue with that and also add overlay for mobile version.
Before that go through #24.
I am assigning this issue to you.
Best of luck.

krishna-singha commented 2 weeks ago

And also add NavLink in the Create New button as it refreshing the page when clicked on it.

anisharma07 commented 2 weeks ago

Ok your approach two was cool. You can continue with that and also add overlay for mobile version.

Before that go through Rules to contribute at Girl Script Summer of Code 2024(GSSoC) and Oxiton Open Source Internship 2024(OOSI) #24.

I am assigning this issue to you.

Best of luck.

Yeah! gone through these already

krishna-singha commented 2 weeks ago

Ok your approach two was cool. You can continue with that and also add overlay for mobile version.

Before that go through Rules to contribute at Girl Script Summer of Code 2024(GSSoC) and Oxiton Open Source Internship 2024(OOSI) #24.

I am assigning this issue to you.

Best of luck.

Yeah! gone through these already

OK fine.

anisharma07 commented 2 weeks ago

And also add NavLink in the Create New button as it refreshing the page when clicked on it.

what to do with the create new button.... Where is the navlink,.. can you please elaborate...which link to add on create new

krishna-singha commented 2 weeks ago

Instead of anchor tag use NavLink from React-router-dom which is already imported in the top.
If you are comfortable with this do it, otherwise leave it.

anisharma07 commented 2 weeks ago

from

ok got it..will crrect it

github-actions[bot] commented 2 weeks ago

Hello @krishna-singha! Your issue #152 has been closed. Thank you for your contribution!