quartz
quartz copied to clipboard
jackyzha0
draft: mobile burger menu
I wanted to add a mobile layout that allow to have the explorer, as a lot of my fellow mate only use phone or use phone more than they computer.
I tweaked a lot and choose to use separate file for drafting, to prevent broke something (and merge error…), and if people want to use the old behavior while testing this.
I think we can (and need) to do better than I have, they are some errors (like the scrolling I can't fully disabled) and some seems to be too much hacky.
The burgerMenu layout needs a specific layout structure (as example) in a docstring in the layout.ts file. Feel free to ask for edit or add PR to my repository directly.
By the way, you can check and test here; https://www.mara-li.fr/ (repository: https://github.com/Lisandra-dev/mara-quartz)
I tried with this, where i moved the Explorer to the right and it worked perfectly fine.
export const defaultContentPageLayout: PageLayout = { beforeBody: [ Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta(), Component.TagList(), ], left: [ Component.PageTitle(), Component.MobileOnly(Component.Spacer()), Component.Search(), Component.Darkmode(), Component.DesktopOnly(Component.Explorer()), Component.DesktopOnly(Component.RecentNotes({ limit: 5 })), ], right: [ Component.Graph(), Component.DesktopOnly(Component.TableOfContents()), Component.Backlinks(), Component.MobileOnly(Component.Explorer()), ], }
@ooker777
any idea why this PR hasn't accepted?
Because it's more a proof of concept than something usable, who needs a specific setup and a lot of edit to works. Also, I don't think the way i created that is good. Pretty sure that anyone can do a better works tbh (maybe with some library?)