Special bullet/style for sidebar docs home #1322
Conversation
This fixes an unreported issue (well, at least I haven't seen it) where the docs sidebar wouldn't mark home as active when the user is on it. This fix won't work if we decide to add children to the docs home later on, but we currently don't, I'm pretty sure we have no plans to, and we can easily adapt this fix to handle it if we ever do.
Beforehand, we were getting the value from the `location` global. This way, we aren't subject to the whims of the browser and will get the canonical path every time.
This branch adds the fields "icon" and "style" to the allowed fields in sidebar.json. The "style" field applies a class from the sidebar module to the item. Similarly, the "icon" field lets one define a custom icon on a menu item that replaces the default `::before` bullet. Usable icons must be added as a component (any source works, I used SVGR but an `img` can be used for raster images. The class has to exist in the sidebar CSS module to do anything, but using one that doesn't exist won't break the build. Once an icon is defined, it can be used and shared with any amount of sidebar entries anywhere by using its key in the const as the value of "icon". Items with `icon` defined will have the default triangle bullet removed. The home SVG changes color with the link because it's made with `currentColor` and an actual element instead of the more limited `::before`.
|
Comparing Special bullet/style for sidebar docs home Snapshot #10 to median since last deploy of DVC.org.
3 pages tested
|
| Chrome Desktop | MotoG4, 3G connection |
|---|---|
 |
 |
Most significant changes
 |
Value | Budget |
|---|---|---|
| Total JSON size in bytes Chrome Desktop |
7.4 KB  from 37 KB |
 |
| Lighthouse Performance Score MotoG4, 3G connection |
88  from 75 |
|
Docs
Browser previews
| Chrome Desktop | MotoG4, 3G connection |
|---|---|
 |
 |
Most significant changes
|
Value | Budget |
|---|---|---|
| Total JSON size in bytes Chrome Desktop |
58 KB  from 160 KB |
|
| Total JSON size in bytes MotoG4, 3G connection |
14 KB  from 28 KB |
|
| Total Page size in bytes Chrome Desktop |
1.2 MB  from 1.3 MB |
|
Blog
Browser previews
| Chrome Desktop | MotoG4, 3G connection |
|---|---|
 |
 |
Most significant changes
|
Value | Budget |
|---|---|---|
| Total JSON size in bytes Chrome Desktop |
69 KB  from 130 KB |
|
| Total JSON size in bytes MotoG4, 3G connection |
69 KB  from 91 KB |
|
Calibre: Site dashboard | View this PR | Edit settings
|
This branch now also turns leaf item default bullets into circles via CSS. These are implemented as |
|
@rogermparent looks cool but a bit noisy from the design perspective. let's try this:
|
|
Can do! Thanks for the feedback! |
I sourced from the wrong place in getting the current path earlier.
- Remove bullets on leaves - Remove bold styling on home - Change padding to make non-bullet items look a little better
This would probably be better done by changing the file, so I'll do that afterward.
Such that the default state doesn't depend on `animation`.
All fixed! I changed some padding around too because the left pad looked oddly large without bullets sitting in the space. |
|
@rogermparent looks better! I still don't like the home 🏠 icon - let's try to remove it? or may be the problem is that we highlight along with the text (not the case for triangles) + it's not well aligned (should be a bit to the right and down). Let's play with it a little bit. |
|
@rogermparent I can do it on my won, give me a few minutes |
|
Sure! Get it exactly how you want it, I don't have a great eye for design. I'm sure you're already using the files changed to navigate what you need to edit. It's worth noting that you can set |
|
Configuration I like the most so far for the home icon:
The thing that was not easy to try for me - for leaf items - can we make a bullet, but a small one (it should fit inside a triangle to give you a reference). Sorry for this pixel movements - I'm not a designer either, but have a good eye - just need to move things around to see myself to decide :) |
Ah, yes, I disabled leaf bullets in logic and removed them completely, sorry about that! I can re-add them with a new SVG that fits your description.
Don't worry at all! I'm glad that someone else is giving input, even if it's pixel movements- especially where bullets are positioned using |
- Re-add leaf bullets, but smaller now - Implement suggested movement changes to home icon - Lock icon to text gray
|
Cool 😎 thanks @rogermparent ! |
| const { label, slug, source, tutorials, type, url } = rawItem | ||
| const { label, slug, source, tutorials, type, url, style, icon } = rawItem |
There was a problem hiding this comment.
May want to update the inline doc example in in the top of this file.
There was a problem hiding this comment.
@jorgeorpinel I'm not sure what you mean by inline doc example in this file. Did you mean to link a doc file that describes how to use the sidebar?
I figured it out, I was looking at the wrong file! I'll update that.
Builds on #1312
Fixes #1053, which is also one of the remaining parts of #1073
This branch adds capability for pre-defined special styles and icons to be applied on a per-item basis in
sidebar.json.It also uses this capability to give the doc home a little house icon.
I got the icon from here (It's under CC0 / public domain so we don't have to worry, but it can be replaced if needed) and modified it to use
currentColor, meaning it takes on the color of the containing link.The default
:beforebased bullet behavior is left the same, but special icons are real elements because it offers much more flexibility for no cost, as well as thecurrentColorcapability and optimization components like SVGR.Custom icons are defined as React components, so we could define anything as one- even raster images or pure CSS divs!