A better sidebar with folders icons

Share & showcase
,
3

Thanks for sharing! Here’s a riff on your fantastic style. My goal was to make Obsidian look a bit more like VSCode.

  1. I removed the folder icon next the Vault’s name.
  2. I unhid the folder’s collapse indicators.
  3. I shrank the folder icon’s width and height by a few pixels.
  4. I removed some of the margin next to the folder’s icon.
  5. I reset the folder name’s font styles to use Obsidian’s defaults.

Screenshot 2023-04-05 at 15.48.52
Screenshot 2023-04-05 at 15.48.52740×666 25.3 KB

Here’s the CSS snippet I ended up with.

.nav-folder:not(.mod-root) .nav-folder-title-content::before {
  display: inline-block;
  content: "";
  margin-right: 5px;
  vertical-align: text-bottom;
  height: 15px;
  width: 15px;
  background-color: currentColor;
}

.nav-folder:not(.mod-root):not(.is-collapsed) .nav-folder-title-content::before {
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder-open-outline%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='folder-open' fill='%23000000' transform='translate(42.666667, 85.333333)'%3e%3cpath d='M384,128 L384,42.6666667 L232.0416,42.6666667 L178.0832,1.42108547e-14 L7.10542736e-15,1.42108547e-14 L7.10542736e-15,341.333333 L60.9376,341.333333 L352.437547,341.333333 L361.604267,341.333333 L426.354347,128 L384,128 Z M42.6666667,253.44 L42.6666667,42.6666667 L163.24992,42.6666667 L217.20832,85.3333333 L341.333333,85.3333333 L341.333333,128 L82.0209067,128 L42.6666667,253.44 Z M329.979093,298.666667 L73.1874133,298.666667 L113.354027,170.666667 L368.812373,170.666667 L329.979093,298.666667 Z' id='Shape'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat;
}

.nav-folder:not(.mod-root).is-collapsed .nav-folder-title-content::before {
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder-outline%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='folder' fill='%23000000' transform='translate(42.666667, 85.333333)'%3e%3cpath d='M426.666667,341.333333 L3.55271368e-14,341.333333 L3.55271368e-14,1.42108547e-14 L178.083413,1.42108547e-14 L232.041813,42.6666667 L426.666667,42.6666667 L426.666667,341.333333 Z M42.6666667,298.666667 L384,298.666667 L384,85.3333333 L217.20832,85.3333333 L163.24992,42.6666667 L42.6666667,42.6666667 L42.6666667,298.666667 Z' id='Shape'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat;
}
8 Likes