multiple commands

front/js/svelte/layout/Header.svelte

@@ -1,17 +1,25 @@
 <script>
     import Avatar from "../account/Avatar.svelte";
     import {getContext} from "svelte";
+    import Dropdown from "../common/Dropdown.svelte";
 
     const channel = getContext("channel");
     const user = getContext("user");
+    console.log( channel.commands)
 </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 channel.commands}
+        <Dropdown>
+            <div slot="button">Actions</div>
+            {#each channel.commands as command}
+                <a href="{channel.lucentUrl}/command-report/{command.signature}" class="top-nav-item">{command.name}</a>
+            {/each}
+        </Dropdown>
+
     {/if}
     <!--        <div>-->
     <!--            <form method="GET">-->
@@ -19,8 +27,8 @@
     <!--                       class="form-control" required/>-->
     <!--            </form>-->
     <!--        </div>-->
-        <a  href="{channel.lucentUrl}/profile">
-            <Avatar side="28" name={user.name}/>
-        </a>
+    <a href="{channel.lucentUrl}/profile">
+        <Avatar side="28" name={user.name}/>
+    </a>
 </div>