USACE / USACE/groundwork

Collapsible Header

Open
#270 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

discussion enhancement
Dominant language
JavaScript
Stars
6
Forks
4
PR merge metrics
No merged PRs in 30d

Description

Feature Proposal

The header takes a lot of space on mobile. Almost 30% of the vertical viewport.

Suggest we come up with a means of how we can minimize the header.

I recommend we add a param that lets you toggle header after a set time or if the user scrolls. A tap could re-expand the header for the time again.

param could just be collapseHeader={true} and let the end-user decide how / when they might want to collapse it.

Currently we have:
Image

Would like to see this after delay and/or scroll:

Image

This is intended to be no vertical scroll and would benefit from a single viewport with less on it.

Related Context or Links

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The proposal does not name a header file, component entry point, or test. Start by locating the mobile header in the React components, then clarify whether collapse is controlled by a prop, a delay, scrolling, or all three; done means a defined mobile behavior with a way to re-expand the header and less occupied viewport space.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.