projectx-codehagen
Bug: Separate out sidebar using nested components
Describe the bug
@piyusharmap pointed out that each dashboard page (Dashboard, Transactions, etc) uses it's own copy of the sidebar. This is unnecessary duplication of code for the sidebar, and leads to several bugs which I pointed out in #181
I propose that we separate out the sidebar into the /dashboard page component, and the contents of that page into a new "landing" page component. This way, the sizing of the sidebar and collapsed state is independent of the individual pages.
Another unintended consequence of the sidebar being its own component is that it is also refreshed on page refresh, leading to this buggy behavior until it loads in. (the bar is in collapsed state, but first does this before collapsing)
@meglerhagen I would like to work on this issue if nobody else is already, since I already spent some time in investigation
Steps to reproduce
- Go to any page, resize the tiles, collapse the sidebar
- Refresh the page
- You will see the sidebar being reloaded, making it look buggy
- Go to another page (Transactions), the sidebar remains not collapsed, which is not expected behavior
Browsers
Firefox, Safari, Edge
Additional context (Is this in dev or production?)
No response
Additionally, I want to add a hover effect on the button specific to the sidebar, which allows users to collapse the sidebar in one click instead of dragging, they can still resize by using any other point in the resize line
Perhaps you are correct regarding the unnecessary code to some extent. However, I believe that the practice of using different configurations for different sidebars is intended to provide users with more control over the interface. For example, suppose I want my sidebar collapsed on the 'AI Magic' page but with full width on the 'Investments' page. @meglerhagen @matteobad, it would be helpful if you could clarify this behavior so that we can proceed more effectively with this issue
Ahh, makes sense. In that case maybe a setting could be added to toggle collapsed/expanded state for each page?
Yes, the idea was that a user can make their dashboard/view based on what they want @piyusharmap. But we should be looking at having the navbar placed somewhere else.
Yes, we need to position it in a way that allows easy modification for smaller screens as well. The sidebar offers numerous options to the user, making it impractical to simply replace them with icons for narrower widths.
Should the sidebar even be shown on smaller screens? It should be collapsed into a hamburger menu by default with no option to expand in my opinion.
@meglerhagen in that case, how about a quick collapse/expand button for the sidebar? With options to fix collapsed state in settings page
Also, I can add responsiveness to the sidebar because currently it doesn't condense into a hamburger on smaller screens, along with the other proposed changes
Yes @shouryan01 - That would be awsome. Maybe i could make a issue to make this application "mobile first". Is that something you could help with? 🔥 And maybe @shouryan01 ? ⭐
Sure! You can assign that issue to me when you make it. And I've already starred lol