#4125 mobile navbar

[prachi00]

Thank you for your contribution to the KodaDot NFT gallery.

👇 _ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes redesign neobrutalism of navbarV2 on mobile #4125
• Requires deployment <>

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 </bsx/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

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.

[kodabot]

WARNING @prachi00 PR for issue #4125 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #4125

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	51c4eeb
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/639be70f1a3d52000884c944
😎 Deploy Preview	https://deploy-preview-4483--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.

[prachi00]

@yangwao @preschian worked on top of the previous PR that was raised
I shifted the components to use vue compostion and cleaned up the css and the logic a little bit

[yangwao]

while logged in

lines should be full from left to right.

I guess you plan work on it :)
putting back to draft till it's ready for testing

[yangwao]

oh edit, on mobile view on desktop chrome it seems ok!

seems there is an issue with mobile device detection then?

seems to happen only if there is "mobile" is not enabled.
that's super strange 😅

[preschian]

don't forget to fix deepscan and deepsource issues. and follow vue best practices for props https://v2.vuejs.org/v2/style-guide/?redirect=true#Prop-definitions-essential

[preschian]

search bar section empty

[prachi00]

@exezbcz how exactly the search on mobile should look? I cant find the designs for that

[exezbcz]

@exezbcz how exactly the search on mobile should look? I cant find the designs for that

okay, so we are going to keep the version that is currently on beta.kodadot.xyz with few changes.

• Stretch the search results to 100% vw, so there is no gap. We can do that because we finally have the close button when you focus on searchbar.

like this:

• while keeping the margin left and right. To be exact - 20px

Is this okay?

[codeclimate]

Code Climate has analyzed commit 9d4321a and detected 0 issues on this pull request.

View more on Code Climate.

[yangwao]

This can be fixed in the follow-up issue as it's for the non-mobile devices but on 600px width

I guess we will make follow-up issue on this one
On 600px width non-mobile I see this

Address select dialogue
but I guess that's going to be resolved in #4405

[yangwao]

pay 80 usd
we will make follow-up issue

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $80 @ 26.81 USD/KSM ~ 2.984 $KSM
🧗 EzGc4s9PgCPx1YnF3fqzhLzVHpHMTL4LWPScwpDrR8JKgSU
🔗 0x8c82d3aadeb3beb9db2c2e6135b81068f9df3a20b8f08ed91f009cd49d5b36cd

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