filesystem-model.js

state.dirs = [
  0: [
    name: "/",
    files: [
      0: [
        name: "entry.txt.gpg",
        type: "text/gpg",
        uri: "/Users/shibacomputer/Txt/entry.txt.gpg"
      ],
      1: [
        name: "entry 2.txt.gpg",
        type: "text/gpg",
        uri: "/Users/shibacomputer/Txt/entry 2.txt.gpg"
      ]
    ],
    subdirs: [
      0: [ 
        name: "subdir 1",
        uri: "/Users/shibacomputer/Txt/subdir",
      ],
      1:  [
        name: "subdir 2",
        uri: "/Users/shibacomputer/Txt/subdir 2"
      ]
    ]
 ]

sidebar.js

    return html`
      <nav class="${fsBase}">
        ${populateSidebar()}
      </nav>
    `
  }

  function populateSidebar() {
    return state.filesystem.dirs.map( (fsItem) => {
      return html`
        ${showADirectory(fsItem)}
      `
    })
  }

  function showADirectory(directory, parent) {
    return directory.map( (item) => {

      return html`
        ${listSubdirectories(item.subdirs)}
        ${listFiles(item.files)}
      `
    })
  }

  function listSubdirectories(subDirs) {
  // sub dir list
  }

  function listFiles(files) {
  // file list
  }