Skip to content

Fix mobile sidebar

Administrator requested to merge issue-25500-fix-mobile-sidebar into main

Created by: oleggromov

Problem

File tree in the sidebar is visible on mobile devices (https://github.com/sourcegraph/sourcegraph/issues/25500) and occupies the most useful screen estate.

Solution

https://user-images.githubusercontent.com/2196347/145815780-69fd6a4e-7786-4f1e-8632-aa6eb185b8e0.mov

We persist sidebar toggle state to localStorage, so at first render two things have to be taken into account:

  • persisted state
  • isTouchScreen flag

In order to do so, we introduce a few changes:

  • useMatchMedia hook to match any media query
  • additional state in the RepoRevisionSidebar component so that at first render and on mobile we always hide the sidebar, and when user toggles it - still persist the setting and toggle it in the UI

Additionally, titles are changed for better consistency.

Next steps

I dislike the fact that we now use ad-hoc media queries to detect mobile. Ideally it should be a single CSS var / CSS module export that defines what is a mobile/touch device (in our case, it's a (pointer: coarse), (hover: none) media-query) - which is later used in any CSS (and NavDropdown.module.scss where it's taken from originally) and in TS via importing it from the CSS module.

Merge request reports