Skip to content

Implement expand/collapse toggle for file tree browser + auto-collapse on mobile

Summary

This is part of a bigger effort to implement a file tree browser (FTB) in the repository.

As part of this issue we should:

  • Implement expand/collapse toggle for file tree browser
  • Hide the FTB on mobile, and auto-collapse it on smaller (non-mobile) viewpoints.
  • See this thread for more context.
Collapsed Expanded
1. directory_ collapsed.jpg 1. directory_ expanded.jpg
2. file_ collapsed.jpg 2. file_ expanded.jpg

Functionality by viewport

See #541102 (comment 2713697785)

Viewport Functionality

xs

<576px

 Hide file tree browser

sm

≥576px

 Hide file tree browser

md

≥768px
  • Shows as panel, toggle controls the modal state: when hovered it simply floats on top of the page, when clicked it changes the modality
  • Emulate super sidebar behavior
    • On a narrow viewport the sidebar can only float on top of the page. The toggle controls the modal state: when hovered it simply floats on top of the page, when clicked it changes the modality. See #541102 (comment 2701982858)
    • In the super sidebar, clicking outside of the sidebar will also close it. This would be useful functionality to add to the file tree browser as well. #541102 (comment 2759857601)

lg

≥992px
  • Shows as panel, toggle controls the modal state: when hovered it simply floats on top of the page, when clicked it changes the modality
  • Emulate super sidebar behavior
    • On a narrow viewport the sidebar can only float on top of the page. The toggle controls the modal state: when hovered it simply floats on top of the page, when clicked it changes the modality. See #541102 (comment 2701982858)
    • In the super sidebar, clicking outside of the sidebar will also close it. This would be useful functionality to add to the file tree browser as well. #541102 (comment 2759857601)

xl

≥1200px
  • Side by side, toggle controls the collapsed state and also allows the sidebar to float when hovered)
  • Emulate super sidebar behavior: On a wider screen it actually pushes content from the side. The toggle controls the collapsed state and also allows the sidebar to float when hovered. #541102 (comment 2701982858)
Edited by Alyssa Trinh