update sidebar nav styles

neo4j-documentation / docs-ui

Mozilla Public License 2.0

4 stars 23 forks source link

update sidebar nav styles #75

Closed spgandhi closed 2 years ago

spgandhi commented 3 years ago

This PR updates the sidebar design based on the designs Frank Gong had created while he was interning with us in Summer 2021. The design references are here - https://www.figma.com/file/vWWbgrZdIoUcd4S7agFbf0/Developer-Pages?node-id=0%3A1

There are a few minor things which has not been implemented in this PR (mostly because of the semantics of the sidebar and which is why it was difficult to apply certain styles - eg: horizontal divider between blocks)

The new design works good with /developer pages

Hopefully it will look fine with other docs pages as well.

Has dependency on https://github.com/neo4j-documentation/developer-guides/pull/211

netlify[bot] commented 3 years ago

✔️ Deploy Preview for neo4j-docs-ui ready!

🔨 Explore the source changes: ca45ce6cf12eceb93d0bb6823ee2a14aa4b69003

🔍 Inspect the deploy log: https://app.netlify.com/sites/neo4j-docs-ui/deploys/6214e5cea8b3af000774cdbb

😎 Browse the preview: https://deploy-preview-75--neo4j-docs-ui.netlify.app

adam-cowley commented 2 years ago

A couple of issues when looking at how the Docs are rendered:

The title of the page is huge when it renders and feels a bit aggressive (Neo4j Cypher Manual). Ideally, the bottom border of the element should line up with the breadcrumbs.
The Appendix at the bottom isn't a link so doesn't have the padding of the other elements

Full Preview

recrwplay commented 2 years ago

Also, for the arrow toggle to indicate that there's a subsection - this is displayed where you have text and then a subsection, if the text is not itself a link to a page. For example, the Appendix link in the screenshot from @adam-cowley. However, the toggle arrow does not appear if the section header is also a page.

In the above example, the source is

* Appendix
** xref:reference/index.adoc[]
*** xref:reference/configuration-settings/index.adoc[]
*** xref:reference/procedures/index.adoc[]

But if it was

* xref:appendix.adoc[]
** xref:reference/index.adoc[]
*** xref:reference/configuration-settings/index.adoc[]
*** xref:reference/procedures/index.adoc[]

There would be no toggle arrow on the 'Appendix' entry in the nav.