shelfy/templates/folders.pages.tmpl

  <section class="section">
    <div class="container is-fluid">
      <div class="columns">

        <!-- Sidebar -->
        <div class="column is-2">
          <aside class="menu">
            <p class="menu-label">Dossiers</p>
            <ul class="menu-list">
              {{- range .Dirs }}
              <li>
                <a
                  hx-get="/folders?path={{ urlquery .Name }}"
                  hx-target="#file-list"
                  hx-push-url="true"
                  class="{{ if eq $.CurrentPath .Name }}is-active{{ end }}"
                >
                  {{ .Name }}
                </a>
              </li>
              {{- end }}
            </ul>
          </aside>
        </div>

        <!-- Grille -->
        <div class="column is-7">
          <nav class="breadcrumb" aria-label="breadcrumbs">
            <ul>
              <li>
                <a
                  hx-get="/folders"
                  hx-target="#file-list"
                  hx-push-url="true"
                >
                  Home
                </a>
              </li>
              {{- $parts := split .CurrentPath "/" }}
              {{- $acc := "" }}
              {{- range $i, $p := $parts }}
                {{- if ne $p "" }}
                  {{- $acc = printf "%s/%s" $acc $p }}
                  <li class="is-active">
                    <a
                      hx-get="/folders?path={{ urlquery (trimPrefix "/" $acc) }}"
                      hx-target="#file-list"
                      hx-push-url="true"
                    >
                      {{ $p }}
                    </a>
                  </li>
                {{- end }}
              {{- end }}
            </ul>
          </nav>

          <div
            id="file-list"
            hx-trigger="load"
            hx-get="/folders?path={{ urlquery .CurrentPath }}"
            hx-target="#file-list"
          >
            {{ template "_file_list.pages.tmpl" . }}
          </div>
        </div>

        <!-- Détails -->
        <div class="column is-3">
          <div id="detail-panel">
            <em>Sélectionnez un fichier ou dossier…</em>
          </div>
        </div>

      </div>
    </div>
  </section>