# Cleaner design of the sidebar?

**URL:** <https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604>\
**Category:** Features\
**Created:** [2 April 2020 13:44 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604 "2020-04-02T13:44:06Z")\
**Posts on this page:** 11\
**Page:** 2

<div class="post-metadata">

**Author:** ![uxamanda](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/uxamanda/32/6786_2.png) [@uxamanda](https://discourse.joplinapp.org/u/uxamanda)\
**Post date:** [18 April 2020 19:31 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/22 "2020-04-18T19:31:39Z")

</div>

For people to recreate the existing look with userstyle.css we will need both a `.selected` class and a `.notebook-level-[x]` class added. Right now you cannot tell what level a notebook is with CSS only since it is only being applied visually with inline styles.

Regardless, I vote no background, except for a selected state, with `> v` symbols on the left. (aka option M + a selected state). With this option, I think it will also look better to move the symbols for “tags” and “notebooks” the left as well.

Here’s a quick mockup:

 ![sidebar](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/0/0fa1368a2f3ad138123e13c5788928402f23769e.png)

---

<div class="post-metadata">

**Author:** ![memophen](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/memophen/32/1937_2.png) [@memophen](https://discourse.joplinapp.org/u/memophen)\
**Post date:** [18 April 2020 20:34 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/23 "2020-04-18T20:34:22Z")

</div>

I would prefer the icons of “Notebooks” and “Tags” in @uxamanda’s design to have the same brightness as the text (#5F5F5F), for two reasons:

- To visually unindent them
- These icons are not controls (in fact, the entire line is currently a control, but that could be changed)

And wouldn’t it be more logical to indent “All notes” including its icon and to make that icon brighter as well, so that it aligns “Notebooks” and “Tags” and their icons?

---

<div class="post-metadata">

**Author:** ![uxamanda](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/uxamanda/32/6786_2.png) [@uxamanda](https://discourse.joplinapp.org/u/uxamanda)\
**Post date:** [18 April 2020 21:13 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/24 "2020-04-18T21:13:08Z")

</div>

That all makes sense to me. Sadly I mocked it up by editing in the dev tools so it is hard to recreate and show with your fixes, but I agree with all of your edits.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [1 May 2020 18:57 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/25 "2020-05-01T18:57:57Z")

</div>

> [@CalebJohn](#):
>
> We could probably have a compromise, we could add css classes based on depth and one for the selected notebook. This gives even more power to the user CSS, the only drawback is that we would need some extra code.

Yes that would be a good compromise, and not too hard to implement.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [1 May 2020 18:58 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/26 "2020-05-01T18:58:30Z")

</div>

I get the feeling that option **M** is the best. Should we go with this one?

 ![Sidebars-2](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/1/148b11f114b20681c173a643218221cfa8d1f1e5.png)

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [1 May 2020 23:31 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/27 "2020-05-01T23:31:45Z")

</div>

Yep, I like M, but it’s not much different to the current design. It’s basically just removing the background color and replacing the icons.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [2 May 2020 16:19 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/28 "2020-05-02T16:19:25Z")

</div>

Ok, version **M** has been implemented in this commit: [https://github.com/laurent22/joplin/commit/f51873d87705d9305c6e93f8248dc12a45f9814c](https://github.com/laurent22/joplin/commit/f51873d87705d9305c6e93f8248dc12a45f9814c)

For those who still want the colour gradient, there’s a class `list-item-depth-$DEPTH` on each sidebar item, which can be used to style the item depending on the depth.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [2 May 2020 16:20 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/29 "2020-05-02T16:20:10Z")

</div>

Thanks @memophen for researching the issue!

---

<div class="post-metadata">

**Author:** ![Rolograaf](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/rolograaf/32/1675_2.png) [@Rolograaf](https://discourse.joplinapp.org/u/Rolograaf)\
**Post date:** [24 May 2020 18:39 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/30 "2020-05-24T18:39:33Z")

</div>

I enjoy the new layout via @uxamanda 's user stylesheets, thanks for bringing this up, I actually thought it would be in your category `!Onvindbaar` but glad we found it.

Lourens

---

<div class="post-metadata">

**Author:** ![uxamanda](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/uxamanda/32/6786_2.png) [@uxamanda](https://discourse.joplinapp.org/u/uxamanda)\
**Post date:** [27 May 2020 17:17 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/31 "2020-05-27T17:17:19Z")

</div>

Been enjoying this update, thank you. I really wish there was a class to target the selected Notebook. It’s one of the only colors I have in my theme, so it would be great if it was targetable.

Ideally something as simple as a `selected` or `active`:

```auto
class="list-item-container selected"

```

We could reuse the same class in both the notebook and notes lists since it’s easy to distinguish between those in CSS.

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [28 May 2020 00:11 UTC](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604/32 "2020-05-28T00:11:43Z")

</div>

Maybe you could add that to

> [@List of CSS elements which should have a class](https://discourse.joplinapp.org/t/list-of-css-elements-which-should-have-a-class/6921):
>
> I'll update this list when other elements come to mind. This post is a wiki, so anyone can add something to it. Preferences -\> Encryption -\> E2EE text Background color, text color, link color Banner (Could probably share the same class as E2EE banner) Internal Notes & files You can currently select between external and internal links, but there is no way to select and separate Joplin notes from internal files such as a .txt. Tags Tags editor a class for sin…

[Previous page](https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604.md?page=1)