Update footer and navbar to match PennyLane website #40
Conversation
Mandrenkov
requested review from
josh146,
LucasSilbernagel,
Anakhom and
ashishks0522
There was a problem hiding this comment.
Hey @Mandrenkov! You've done an incredible job matching the navbar in Sphinx.
- Learn > Glossary: Link is broken and should go to https://pennylane.ai/qml/glossary
- When I hover on 'Learn' (for example) and then hover on 'Documentation' there's a delay when the 'Learn' menu closes causing overlap.
|
Thanks for the review, @Lorraine-at-Xanadu!
I assume this is meant for the PennyLane Sphinx Theme PR: PennyLaneAI/pennylane-sphinx-theme#29.
I've updated the navbar so that the dropdown menus instantly close when a user stops hovering over it. |
|
Thanks for the review, @LucasSilbernagel!
I agree the accessibility of the new navbar and footer leave much to be desired. We'll tackle it soon! |
@Mandrenkov @Lorraine-at-Xanadu this is really annoying for users with accessibility requirements and defeats the purpose of the accessible example we followed |
There was a problem hiding this comment.
I didn't review the code, but reviewed the PR preview. Looks and works great @Mandrenkov, super impressed how much you got it to match!
|
@LucasSilbernagel, after a discussion with @Anakhom and @AndrewGardhouse offline, we decided to reinstate the one-second delay but ensure that only one dropdown from the navbar is displayed at any given time. |
**Context:** The PennyLane website is updating the styling of its footer and navbar. For a consistent experience, it makes sense to also update the layout, styling, etc. of the PennyLane Docs pages to match the main website. **Description of the Change:** Updated the inherited Xanadu Sphinx Theme (XST) version to v0.4.0 as well as the default navbar and footer options. The technical details of these changes (e.g., CSS modifications) are captured in a [different PR to the XST repository](XanaduAI/xanadu-sphinx-theme#40). <details><summary>Desktop Navbar</summary> <p> <img width="948" alt="Desktop Navbar" src="https://github.com/PennyLaneAI/pennylane-sphinx-theme/assets/5883774/79eafb91-7e03-4470-80f7-f069de5de20e"> </p> </details> <details><summary>Desktop Footer</summary> <p> <img width="948" alt="Desktop Footer" src="https://github.com/PennyLaneAI/pennylane-sphinx-theme/assets/5883774/0317edae-1983-4d01-a66b-834c1c614ab5"> </p> </details> <details><summary>Mobile Navbar</summary> <p> <img width="417" alt="Mobile Navbar Expanded" src="https://github.com/PennyLaneAI/pennylane-sphinx-theme/assets/5883774/0cf8d084-ccdb-45e1-a8a7-53f481c94e9c"> <img width="420" alt="Mobile Navbar ToC Expanded" src="https://github.com/PennyLaneAI/pennylane-sphinx-theme/assets/5883774/1a3de49f-7f21-4378-baca-bd3fe51235ac"> </p> </details> <details><summary>Mobile Footer</summary> <p> <img width="419" alt="Mobile Footer" src="https://github.com/PennyLaneAI/pennylane-sphinx-theme/assets/5883774/c1cfc266-53d6-4901-b5d0-c440ce6d7467"> </p> </details> **Benefits:** * The navbar and footer on the PennyLane Docs pages will be consistent with the main PennyLane website. **Possible Drawbacks:** * Some accessibility features were compromised in the XST v0.4.0 release; however, these will be addressed in a future patch release. **Related GitHub Issues:** None. --- **Preview:** https://xanaduai-pennylane--29.com.readthedocs.build/projects/sphinx-theme/en/29/.
Context:
The PennyLane website is updating the styling of its footer and navbar. Since the PennyLane Sphinx Theme inherits the structure and style of the Xanadu Sphinx Theme, the updated layout, configuration, etc. are also reflected here.
Description of the Change:
Updated the footer and navbar configuration and styles to match the new PennyLane website. The changes to the theme configuration are documented in the diff of the
README.rst.Navbar
Footer
Mobile Navbar
Mobile Footer
Benefits:
Possible Drawbacks:
Related GitHub Issues:
None.
Preview: https://xanadu-sphinx-theme--40.org.readthedocs.build/en/40/