Reformat sidebar to account for small screens

[drewbutlerbb4]

Signed-off-by: Andrew-Butler Andrew.Butler@ibm.com

Related: #168

(prio 1) Join the conversation / Notebooks links are overlapping in Firefox 90.0.2 (64-bit) - RHEL 8.3
please just make it part of the list of asset types

Addresses issue mentioned in #168 as well as making the settings button more noticeable and some extra css changes to address other sidebar issues.

For large screens:

For small screens:

[ckadner]

Thanks Andrew. This looks good to me. I found just a missing line break in one file.

The "Join the Conversation" button seems to break the formatting a bit. Should we maybe break the text into two lines and align it with the menu items on the left side? Same with "Settings" I suppose.

Did you want @romeokienzler or @animeshsingh to review this before merging?

[drewbutlerbb4]

@ckadner

The "Join the Conversation" button seems to break the formatting a bit. Should we maybe break the text into two lines and align it with the menu items on the left side? Same with "Settings" I suppose.

Here is what it looks like with your recommended formatting.

[ckadner]

@ckadner

The "Join the Conversation" button seems to break the formatting a bit. Should we maybe break the text into two lines and align it with the menu items on the left side? Same with "Settings" I suppose.

I like that better. Maybe the "Conversation" word should align with "join" instead of aligning with the speech bubble icon

[ckadner]

What happens if the screen goes even smaller? Does the Setting and Join the Conversation overlap the asset category links? Instead the whole menu should scroll maybe?

[drewbutlerbb4]

@ckadner this is the updated look. It is not perfect, but it removes some of the issues. Will follow up with a PR for a scrollable sidebar when I get extra time.
Non-admin view:

Admin view:

Admin view with open secret menu:

[ckadner]

Cool. Thank you Andrew. This looks good. We could make two small changes in a follow up, like:

• let the "Join the Conversation" link sit at the bottom for non-admins, and push it up with the padding you have here for logged-in admins
• align the left side of the word "Conversation" with "Join" in the line above

[ckadner]

/lgtm

[mlx-bot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ckadner, drewbutlerbb4

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [ckadner,drewbutlerbb4]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[romeokienzler]

@drewbutlerbb4 @ckadner this is still not 100% working out

simplescreenrecorder-2021-09-17_09.32.40.mp4

[romeokienzler]

simplescreenrecorder-2021-09-17_15.43.31.mp4

[romeokienzler]

thanks @drewbutlerbb4 & @ckadner - tested - works like a charm!