filters and sidebar

2024-08-15 14:44:53 +03:00
parent 1f3ebafe69
commit f9806f60c9
32 changed files with 584 additions and 456 deletions
@@ -0,0 +1,26 @@
+<script>
+    import Avatar from "../account/Avatar.svelte";
+    import {getContext} from "svelte";
+
+    const channel = getContext("channel");
+    const user = getContext("user");
+</script>
+
+
+<div class="top-nav ">
+    <a class="top-nav-item" href="{channel.lucentUrl}/members">Members</a>
+
+    {#if channel.generateCommand}
+        <a href="{channel.lucentUrl}/build-report" class="top-nav-item">Build website</a>
+    {/if}
+    <!--        <div>-->
+    <!--            <form method="GET">-->
+    <!--                <input type="search" name="filter[search_regex]" placeholder="Search"-->
+    <!--                       class="form-control" required/>-->
+    <!--            </form>-->
+    <!--        </div>-->
+        <a  href="{channel.lucentUrl}/profile">
+            <Avatar side="28" name={user.name}/>
+        </a>
+</div>
+
@@ -0,0 +1,42 @@
+<script>
+    import NavbarMenu from "./NavbarMenu.svelte";
+    import {getContext} from "svelte";
+    import Avatar from "../account/Avatar.svelte";
+
+    export let schema;
+    const channel = getContext("channel");
+    const readableSchemas = getContext("readableSchemas");
+    const user = getContext("user");
+
+    const fileSchemas = readableSchemas.filter((sc) => sc.type === "files");
+    const otherSchemas = readableSchemas.filter((sc) => !sc.isEntry && sc.type === "collection");
+
+</script>
+<div class="sidebar-top">
+<a class="logo" href="{channel.lucentUrl}">{channel.name}</a>
+    <a class="nav-item" href="{channel.lucentUrl}/profile">
+    <Avatar side="28" name={user.name}/>
+</a>
+</div>
+<div class="sidebar">
+
+
+    <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>
@@ -0,0 +1,34 @@
+<script>
+    import {getContext} from "svelte";
+    import Icon from "../common/Icon.svelte";
+
+    const channel = getContext("channel");
+    export let schemas;
+    export let title;
+    export let schema;
+    export let expanded = false;
+
+    if(schemas.find(s => s.name === schema?.name)){
+        expanded = true;
+    }
+
+    function toggleExpand(){
+        expanded = !expanded;
+    }
+</script>
+
+<div class="sidebar-header" role="button" tabindex="0" on:click={toggleExpand}>
+    {title}
+    {#if expanded}
+        <Icon icon="circle-chevron-up"></Icon>
+    {:else}
+        <Icon icon="circle-chevron-down"></Icon>
+    {/if}
+</div>
+{#if expanded}
+    {#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}