Make sidebars responsive #17010

selfcontained · 2023-03-23T23:26:50Z

Description

Step 1 to making sidebars responsive. Shifts the sidebar to a row that scrolls on smaller screens. Also made the <Heading1/> slightly smaller on small screens.

Header	Header

Follow Up Steps

Explore using a dropdown for the sidebar navigation items versus scrollable menu.
Explore adding a scrolling indicator on left/right edge of menu when there's more options off-screen.
Currently navigation on the submenu results in a full route re-render, which resets the scroll position of the menu. This PR shifts the active item into visibility, but it isn't able to maintain scroll position due to the re-render. We can address this in a followup by using nested routes w/ react-router, and only re-render the portions of the page that change as much as possible.

Related Issue(s)

Fixes #8133

How to test

Preview Env: https://bmh-respon4a5450a2ee.preview.gitpod-dev.com/user/account

Visit some of the pages with sidebar nav (user/org settings) on mobile and desktop.

Release Notes

NONE

Documentation

Build Options:

/werft with-werft
Run the build with werft instead of GHA
leeway-no-cache
/werft no-test
Run Leeway with --dont-test

Publish Options

/werft publish-to-npm
/werft publish-to-jb-marketplace

Installer Options

with-ee-license
with-dedicated-emulation
with-ws-manager-mk2
workspace-feature-flags
Add desired feature flags to the end of the line above, space separated

Preview Environment Options:

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-gce-vm
If enabled this will create the environment on GCE infra
/werft with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

werft-gitpod-dev-com · 2023-03-23T23:26:58Z

started the job as gitpod-build-bmh-responsive-sidebar.1 because the annotations in the pull request description changed
(with .werft/ from main)

gtsiolis · 2023-03-24T10:03:59Z

Looking at this now! 👀

Install Gitpod job seems successful.

geropl

Code LGTM, tested and works nicely 🎨

/hold For @gtsiolis 's feedback

gtsiolis

Thanks for making this change, @selfcontained!

Left a few comments below following our discussion around this menu.

Approving additionally to unblock this but holding in case you'd like to address the UX comments below in this PR. Otherwise, we can open a follow-up issue to keep track of these issues.

Thanks also @geropl for the hold above.

/hold

gtsiolis · 2023-03-24T11:04:44Z

components/dashboard/src/components/PageWithSubMenu.tsx

+        }
+    }, [link, location.pathname]);
+
+    let classes = "flex block py-2 px-4 rounded-md whitespace-nowrap max-w-52";


suggestion: Probably not the best line to comment on this, but the initial idea waw to reuse the same tabs pattern we use in the dashboard. It should be ok to leave is as is for this PR but it'd be nicer for users to face a pattern they've seen before. Thoughts?

BEFORE AFTER

Yah, that def. looks better. What do you think you'd prefer here for the sidebar nav between the tab-bar or a dropdown?

A dropdown avoids some of the weird scroll positioning issues when you navigate described in another comment (which we can fix, but might take a bit).

The tab-bar nav options are a bit more discoverable since you can see (some of) them.

🤔

gtsiolis · 2023-03-24T11:05:30Z

components/dashboard/src/components/PageWithSubMenu.tsx

+        }
+    }, [link, location.pathname]);
+
+    let classes = "flex block py-2 px-4 rounded-md whitespace-nowrap max-w-52";


thought: Going with the tabs pattern will also help decrease the gap between the menu items and providing a hint for menu items overflowing the viewport.

gtsiolis · 2023-03-24T11:08:20Z

components/dashboard/src/components/PageWithSubMenu.tsx

