schemas as a tree replacing the isEntry behavior

front/js/svelte/layout/Folder.svelte

@@ -0,0 +1,39 @@
+<script>
+    import {createEventDispatcher, getContext, onMount} from "svelte";
+    import Icon from "../common/Icon.svelte";
+    import Folder from "./Folder.svelte";
+
+    const channel = getContext("channel");
+    export let folder;
+    export let schema;
+    export let expanded = folder.shoudlExpand;
+
+    function toggleExpand() {
+        expanded = !expanded;
+    }
+</script>
+<div class="sidebar-folder">
+    {#if folder.name !== ""}
+        <button class="sidebar-header" tabindex="0" on:click={toggleExpand}>
+            {folder.name ?? "Main"}
+            {#if expanded}
+                <Icon icon="circle-chevron-up"></Icon>
+            {:else}
+                <Icon icon="circle-chevron-down"></Icon>
+            {/if}
+        </button>
+    {/if}
+    {#if expanded}
+        {#each folder.folders as aFolder}
+            <Folder folder={aFolder} schema={schema} ></Folder>
+        {/each}
+
+        {#each folder.files as aSchema}
+            <a class="sidebar-item" class:active={aSchema.name === schema?.name}
+               aria-current="page"
+               href="{channel.lucentUrl}/content/{aSchema.name}">{aSchema.label}</a>
+        {/each}
+
+
+    {/if}
+</div>

front/js/svelte/layout/Navbar.svelte

@@ -1,13 +1,39 @@
 <script>
-    import NavbarMenu from "./NavbarMenu.svelte";
     import {getContext} from "svelte";
+    import Folder from "./Folder.svelte";
 
     export let schema;
     const channel = getContext("channel");
     const readableSchemas = getContext("readableSchemas");
 
-    const fileSchemas = readableSchemas.filter((sc) => sc.type === "files");
-    const otherSchemas = readableSchemas.filter((sc) => !sc.isEntry && sc.type === "collection");
+    function addToFolder(tree, folderPath, aSchema) {
+        let shoudlExpand = aSchema.name === schema?.name;
+        if (folderPath === "") {
+            tree.files.push(aSchema)
+            return tree
+        }
+        const folderNames = folderPath.split(".");
+        folderNames.forEach(folderName => {
+            let queriedFolder = tree.folders.find(folder => folder.name === folderName)
+            if (!queriedFolder) {
+                queriedFolder = {name: folderName, files: [], folders: [], shoudlExpand: shoudlExpand};
+            }
+            folderNames.shift()
+            let remainingFolderPath = folderNames.join(".");
+            queriedFolder =  addToFolder(queriedFolder, remainingFolderPath, aSchema)
+            tree.folders.push(queriedFolder);
+        })
+
+        return tree;
+    }
+
+    const schemaTree = readableSchemas.reduce((carry, schema) => {
+        carry = addToFolder(carry, schema.folder,schema)
+        return carry;
+    }, {name: "", files: [], folders: [], shoudlExpand:true});
+
+    // const fileSchemas = readableSchemas.filter((sc) => sc.type === "files");
+    // const otherSchemas = readableSchemas.filter((sc) => !sc.isEntry && sc.type === "collection");
 
 </script>
 <div class="sidebar-top">
@@ -18,22 +44,25 @@
 <div class="sidebar">
 
 
-    <NavbarMenu
-            title="Content"
-            schemas={ readableSchemas.filter((sc) => sc.isEntry)}
-            schema={schema}
-            expanded={true}
-    />
+    <Folder folder={schemaTree} {schema}  ></Folder>
 
-    <NavbarMenu
-            title="Files"
-            schemas={ fileSchemas}
-            schema={schema}
-    />
 
-    <NavbarMenu
-            title="Other"
-            schemas={ otherSchemas}
-            schema={schema}
-    />
+    <!--    <NavbarMenu-->
+    <!--            title="Content"-->
+    <!--            schemas={ readableSchemas.filter((sc) => sc.isEntry)}-->
+    <!--            schema={schema}-->
+    <!--            expanded={true}-->
+    <!--    />-->
+
+    <!--    <NavbarMenu-->
+    <!--            title="Files"-->
+    <!--            schemas={ fileSchemas}-->
+    <!--            schema={schema}-->
+    <!--    />-->
+
+    <!--    <NavbarMenu-->
+    <!--            title="Other"-->
+    <!--            schemas={ otherSchemas}-->
+    <!--            schema={schema}-->
+    <!--    />-->
 </div>

front/js/svelte/layout/NavbarMenu.svelte

@@ -3,8 +3,7 @@
     import Icon from "../common/Icon.svelte";
 
     const channel = getContext("channel");
-    export let schemas;
-    export let title;
+    export let folder;
     export let schema;
     export let expanded = false;
 
@@ -31,4 +30,10 @@
            aria-current="page"
            href="{channel.lucentUrl}/content/{aschema.name}">{aschema.label}</a>
     {/each}
+
+    {#each schemas as aschema}
+        <a class="sidebar-item" class:active={aschema.name === schema?.name}
+           aria-current="page"
+           href="{channel.lucentUrl}/content/{aschema.name}">{aschema.label}</a>
+    {/each}
 {/if}