Make top-level Sidebar Items subtle like nested Sidebar Items #2908
Replies: 1 comment 3 replies
-
|
Thanks for starting this discussion, trueberryless! 🙌 Just sharing an image of your jump-start example, and using it as a jump start. I'm noticing that it maybe feels odd to have the group headings larger than the stand alone items, I think? Maybe just bold, but same size would be enough? I know you're not proposing perfect CSS, but that was the first thing I noticed. If a page is important enough to be a top level, stand-alone page, then it feels weird for it to be smaller than a group heading, I think. In fact, when Group 2 is collapsed below, it makes me think that the top level links underneath it (before Group 3) are actually its sub pages:
|
Beta Was this translation helpful? Give feedback.
-
You mean that the headings would be bold but not larger than the top-level items? However, what I think you actually meant is: The top-level items should be made larger (which they were). So in other words: Leave the sizes of ALL elements untouched and just manipulate the boldness, colors and margins between the items... Personally, I understand what your argument is, and it makes total sense at all. Nonetheless I think there is one scenario where the larger top-level items would make the list feel weird: If NO GROUPS exist at all... Because then there are only top-level items taking up a lot of space... If I should elaborate more about anything please let me know because I feel like I did a horrible job explaining what I mean 😆 EDIT: Okay, wait actually, I just tried it out, it isn't even that bad. |
Beta Was this translation helpful? Give feedback.
-
|
I finally found some time to add some different stylings, I would be very happy if people suggestion some more ideas, which I can add to the website, so people can explore different options and eventually maybe there is one were most users and maintainers are happy with... |
Beta Was this translation helpful? Give feedback.
-
|
I also encountered this issue when building my theme recently. In the end for that theme I made all links and group headings the same size with bold text and colour being what distinguishes the group headings. Here’s an example: https://stackblitz.com/edit/github-jj1kzx5x-rpt55cac |
Beta Was this translation helpful? Give feedback.
-
What version of
starlightare you using?0.32.0
What is your idea?
Currently, top-level items in the Starlight Sidebar are pretty bold and large, like you can see here.
I personally think that those items should be designed more subtle and smaller like the other items inside groups. And as Chris mentioned in Discord this design choice was made very efficient. Now that Starlight has gained more popularity, I think it's time to address this "design artifact".
Write down below what you think could be improved, share ideas or just upvote if you agree with the suggestion!
Suggestion in words:
You can view an example of how that and some other ideas from below looks on this experiment website
Why is this feature necessary?
Make all top-level items / items without groups / unnested items more subtle, cleaner and/or smaller.
Do you have examples of this feature in other projects?
I created an example website so everybody can view the suggestion in different browsers, on different screen sizes etc.:
https://starlight-subtle-top-level-items.trueberryless.org/
Participation
Beta Was this translation helpful? Give feedback.
All reactions