contents of side menu overflows

[Abhi-m-anue]

Describe the bug The contents of the side menu flows out of the container when expanded

To Reproduce Steps to reproduce the behavior:

1. Go to https://uptime-demo.bluewavelabs.ca and login using demo user details provided in the repo
2. Expand both Dashboard and Account section of the side menu
3. See the avatar and user profile controls flowing out of the container

Expected behavior Contents of side menu stay within the container

Screenshots

see the bottom-left corner

Possible solutions

• One possible way to solve is by changing the height of side menu container(which is currently 100vh ) to max-content
• This would make the main page scrollable by default

[ajhollid]

This is definitely an issue, however I think it's probably best addressed in conjunciton with issue #446.

We should eventually have a comprehenisve solution for smaller screens.

[Abhi-m-anue]

Alright then. After the addition of "docs" and "changeLog" to the menu in my recent PR, the issue became much noticable, so I thought of mentioning it. Is @danielcj2 working on the responsive part ?

[ajhollid]

Alright then. After the addition of "docs" and "changeLog" to the menu in my recent PR, the issue became much noticable, so I thought of mentioning it. Is @danielcj2 working on the responsive part ?

No doubt, appreciate the heads up, it defintiely is an issue that needs to be addressed.

@danielcj2 isn't currently working on this issue anymore.

I think some good interim solutions to start with would be

1. Only allow one section to be expanded at a time
2. Consolidate the "other" options under a collapsible heading like Dashboard and Account

Those are quick and easy fixes that will resovle the issue for 80% of users I imagine.

If you want to implement either of those I'd be happy to merge those in first while we plan out a comprehenisve small screen friendly design!

[Abhi-m-anue]

• Only allow one section to be expanded at a time
• Consolidate the "other" options under a collapsible heading like Dashboard and Account

• That sounds like a good fix. I can work on it, you may assign it to me.
• When consolidating the "Other" options we will probably require an svg. Can I use something myself or does @gorkem-bwl have any suggestions

[ajhollid]

• Only allow one section to be expanded at a time
• Consolidate the "other" options under a collapsible heading like Dashboard and Account

• That sounds like a good fix. I can work on it, you may assign it to me.
• When consolidating the "Other" options we will probably require an svg. Can I use something myself or does @gorkem-bwl have any suggestions

Go ahead and make use of the MUI icons like the others in the sidebar component.

I think you can go ahead and pick one to start with, @gorkemcetin will let us know if he'd like us to change it.

[Abhi-m-anue]

2. Consolidate the "other" options under a collapsible heading like Dashboard and Account

How about this structure. I moved everything under "other" to a single nested structure and added it to menu list. @ajhollid can you check the screenshot and let me know if there is anything to be changed UI wise before creating a PR.

[gorkem-bwl]

That looks good UI-wise. There is only one and only one collapsible at any given time, right?

[ajhollid]

@Abhi-m-anue Agreed, this looks good to me as well :+1: Go for it!

[Abhi-m-anue]

There is only one and only one collapsible at any given time, right?

Yes. Created pull request for this