Init

themes/hextra/layouts/_shortcodes/filetree/folder.html

@@ -0,0 +1,26 @@
+{{- /*
+A folder in a file tree.
+
+@param {string} name The name of the folder.
+@param {string} state The state of the folder.
+
+@example {{< filetree/folder name="docs" state="closed" >}}
+*/ -}}
+
+{{- $name := .Get "name" -}}
+{{- $state := .Get "state" | default "open" }}
+
+<li class="hx:group hx:flex hx:list-none hx:flex-col">
+  <button class="hextra-filetree-folder hx:inline-flex hx:cursor-pointer hx:items-center hx:py-1 hx:hover:opacity-60">
+    <span data-state="{{ $state }}" class="hx:data-[state=open]:hidden">
+      {{- partial "utils/icon" (dict "name" "folder" "attributes" "width=1em") -}}
+    </span>
+    <span data-state="{{ $state }}" class="hx:data-[state=closed]:hidden">
+      {{- partial "utils/icon" (dict "name" "folder-open" "attributes" "width=1em") -}}
+    </span>
+    <span class="hx:ltr:ml-1 hx:rtl:mr-1">{{ $name }}</span>
+  </button>
+  <ul data-state="{{ $state }}" class="hx:ltr:pl-5 hx:rtl:pr-5 hx:data-[state=closed]:hidden">
+    {{- .InnerDeindent -}}
+  </ul>
+</li>