refactor(theme-classic): blog mobile secondary menu use consistent styles

[Josh-Cena]

Motivation

Fix the double-scrolling problem reported.

@lex111 also wants to change the font, but I'm not quite sure if that's beneficial in the long term.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	04daa61
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62441acaa9a6a000083b51d4
😎 Deploy Preview	https://deploy-preview-7068--docusaurus-2.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.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	57
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7068--docusaurus-2.netlify.app/

[github-actions]

Size Change: -27 B (0%)

Total Size: 807 kB

ℹ️ View Unchanged

Filename	Size	Change
website/.docusaurus/globalData.json	49.9 kB	0 B
website/build/assets/css/styles.********.css	105 kB	-27 B (0%)
website/build/assets/js/main.********.js	613 kB	0 B
website/build/index.html	38.4 kB	0 B

_{compressed-size-action}

[lex111]

This was an example of a design inconsistency, but we could theoretically apply the sidebar menu item class to latest post items in secondary menu, right?

[Josh-Cena]

I'm not too sure if that would look good, considering we are mixing sidebar and menu styles together. I think font changes would be sufficient?

[lex111]

I meant that in some clever way remove or replace the original (i.e. desktop) styling and apply those CSS classes that are intended for sidebar menu.

[Josh-Cena]

I just realized our blog doesn't use any styles from Infima. Do you think we should use more Infima class names on both desktop and mobile, or is your goal simply to make the mobile secondary menu the same as primary menu? I'd still like the desktop and mobile sidebars have similar styling/layout though.

[lex111]

or is your goal simply to make the mobile secondary menu the same as primary menu?

Yes, that's all I mean. The fact that the blog sidebar is different from the doc sidebar is ok, since they are completely different types of menus. However, on mobile, it makes sense to stick to the same design for both of them. How difficult is it to implement?

[Josh-Cena]

Not difficult at all, if we have a separate BlogSidebar/Mobile component. I started by hoping that we can simply portal BlogSidebarContent on mobile and render it on desktop, so we can reuse the same content twice. But what you said makes some sense. Let's try...

[Josh-Cena]

@lex111 Is that what you mean?

[lex111]

Yess, it looks great now, thanks!

[Josh-Cena]

Asked for opinions on Discord as well, waiting for more feedback. The idea is that if both the community and @slorber think the previous design is better, we can simply revert 04daa61 and merge this as a trivial fix of double scrolling.

Do you have plans about how all this should work if we have more "blog sidebar items" in the future, as discussed in #5461?

[lex111]

Without the actual design it is difficult to say, but I suppose it will also be presented as a sidebar menu, perhaps collapsible one with a label as a kind of heading.

[slorber]

thanks, LGTM 👍

[slorber]

Do you have plans about how all this should work if we have more "blog sidebar items" in the future, as discussed in #5461?

We'll figure this out but I guess we can have a context/hook so each item would be able to know if it's in a mobile/desktop layout and handle the 2 cases with some tweats 🤷‍♂️ (can also apply to navbar items btw instead of forwarding the mobile={true} prop)

[Josh-Cena]

Over time I start to appreciate this design as well. The only concern I have being extensibility in the future if the blog sidebar becomes richer. But anyways ¯_(ツ)_/¯