Navbar breakpoints to hide tab

[Jarsen136]

Thank you for your contribution to the KodaDot NFT gallery.
👇 _ Let's make a quick check before the contribution.

PR type

• Bugfix
• Feature
• Refactoring

What's new?

• PR closes Navbar breakpoints on 1037px #2760
• <brief_description_of_what_I've_added>

Before submitting Pull Request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </rmrk/collection/26902bc2f7c20c546a-1FVG7>
• I've tested PR on mobile and everything seems works
• I found edge cases
• I've written some unit tests 🧪

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot

• My fix has changed something on UI; a screenshot is best to understand changes for others.

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	4f09d8c
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/624c03d7194f7000086d8223
😎 Deploy Preview	https://deploy-preview-2769--koda-nuxt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Jarsen136]

When the screen width is less than 1024px, it is for mobile devices.

[roiLeo]

/giphy wheel fortune

[roiLeo]

You should check these responsive helpers

[Jarsen136]

You should check these responsive helpers

Thanks, it's helpful. However, in this case these ranges are not precise enough, we need to accurately control the display of each tab.

[roiLeo]

Here is mobile menu:

• I'm not able to change language
• I'm not able to change chain
• i'm not able to create

Instead of hiding item from navbar I would try to:

• a. make searchBar responsive (reduce the size from screen width)
• b. enlarge mobile menu
• c. create a new dropdown (...) with the other buttons

[Jarsen136]

• I'm not able to change language
• I'm not able to change chain
• i'm not able to create

Instead of hiding item from navbar I would try to:

• a. make searchBar responsive (reduce the size from screen width)
• b. enlarge mobile menu
• c. create a new dropdown (...) with the other buttons

Great eyesight! Now it can show every tab on the mobile menu.
How about now 👀

a. make searchBar responsive (reduce the size from screen width)

BTW, this can also be done, but it is different from the description of the original issue. What do you think @yangwao

[yangwao]

BTW, this can also be done, but it is different from the description of the original issue. What do you think @yangwao

yes, if you notice, the search bar fixed width was probably root issue of all of this :)

[Jarsen136]

Okay, now this searchBar is responsive. 👀

[yangwao]

I mean previous hiding technique was a great approach.
Maybe just hide out chain selector and language, so the search bar won't look bad if someone use it, for example, someone is using a split-screen on 13"

1110px width

[Jarsen136]

I mean previous hiding technique was a great approach. Maybe just hide out chain selector and language, so the search bar won't look bad if someone use it, for example, someone is using a split-screen on 13"

1110px width

Oh I misread what you meant. Let me revert to the original state

[yangwao]

I mean previous hiding technique was a great approach. Maybe just hide out chain selector and language, so the search bar won't look bad if someone use it, for example, someone is using a split-screen on 13"
1110px width

Oh I misread what you meant. Let me revert to the original state

yes, a flexible search bar with hiding would be great I guess! :)

yes, in the previous state was an issue that search bar was fixed :)

[Jarsen136]

yes, a flexible search bar with hiding would be great I guess! :)

yes, in the previous state was an issue that search bar was fixed :)

How about now? 👀 shorten the width of search-bar first, and then hide out language and chain selector

[yangwao]

I mean way better, I guess we will rework the whole navbar later :)

[yangwao]

pay 100 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $100 @ 191.64 USD/KSM ~ 0.522 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0xfd0992102b23d4b9b9b3c73967cc03fc133b499c62dc94a61f3ee0cb9418e205

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

[yangwao]

We should rework and refactor the navbar code in a much more sensible way and what's should be merged and exclude on different widths.

Hidding least popular buttons from first, hence we don't have any UX research I can only bet.

• language
• chain/protocol selector
• create
• history
• stats
• profile

With search bar should be flexible and fill up the rest space next to the buttons.