feat: sticky hamburger menu for mobile version

[r3yc0n1c]

Description

• Fixed top position of the hamburger menu, keeping the UI intact
• Improves the overall UX, users will be able to navigate seamlessly without needing to scroll back up

Related issue(s)
Resolves #455

Demo

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[netlify]

✅ Deploy Preview for peaceful-ramanujan-288045 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	35576fa
🔍 Latest deploy log	https://app.netlify.com/sites/peaceful-ramanujan-288045/deploys/67438f149afcea00082dd84f
😎 Deploy Preview	https://deploy-preview-460--peaceful-ramanujan-288045.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 configuration.

[thulieblack]

Someone else is working on this PR #458

[r3yc0n1c]

Someone else is working on this PR #458

I was working on this before them... ref: here

[thulieblack]

sorry my bad please continue

[catosaurusrex2003]

Instead of making the navbar transparent, could we consider using a blur effect so that the content scrolling behind the navbar is not visible?

[ashmit-coder]

Instead of making the navbar transparent, could we consider using a blur effect so that the content scrolling behind the navbar is not visible?

@Mayaleeeee would have to approve this.

[ashmit-coder]

Instead of making the navbar transparent, could we consider using a blur effect so that the content scrolling behind the navbar is not visible?

that would sure look better @r3yc0n1c , thanks for the suggestion @catosaurusrex2003

[r3yc0n1c]

Instead of making the navbar transparent, could we consider using a blur effect so that the content scrolling behind the navbar is not visible?

that would sure look better @r3yc0n1c , thanks for the suggestion @catosaurusrex2003

sure! working on in... will send a PR soon

[Mayaleeeee]

Thank you, @catosaurusrex2003

Yeah, I love the idea of a transparent nav bar @ashmit-coder

It would work better than the current one in the demo.

I like the current colour on the 2023 conference website

[r3yc0n1c]

update:

• Blurred Navbar

[catosaurusrex2003]

the navbar blur is looking good 🚀

Should we also convert the solid purple color of hamburger dropdown to a translucent blur just like the navbar?

like taking inspiration of navbar dropdown in mobile viewport from here https://datahack.djss4ds.in/
Pay attention to how the background of the dropdown is translucent and blurred and center alligned.

@Mayaleeeee @ashmit-coder

[AceTheCreator]

@r3yc0n1c do you plan on adding the suggested changes by @catosaurusrex2003 in the comment above?

[r3yc0n1c]

@r3yc0n1c do you plan on adding the suggested changes by @catosaurusrex2003 in the comment above?

yeah sure! it looks good actually... shall I get started with the blurred menu items?

[Mayaleeeee]

the navbar blur is looking good 🚀

Should we also convert the solid purple color of hamburger dropdown to a translucent blur just like the navbar?

like taking inspiration of navbar dropdown in mobile viewport from here https://datahack.djss4ds.in/
Pay attention to how the background of the dropdown is translucent and blurred and center alligned.

@Mayaleeeee @ashmit-coder

What solid purple colour?

[r3yc0n1c]

the navbar blur is looking good 🚀
Should we also convert the solid purple color of hamburger dropdown to a translucent blur just like the navbar?
like taking inspiration of navbar dropdown in mobile viewport from here https://datahack.djss4ds.in/
Pay attention to how the background of the dropdown is translucent and blurred and center alligned.
@Mayaleeeee @ashmit-coder

What solid purple colour?

I think he's referring to the dark purple background (#1B1130) we use in the navbar:

[catosaurusrex2003]

I think he's referring to the dark purple background (#1B1130) we use in the navbar:

yes, i am referring to that.

Its just a suggestion

@r3yc0n1c you can give it a try.
@Mayaleeeee once it's done, we can choose the one that looks better.

[r3yc0n1c]

I think he's referring to the dark purple background (#1B1130) we use in the navbar:

yes, i am referring to that.

Its just a suggestion

@r3yc0n1c you can give it a try.

@Mayaleeeee once it's done, we can choose the one that looks better.

sure! WIP

[r3yc0n1c]

here's the new update:

• blurred dark purple background (#1B1130) fullscreen sheet for the dropdown (ref. to https://datahack.djss4ds.in/)
• dynamic nav color

[catosaurusrex2003]

@r3yc0n1c this is looking cool! 🔥

I did notice a small discrepancy between browsers tho

in FIREFOX 👇

The backdrop-blur-md effect works as expected for the dropdown.

in CHROME 👇

The blur effect doesn’t work for the dropdown.

This might be outside the scope of this PR, but I thought I’d flag it just in case! Apart from this minor issue, it’s looking great to me.

@ashmit-coder @AceTheCreator @Mayaleeeee what do yall think ?

[r3yc0n1c]

@r3yc0n1c this is looking cool! 🔥

I did notice a small discrepancy between browsers tho

in FIREFOX 👇

The backdrop-blur-md effect works as expected for the dropdown.

in CHROME 👇

The blur effect doesn’t work for the dropdown.

This might be outside the scope of this PR, but I thought I’d flag it just in case! Apart from this minor issue, it’s looking great to me.

@ashmit-coder @AceTheCreator @Mayaleeeee what do yall think ?

thank you! the backdrop-blur issue is due to chrome which doesn't seem to allow nested backdrops for tailwind (ref: tailwindlabs/tailwindcss#15103)... that's why I kept the opacity as 90 to compensate this

[catosaurusrex2003]

ok 👍, then lets skip that for now.