Responsive TreeView

Tricks & Techniques
1

TreeView is a great plug for browsing pages in directories I don’t open often.
The only problem I have with it, is that it’s not very responsive.
It either works for landscape or portrait, but not both.
There is a GitHub issue open to have device specific configurations and/or a switch button, but I haven’t seen much development in it.

For me, this page solves (almost) all issues.

#style

Improved TreeView styling.

  • Correctly resizes depending on screen width
  • Moves menu to side in landscape mode and to bottom in portrait mode.
  • Resizes font depending on viewport for better readability
  • Required in [[SETTINGS]]:
    treeview:
  position: bhs

html {
  --treeview-phone-height: 25vh;
  --treeview-tablet-width: 25vw;
  --treeview-tablet-height: 100vh;
  --treeview-desktop-width: 20vw; 
}

.sb-bhs {
  height: var(--treeview-phone-height);
}

.tree__label > span {
  font-size: calc(14px + 0.5vh); 
}

@media (min-width: 960px) {
  #sb-root:has(.sb-bhs) #sb-main,
  #sb-root:has(.sb-bhs) #sb-top {
    margin-left: var(--treeview-tablet-width);
  }

  .sb-bhs {
    position: fixed;
    left: 0;
    height: var(--treeview-tablet-height);
    width: var(--treeview-tablet-width);
    border-right: 1px solid var(--top-border-color);
  }
}

@media (min-width: 1440px) {
  #sb-root:has(.sb-bhs) #sb-main,
  #sb-root:has(.sb-bhs) #sb-top {
    margin-left: var(--treeview-desktop-width);
  }

  .sb-bhs {
    width: var(--treeview-desktop-width);
  }
}

The only part about this code I don’t like is the .tree__label > span font size.
Since TreeView is loaded in as an iframe, media queries don’t really work.
If anyone knows of a good approach to do this, feel free to share.
It will give a lot more freedom regarding customisation, yet more control over sizing.

2 Likes