Feature: Implement Mobile-First Design for Website

[Codehagen]

Type of feature

💡 Feature

Current behavior

Currently, the website is not optimized for mobile devices, which may affect user experience on smaller screens.

Suggested solution

I propose we adopt a mobile-first design approach, starting with the Dashboard page, followed by the Accounts page. Specifically, we should:

• Redesign the Dashboard page to be responsive and user-friendly on mobile devices.
• After the Dashboard is optimized, move on to redesign the Accounts page.

We are using Tailwind, which should facilitate creating responsive designs that look good on mobile.

Additional context

Adopting a mobile-first approach will enhance the accessibility and user experience of our website on mobile devices, aligning with modern web development practices.

[shouryan01]

Can you assign it to me? I'm unable to assign it to myself

[Codehagen]

Yes! If you want an issue you can also write /take and it will automatically be assigned to you ✨

[Codehagen]

Or was it another command @alexghirelli? 👆

[alexghirelli]

The right command is .take 😊

[github-actions[bot]]

The issue you are trying to assign to yourself is already assigned.

[shouryan01]

Update: still working on this, the code is not in a great shape lol, a separate nav component for every sidebar?? Working on separating and cleaning code and will make pr soon!

[Codehagen]

YES I KNOW 😂 @shouryan01 - Going to do some clean up for the nav etc this weekend. When i mean clean i mean in regards #194

[shouryan01]

@meglerhagen In my branch I removed the navs, the tooltip catchers and am using a shared sidebar https://github.com/shouryan01/Badget/tree/feature/frontend/193-responsive-design-dashboard

Now for responsivenes, I was thinking of setting sidebar to collapsed on screens smaller than lg, and then for screens smaller than md, it would turn into a hamburger menu

I'm going to focus on #196 starting tomorrow but just wanted to give an update

[Codehagen]

That sounds like a good plan @shouryan01 - I think that if we can do that it would be great. It's a big task so if you need some help please write to me. Look at the React Size Panels for some documentation if needed. Maybe a problem is going to be the cookie setting between the pages?

[replyre]

Hello @meglerhagen, Is there any issue open where I can contribute too?

[Codehagen]

Hello @replyre! Yes, we need some help! Lets talk on discord? ✨

[shouryan01]

@matteobad did you merge your changes in for the sidebar? If so, I can finish off this ticket

[shouryan01]

@meglerhagen this one can be closed right?

[Codehagen]

Yes ✨