material-components / material-components/material-web
Responsive Layout
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
Description
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
I think that the developing experience with MWC could greatly benefit from implementing responsiveness out of the box.
My suggestion would be the addition of a prop either to the or to define at which viewport width the responsive design - meaning the hamburger button and the drawer - should be triggered.
Let's say my application is made of only an app-bar with a navigation menu on the right hand side, but that for mobile user I want to switch to a drawer design. We could do by defining the drawer like for example.
Describe the solution you'd like
A clear and concise description of what you want to happen.
See this solution for React:
https://mui-treasury.com/layout/
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Alternatively, what I want to achieve could be done with media-queries but that would be a lot of extra codes and checks to achieve something that is now a pre-requisite for modern web dev.
Additional context
Add any other context or screenshots about the feature request here.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the and entry points and compare the linked React responsive-layout example. Define the viewport-triggered hamburger and drawer behavior around the proposed configurable threshold, with the responsive transition working for navigation layouts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- design, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100