Add assistant links

Author: davidsklar99

pages/maps/+Page.ts

@@ -59,29 +59,31 @@ export function Page() {
   };
 
   return h('div.maps-page', [
-    h(AssistantLinks, { className: "assistant-links" }, [
-      h(
-        AnchorButton,
-        { icon: "flows", href: "/maps/ingestion" },
-        "Ingestion system"
-      ),
-      h(AnchorButton, { icon: "map", href: "/map/sources" }, "Show on map"),
-      h(DevLinkButton, { href: "/maps/legend" }, "Legend table"),
-    ]),
     h(ContentPage, [
-      h(StickyHeader, {className: "header"}, [
-        h(PageBreadcrumbs, {
-          title: "Maps",
-        }),
-        h(SearchBar, {
-          placeholder: "Filter by name...",
-          onChange: handleChange,
-        }),
-        h(Switch, {
-          label: "Active only",
-          checked: activeOnly,
-          onChange: () => setActiveOnly(!activeOnly),
-        }),
+      h(StickyHeader, {className: "header-container"}, [
+        h('div.header', [
+          h(PageBreadcrumbs, {
+            title: "Maps",
+          }),
+          h(SearchBar, {
+            placeholder: "Filter by name...",
+            onChange: handleChange,
+          }),
+          h(Switch, {
+            label: "Active only",
+            checked: activeOnly,
+            onChange: () => setActiveOnly(!activeOnly),
+          }),
+        ]),
+        h(AssistantLinks, { className: "assistant-links" }, [
+          h(
+            AnchorButton,
+            { icon: "flows", href: "/maps/ingestion" },
+            "Ingestion system"
+          ),
+          h(AnchorButton, { icon: "map", href: "/map/sources" }, "Show on map"),
+          h(DevLinkButton, { href: "/maps/legend" }, "Legend table"),
+        ]),
       ]),
       h(
         "div.strat-list",

pages/maps/main.module.scss

@@ -130,12 +130,6 @@ h1, h3 {
   background-color: #3498DB;
 }
 
-.header {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-}
-
 .maps-page {
   width: 100%;
 }
@@ -164,4 +158,17 @@ h1, h3 {
   h2 {
     margin: 0;
   }
+}
+
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    width: 70%
+  }
 }