diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte index e5eacb1a44..fe0c76af51 100644 --- a/packages/bbui/src/Drawer/Drawer.svelte +++ b/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} -
+
{title} @@ -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; diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 2b47a43c0b..b7bf4bfd92 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/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() diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index b6d24ee893..7f504c4ea8 100644 --- a/packages/builder/src/components/design/settings/componentSettings.js +++ b/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, diff --git a/packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationEditor.svelte b/packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationEditor.svelte deleted file mode 100644 index 33a82d1886..0000000000 --- a/packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationEditor.svelte +++ /dev/null @@ -1,25 +0,0 @@ - - -Configure links - - - Configure the links in your navigation bar. - - - - diff --git a/packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationDrawer.svelte similarity index 100% rename from packages/builder/src/components/design/settings/controls/NavigationEditor/NavigationDrawer.svelte rename to packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationDrawer.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationEditor.svelte new file mode 100644 index 0000000000..c17a58f9e9 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/navigation/_components/NavigationEditor.svelte @@ -0,0 +1,34 @@ + + + + + + Configure the links in your navigation bar. + + + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte index 04b030b2cb..7dd5476cb6 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte @@ -1,5 +1,18 @@ - + + + + Your navigation is configured for all the screens within your app + + + You can hide and show your navigation for each screen in the screen + settings + + + + diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js index 03d536e0e2..a229f0be2f 100644 --- a/packages/client/src/stores/screens.js +++ b/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