Collapsable side panel

[acarege]

Component/pattern to amend

We need a collapsable variant of p-panel for applications.

Visual

Screen.Recording.2024-03-27.at.14.36.39.mov

Context

For the automotive feature of Anbox Cloud, we need a collapsable side panel. You can see the layout for the said feature in the screen record above. The main goals of that page are:

• The user can open the stream page for their automotive application and interact with the application inside the Android Automotive Operating System (AAOS) live.
• They can manipulate the AAOS via the side panel.

The second point is optional. Some users might not use the side panel at all. Some others may use it from time to time but don't want to have it visible all the time because the main attraction of the page is the AAOS screen. Due to these reasons, the better UX decision is to give user the flexibility of choice on whether they want to see the side panel.

[bartaz]

Currently panels can be opened/closed fully. A button that triggers it could be in the main panel.

Is there any benefit of having the panel constantly there, but in collapsed state? It doesn't seem to show any information in collapsed mode, apart from the button to open it.

[acarege]

Thank you for the quick reply @bartaz ☺️

I believe that having the collapsed state instead of a button trigger creates a more integrated experience. With the collapsed state, the fact that "controls are an integrated part of the AOOS streaming" is conveyed better IMO. I also think that native state actions for a design element should live inside that element whenever possible. In our example:

• Element : side panel
• Native actions: expand/collapse, widen/shrink (the buttons next to expand/collapse on the screen record)

When you consider this, it makes sense that expand/collapse is together with widen/shrink inside the panel itself, as both actions are related to the panel state.

While reflecting on my choice and considering your button proposal these were my additional thoughts:

• As you can see we have the possible actions for the stream page under a contextual menu. One of those actions (show statistics) opens its side panel. So one argument can be why don't we put it there in a similar fashion then? The answer to that is putting AAOS controls as a button in the contextual menu isn't viable because it defeats the purpose of quick and easy access. To open the panel the user has to perform 2 clicks, but what is worse is that if they close the panel they have to perform two clicks again just to reopen it. That is too much hassle.
• The second argument could be putting a button next to the actions contextual menu which would solve the quick and easy problem. However, that is hierarchically wrong to me because the purpose of a contextual menu is to gather all the button actions in one place. It doesn't sit right if we have a contextual menu and a single button next to it.

Lmk what you think!

[bartaz]

Thanks @acarege for more context.

My suggestion was just to show a similar functionality may currently work with what's in Vanilla.

If there are reasons to extend it to have collapsible panels (and you clearly show that there are) I think the next step would be to bring this up on next Vanilla Working Group, to decide if that's something that should go to Vanilla directly, or should that be developed in your project only for now.

[acarege]

Thank you for the suggestion, I find them very helpful because they might point to a more feasible direction that we haven't thought of, or they might not be suitable but still allow us to reflect on our decision and push us to provide logical reasons for them 🤓

I will attend the next Vanilla WG meeting to extend the discussion as you mentioned. Looking forward!

[danielmutis]

WG: in order to have this in Vanilla there is a lot of work that is required. Exploring similar solutions in other products, detail the way in which we want to do expand and collapse behaviour (including the side nav). For now, this will be implemented as designed in Anbox, but in order to include it in Vanilla there needs to be more detailed explorations.