Add link settings to new navigation tab

packages/bbui/src/Drawer/Drawer.svelte

@@ -6,6 +6,8 @@
 
   export let title
   export let fillWidth
+  export let left = "334px"
+  export let width = "calc(100% - 616px)"
 
   let visible = false
 
@@ -42,7 +44,12 @@
 
 {#if visible}
   <Portal>
-    <section class:fillWidth class="drawer" transition:slide|local>
+    <section
+      class:fillWidth
+      class="drawer"
+      transition:slide|local
+      style={`width: ${width}; left: ${left};`}
+    >
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>
@@ -69,8 +76,6 @@
   .drawer {
     position: absolute;
     bottom: 0;
-    left: 260px;
-    width: calc(100% - 520px);
     background: var(--background);
     border-top: var(--border-light);
     z-index: 2;

packages/builder/src/builderStore/store/frontend.js

@@ -101,6 +101,7 @@ export const getFrontendStore = () => {
         previousTopNavPath: {},
         version: application.version,
         revertableVersion: application.revertableVersion,
+        navigation: application.navigation || {},
       }))
 
       // Initialise backend stores
@@ -136,6 +137,19 @@ export const getFrontendStore = () => {
         })
       },
     },
+    navigation: {
+      save: async navigation => {
+        const appId = get(store).appId
+        await API.saveAppMetadata({
+          appId,
+          metadata: { navigation },
+        })
+        store.update(state => {
+          state.navigation = navigation
+          return state
+        })
+      },
+    },
     routing: {
       fetch: async () => {
         const response = await API.fetchAppRoutes()

packages/builder/src/components/design/settings/componentSettings.js

@@ -11,7 +11,6 @@ import MultiFieldSelect from "./controls/MultiFieldSelect.svelte"
 import SearchFieldSelect from "./controls/SearchFieldSelect.svelte"
 import SchemaSelect from "./controls/SchemaSelect.svelte"
 import SectionSelect from "./controls/SectionSelect.svelte"
-import NavigationEditor from "./controls/NavigationEditor/NavigationEditor.svelte"
 import FilterEditor from "./controls/FilterEditor/FilterEditor.svelte"
 import URLSelect from "./controls/URLSelect.svelte"
 import OptionsEditor from "./controls/OptionsEditor/OptionsEditor.svelte"
@@ -38,7 +37,6 @@ const componentMap = {
   options: OptionsEditor,
   schema: SchemaSelect,
   section: SectionSelect,
-  navigation: NavigationEditor,
   filter: FilterEditor,
   url: URLSelect,
   columns: ColumnEditor,

packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationEditor.svelte

@@ -1,25 +0,0 @@
-<script>
-  import { Button, ActionButton, Drawer } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import NavigationDrawer from "./NavigationDrawer.svelte"
-  import { cloneDeep } from "lodash/fp"
-
-  export let value = []
-  let drawer
-  let links = cloneDeep(value || [])
-
-  const dispatch = createEventDispatcher()
-  const save = () => {
-    dispatch("change", links)
-    drawer.hide()
-  }
-</script>
-
-<ActionButton on:click={drawer.show}>Configure links</ActionButton>
-<Drawer bind:this={drawer} title={"Navigation Links"}>
-  <svelte:fragment slot="description">
-    Configure the links in your navigation bar.
-  </svelte:fragment>
-  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <NavigationDrawer slot="body" bind:links />
-</Drawer>

packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationEditor.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { Button, Drawer } from "@budibase/bbui"
+  import NavigationDrawer from "./NavigationDrawer.svelte"
+  import { cloneDeep } from "lodash/fp"
+  import { store } from "builderStore"
+
+  let drawer
+  let links
+
+  const openDrawer = () => {
+    links = cloneDeep($store.navigation.links || [])
+    drawer.show()
+  }
+
+  const save = async () => {
+    let navigation = $store.navigation
+    navigation.links = links
+    await store.actions.navigation.save(navigation)
+    drawer.hide()
+  }
+</script>
+
+<Button cta on:click={openDrawer}>Configure links</Button>
+<Drawer
+  bind:this={drawer}
+  title={"Navigation Links"}
+  width="calc(100% - 334px)"
+>
+  <svelte:fragment slot="description">
+    Configure the links in your navigation bar.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <NavigationDrawer slot="body" bind:links />
+</Drawer>

packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte

@@ -1,5 +1,18 @@
 <script>
   import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import { Body, Layout } from "@budibase/bbui"
+  import NavigationEditor from "./_components/NavigationEditor.svelte"
 </script>
 
-<NavigationPanel title="Navigation" />
+<NavigationPanel title="Navigation">
+  <Layout paddingX="L" paddingY="XL" gap="S">
+    <Body size="S">
+      Your navigation is configured for all the screens within your app
+    </Body>
+    <Body size="S">
+      You can hide and show your navigation for each screen in the screen
+      settings
+    </Body>
+    <NavigationEditor />
+  </Layout>
+</NavigationPanel>

packages/client/src/stores/screens.js

@@ -51,7 +51,7 @@ const createScreenStore = () => {
           navigation: "None",
         }
         if (activeScreen.showNavigation) {
-          navigationProps = activeScreen.navigation
+          navigationProps = $appStore.application?.navigation
 
           // Legacy - if this is a legacy screen without any navigation
           // settings fall back to just showing the app title