Docs site: Sidebars - Githubissues

gokul472 commented 4 years ago

This ticket is for the sidebar menu links

Left sidebar:: how multiple levels will be shown for the sidebars.

[ ] They can be expanded and collapsed
[ ] Default, hover, active states
[ ] Link to the Github repo for that product.
[ ] Should be fixed - so menu should follow the user as they scroll down the page (eg. https://docs.cbioportal.org/2.1.1-deploy-with-docker-recommended/import_data).

Zeplin: https://zpl.io/2v4YjYn For more styles for tertiary sections: https://zpl.io/VQwYJKn

Right sidebar:

[ ] This is the table of contents for the page (based on content headers on page): all subsections are show by default - no expand and collapse here
[ ] As user scrolls down the page, this TOC menu follows them and highlights (active state) which section is in the current viewing pain (example: https://docs.cbioportal.org/2.1.1-deploy-with-docker-recommended/import_data)

Scope/testing additions

made horizontal lines darker site-wide
added a link component that detects if links are internal or external. internal links will now use Gatsby routing and external links will open in new tabs.
- as an enhancement this should be implemented site-wide, i.e. every instance of <a href> should be using this link component.
updated Markdown example, removed info that conflicts with the code formatting settings for this project.
improved colour contrast of links in warning & note boxes.

samrichca commented 3 years ago

what happens when you scroll down?

I'm imagining...

b-f-chan commented 3 years ago

Include mobile version in scope of ticket - Follow hamburger UX similar to ARGO docs, example: https://docs.icgc-argo.org/docs/submission/submission-overview

samrichca commented 3 years ago

updates on file & URL structure. follows the ICGC ARGO docs structure.

kcullion commented 3 years ago

@samrichca Some feedback as discussed on slack:

[ ] Let's just show the h1 and h2 level headings in the right table of contents sidebar, or else this could get quite overwhelming.

[ ] Let's make it so the content starts at the same place on each page, with or without the right sidebar. So it isn't jumping around when navigating
[ ] Since the left menu can get pretty long, let's move the github button to the top right of the page template (as it's an important link to get to) https://zpl.io/VQwYJKn On mobile, just keep it out of the right sidebar like:
[ ] There's a resolution just before the menus disappear for mobile where the blue menu button shows at the bottom, but does not open to anything:
[ ] the left sidebar menu is doing that thing where on refresh, it's losing the active state:

samrichca commented 3 years ago

thanks for the feedback @kcullion !

cc @b-f-chan

kcullion commented 3 years ago

looks great @samrichca thanks!

rosibaj commented 3 years ago

Side bar feedback (Dec 02)

keep at least 50px from left side bar (the design is measuring 50px..but can eyeball what looks good in the browser)
let the content expand based on screen size to the right bar

rosibaj commented 3 years ago

@samrichca this looks amazing! I think we are done with sidebars for now!