mantinedev / mantinedev/ui.mantine.dev

Mantine UI "Header with mega menu" breaks when the width is exactly on breakpoint sm (768px)

Open
#86 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.9k
Forks
364
PR merge metrics
No merged PRs in 30d

Description

![image](https://github.com/mantinedev/ui.mantine.dev/assets/64423919/6c436b5c-02f1-47a8-b69b-5448971e5218)

When the device width is exactly at `sm` breakpoint, sometimes the mobile burger icon doesn't show up while the big pc version of the header items are still showing (and they're vertical).

My guess is the issue comes from `visibleFrom` and `hiddenFrom` in the example code. Can someone fix this?

Contributor guide

No contributing guide indexed for this repository

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

Start with the “Header with mega menu” example and reproduce the layout at exactly 768px, focusing on the visibleFrom and hiddenFrom settings. Done means the mobile burger icon and desktop header items do not disappear, overlap, or appear vertically at the sm breakpoint.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.