+                        className={classNames(
+                            // Handle flipping between row and column layout
+                            "flex flex-row md:flex-col items-center",
+                            "w-full md:w-52 overflow-auto md:overflow-visible",


question: What do you think of making the horizontal scrollbar invisible? This works ok now with the pill-like design, but could clash with the tabs.

gtsiolis · 2023-03-24T11:10:59Z

components/dashboard/src/components/PageWithSubMenu.tsx

+        <Link to={link[0]} key={title} className="md:w-full">
+            <li ref={itemRef} className={classes}>
+                {title}
+            </li>
+        </Link>


suggestion: Probably not the best line to comment about this, but could we not shift the menu items when an item is clicked? Noticed that clicking on an item moves it to the left side of the scrollable area, which sometimes seems a bit jarring, no?

Untitled.mov

Yah, I didn't like this either, tried to explain it a bit in the PR description, but it's buried in there:

Currently navigation on the submenu results in a full route re-render, which resets the scroll position of the menu. This PR shifts the active item into visibility, but it isn't able to maintain scroll position due to the re-render. We can address this in a followup by using nested routes w/ react-router, and only re-render the portions of the page that change as much as possible.

Another thing to consider is if we did a dropdown for nav instead of this scrollbar or a tab-bar, it would avoid that issue.

selfcontained · 2023-03-24T16:29:57Z

/unhold will followup with additional improvements

selfcontained added 2 commits March 23, 2023 23:18

make sidebar responsive

7194c10

adding separator after submenu on small screens

204ca75

roboquat added do-not-merge/work-in-progress do-not-merge/release-note-label-needed labels Mar 23, 2023

roboquat added the size/M label Mar 23, 2023

selfcontained changed the title ~~Bmh/responsive-sidebar~~ Make sidebars responsive Mar 23, 2023

make heading smaller on small screens

05387af

roboquat added release-note-none and removed do-not-merge/release-note-label-needed labels Mar 24, 2023

selfcontained marked this pull request as ready for review March 24, 2023 01:08

selfcontained requested a review from a team March 24, 2023 01:08

selfcontained requested a review from gtsiolis as a code owner March 24, 2023 01:08

roboquat removed the do-not-merge/work-in-progress label Mar 24, 2023

github-actions bot added the team: webapp Issue belongs to the WebApp team label Mar 24, 2023

geropl added the do-not-merge/hold label Mar 24, 2023

geropl approved these changes Mar 24, 2023

View reviewed changes

gtsiolis approved these changes Mar 24, 2023

View reviewed changes

selfcontained removed the do-not-merge/hold label Mar 24, 2023

roboquat merged commit 14f78f2 into main Mar 24, 2023

roboquat deleted the bmh/responsive-sidebar branch March 24, 2023 23:32

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Mar 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Make sidebars responsive #17010

Make sidebars responsive #17010

Uh oh!

selfcontained commented Mar 23, 2023 •

edited

Loading

Uh oh!

werft-gitpod-dev-com bot commented Mar 23, 2023

Uh oh!

gtsiolis commented Mar 24, 2023 •

edited by werft-gitpod-dev-com bot

Loading

Uh oh!

geropl left a comment

Uh oh!

gtsiolis left a comment •

edited

Loading

Uh oh!

gtsiolis Mar 24, 2023

Uh oh!

selfcontained Mar 24, 2023

Uh oh!

gtsiolis Mar 24, 2023

Uh oh!

gtsiolis Mar 24, 2023

Uh oh!

gtsiolis Mar 24, 2023

Uh oh!

selfcontained Mar 24, 2023

Uh oh!

selfcontained commented Mar 24, 2023

Uh oh!

Uh oh!

Make sidebars responsive #17010

Make sidebars responsive #17010

Uh oh!

Conversation

selfcontained commented Mar 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue(s)

How to test

Release Notes

Documentation

Build Options:

Preview Environment Options:

Uh oh!

werft-gitpod-dev-com bot commented Mar 23, 2023

Uh oh!

gtsiolis commented Mar 24, 2023 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

geropl left a comment

Choose a reason for hiding this comment

Uh oh!

gtsiolis left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gtsiolis Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

selfcontained Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

gtsiolis Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

gtsiolis Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

gtsiolis Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

selfcontained Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

selfcontained commented Mar 24, 2023

Uh oh!

Uh oh!

selfcontained commented Mar 23, 2023 •

edited

Loading

gtsiolis commented Mar 24, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment •

edited

Loading