feat: toc update - mobile

[Harish-b-03]

Hello Everyone :grin:. Heyy @derberg , @mcturco. This PR is to fix the TOC and DocsMenu for better user experience

fix:https://github.com/asyncapi/website/issues/761.

Completed the DocsMenu but yet to push the TOC changes. Please take look at the DocsMenu. Will complete the TOC ASAP

Thank you :grinning:

[netlify[bot]]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	84020eaf06a4889bcf5a4795c23aa5340d851565
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/6404760703a52400089be0b8
😎 Deploy Preview	https://deploy-preview-878--asyncapi-website.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.

[mcturco]

Hey there! Thanks for putting this up.

Looking at this on my phone and it is looking great so far! I just have some notes as to how we may improve it.

1. When you scroll down, the logo part of the header covers up the divider line, let's try to keep that divider line in place

---

2. Let's match the bottom border with the border that divides the top header from the docs nav. I am fine with that change being universal on the whole website too if that's the case

---

3. Can we use arrows that are slightly thinner? I think right now they are carrying too much visual weight. Let me know if you need me to provide an SVG for this. I am wondering if the arrow used in the breadcrumbs can just be a normal > character and then we use the icon only for the dropdown. Can we also change the color of the main dropdown arrow the same color as the hamburger menu or maybe a shade darker?

---

4. When the docs menu is open, I can't see all of the items on one screen, but when I try to scroll down it only scrolls the body of the website behind it. Perhaps when this dropdown is open, we disable scrolling in the background and allow the dropdown to scroll on overflow.

---

5. When the main nav menu is open and you scroll down in it, the Docs nav dropdown (collapsed) overlaps the main menu in a weird place. Wondering if we should just keep the docs nav dropdown behind the main nav menu when it is open

---

This is all I have for now, let me know if you need clarification on anything!

[github-actions[bot]]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	49
🟠 Accessibility	88
🟢 Best practices	100
🟢 SEO	90
🔴 PWA	30

Lighthouse ran on https://deploy-preview-878--asyncapi-website.netlify.app/

[Harish-b-03]

Hey @derberg , I cannot place the hamburger icon for TOC on the right. can you please help me to do that?

Thank you :grin:

[Harish-b-03]

Heyy @mcturco , Yeah will do that :grinning: . Thank you :grin:

[derberg]

@magicmatatjahu can you please help with Hamburger?

[magicmatatjahu]

@Harish-b-03 Hi! Sorry for delay!

I cannot place the hamburger icon for TOC on the right. can you please help me to do that?

It doesn't appear from the discussion that you need to use the hamburger icon there. Can you explain what you want to achieve? Forgive me, but I haven't followed this PR and issue and I don't know what exactly you mean.

[Harish-b-03]

Heyy @magicmatatjahu :grin:, thank you very much. I was struck with that, but now I completed it :grinning:. Please take look at this and review it. Thank you very much :grin:

[Harish-b-03]

Heyyy @mcturco :grinning: , made the changes, please have a look at it.

Still, I could not solve this :point_down:

When the docs menu is open, I can't see all of the items on one screen, but when I try to scroll down it only scrolls the body of the website behind it. Perhaps when this dropdown is open, we disable scrolling in the background and allow the dropdown to scroll on overflow.

Will try to complete it and inform you :grin:

Thank you

[mcturco]

@Harish-b-03 This is looking great! Thank you for making those changes. Everything is starting to look better, but I am noticing something else that looks off.

When you scroll down, it looks like the header overlaps the breadcrumbs by a little bit and the spacing becomes wrong on the top of the breadcrumbs container

[Harish-b-03]

Heyy @akshatnema :wave: ,

Docs Side Menu is not scrollable

I tried many things but I couldnot correct it. I will try with top-5.7rem , if it doesnot work, can you please help me with this?

TOC close button in mobile not working fine

yeah, I will fix this :grin:

Thank you :grin:

[Harish-b-03]

Heyy @derberg @mcturco :wave: , @akshatnema helped me to complete this update :grin: .

@mcturco @derberg kindly review it once again.

@derberg and we have one more issue, since we changed the TOC file css attributes, it is also getting affected in the BlogLayout (i have attached the screenshot referring it). To fix this issue, can we have two TOC, one with original TOC for Blog and another one with modified design for Docs, as we have two different layout for BlogLayout and DocsLayout. what is ur opinion?

[derberg]

@magicmatatjahu can you have a look, since you already know this PR from previous comments 🙏🏼

[derberg]

@magicmatatjahu ping

[derberg]

@magicmatatjahu pong

[derberg]

@Harish-b-03 hey man, sorry for delay with approval and merge. Please solve merge conflicts and we will push it forward 🙏🏼

@alequetzalli please also have a look 🙏🏼

[Harish-b-03]

yeah sure, will do it. 😀

[Harish-b-03]

Heyyyyyy @derberg @mcturco :wave: ,

Since there was no update in this branch for long time, there are lot of merge conflicts now, this might break main things.

I will start from the scratch and will create two new PRs, one for DocsMenu and other for TOC.

Hope, these new PRs will be reviewed and get merged quickly.

Note: I will close this PR after completing this work, i will use the commits in this PR as a reference

Thank you :grinning:

[derberg]

Thanks man, and sorry again on delay from our side 🙏