Reorganize banner titles

[Roger-luo]

I think we can

• [x] merge "getting started` especially the guides for using IDEs etc. into the home page because the home page is quite empty now, and you don't get much useful info from it.
• [x] move "Contributing" to the last (before license) because it has less priority.
• [x] the tutorial page should make use of left banners and show the first tutorial directly instead of showing a list of links
• [x] the reference page link is broken: https://queracomputing.github.io/bloqade-python-examples/latest/
• [ ] #782

lastly, remember to ask people to give a star whenever you talk about the package!

[weinbe58]

I don't neccesarily like having the first tutorial pop up as the default page it seems but maybe something using this extension:

https://squidfunk.github.io/mkdocs-material/reference/grids/

Where we have a grid of tutorials with some thumbnails that show what each one is about in a picture.

[johnzl-777]

729 will address the first two points

[Wang-Shengtao]

The current banner titles require a lot of clicking, I feel. One has to click the top left to see the menu and once you click deeper into the menu, then you have to click a few times to get back. I feel it's not very convenient. You can't see the menu without clicking the top left as well, which is not ideal.

[johnzl-777]

I had a quick talk with @Wang-Shengtao about this, this is just a consequence of the automatic layout. If you're zoomed in too much or viewing on a smaller screen MkDocs hides the navbar behind a hamburger icon.

[weinbe58]

https://configurations.rogerluo.dev/stable/quick-start/ https://docs.pennylane.ai/en/stable/ https://docs.pydantic.dev/latest/

[Wang-Shengtao]

I had a quick talk with @Wang-Shengtao about this, this is just a consequence of the automatic layout. If you're zoomed in too much or viewing on a smaller screen MkDocs hides the navbar behind a hamburger icon.

Yes, that's right. On my desktop, it was fine, but I saw in my laptop just now that the automatic layout folded the top banner. Now, I see it's nicely displayed on my laptop as well. I think it's just the default Zoom size or something. It would be good to make the default Zoom/font size appropriate (for most common computer size) so that the banner can be displayed. On my laptop, I see the tutorial page is still folded, other pages are displaying fine.

[johnzl-777]

I had a quick talk with @Wang-Shengtao about this, this is just a consequence of the automatic layout. If you're zoomed in too much or viewing on a smaller screen MkDocs hides the navbar behind a hamburger icon.

Yes, that's right. On my desktop, it was fine, but I saw in my laptop just now that the automatic layout folded the top banner. Now, I see it's nicely displayed on my laptop as well. I think it's just the default Zoom size or something. It would be good to make the default Zoom/font size appropriate (for most common computer size) so that the banner can be displayed. On my laptop, I see the tutorial page is still folded, other pages are displaying fine.

I took at the documentation and there doesn't seem to be a way to toggle this feature ): I do notice even on my laptop the zoom in Chrome has to be set to 90% instead of standard 100% to avoid the navbar collapsing into the hamburger icon. @Roger-luo is there a potential thing we could do here without having to fork and create our own theme? Perhaps a CSS override?

[Roger-luo]

can you guys put a screenshot of the issue? It's a bit hard to understand what's going on here.

[johnzl-777]

Sure! I should preface I did some more digging around and it seems sensitive to how the browser interacts with the detected display dimensions because on one monitor I have to zoom in pretty heavily before the hamburger icon appears while in another it takes much less zooming in.

This is the standard navbar:

And at some point it can collapse to the hamburger icon:

I don't know if there's a way to control at what zoom level/ratio before this collapse happens.

[Roger-luo]

this is expected behavior on the small screen. I'm not sure what is the issue here? It should collapse into a hamburger on the small screen.

[johnzl-777]

I think @Wang-Shengtao is asking for changing exactly when/what dimensions trigger the collapse into the hamburger menu. But this would be a tricky thing to do because it sounds like he might have different zoom settings from others. I'm inclined to leave things as they are, especially considering all that I can dig up to change this setting requires some lower-level modification.

[Roger-luo]

this is adaptive to device size, I'm not sure why we should change this? It's changeable at the CSS level, and we are just using the most standard setting. Can @Wang-Shengtao elaborate on what makes this behave not expected? e.g by steps to reproduce. I'm very confused about this proposal and still don't understand.

Ideally in a separate issue as I don't see this is a blocking issue for this issue, and @johnzl-777 please go ahead and work on other documentation issues, I'll take care of @Wang-Shengtao's comments if necessary.

[Wang-Shengtao]

I'm just hoping the default font size can be set so that the top bar doesn't shrink into hamburger menu for the most common screen size (with full screen size, e.g. 16-inch). A few days ago, it appears to be in hamburger menu on my laptop, but now it's no longer the case, which is good. I think the font size got reduced a little bit. For the tutorial page, it's still showing the hamburger menu though - perhaps we can reduce the default Zoom size for the tutorial page a bit as well.

[Roger-luo]

I'm just hoping the default font size can be set so that the top bar doesn't shrink into hamburger menu for the most common screen size (with full-screen size, e.g. 16-inch).

that shouldn't be the case. This theme is configured to be expanded on most of the screens. The tutorial page is currently being built separately; thus, something is inconsistent between these two websites. Let's move the discussion to that repo, and see if it gets fixed after https://github.com/QuEraComputing/bloqade-python-examples/commit/d8b32ab164afa9257ba510678a5d980ff2b1cd7e