From cdac78899a59bb21be71143f26ade0c48ed896a1 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 26 Mar 2024 16:05:01 +0000 Subject: [PATCH 01/19] Rewrite navigation settings panel --- .../_components/Navigation/index.svelte | 346 +++++++----------- 1 file changed, 136 insertions(+), 210 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte index 4db218f60b..c04baf2177 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte @@ -3,60 +3,59 @@ import { get } from "svelte/store" import Panel from "components/design/Panel.svelte" import { - Detail, Toggle, - Body, - Icon, - ColorPicker, - Input, - Label, - ActionGroup, - ActionButton, + DetailSummary, Checkbox, notifications, Select, - Combobox, } from "@budibase/bbui" import { themeStore, selectedScreen, screenStore, - navigationStore, + componentStore, + navigationStore as nav, } from "stores/builder" import { DefaultAppTheme } from "constants" - import BarButtonList from "/src/components/design/settings/controls/BarButtonList.svelte" + import PropertyControl from "components/design/settings/controls/PropertyControl.svelte" + import BarButtonList from "components/design/settings/controls/BarButtonList.svelte" + import ColorPicker from "components/design/settings/controls/ColorPicker.svelte" + import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte" + import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte" + import { getBindableProperties } from "dataBinding" - $: alignmentOptions = [ + const positionOptions = [ + { value: "Top", barIcon: "PaddingTop" }, + { value: "Left", barIcon: "PaddingLeft" }, + ] + const alignmentOptions = [ { value: "Left", barIcon: "TextAlignLeft" }, { value: "Center", barIcon: "TextAlignCenter" }, { value: "Right", barIcon: "TextAlignRight" }, ] + const widthOptions = ["Max", "Large", "Medium", "Small"] + $: bindings = getBindableProperties( + $selectedScreen, + $componentStore.selectedComponentId + ) $: screenRouteOptions = $screenStore.screens .map(screen => screen.routing?.route) .filter(x => x != null) - const updateShowNavigation = async e => { - await screenStore.updateSetting( - get(selectedScreen), - "showNavigation", - e.detail - ) + const updateShowNavigation = async show => { + await screenStore.updateSetting(get(selectedScreen), "showNavigation", show) } const update = async (key, value) => { try { - let navigation = $navigationStore + let navigation = $nav navigation[key] = value - await navigationStore.save(navigation) + await nav.save(navigation) } catch (error) { notifications.error("Error updating navigation settings") } } - - const updateTextAlign = textAlignValue => { - navigationStore.syncAppNavigation({ textAlign: textAlignValue }) - } -
-
- General -
-
- - Show nav on this screen -
-
+ + + {#if $selectedScreen?.showNavigation} -
-
-
- Customize -
-
- - These settings apply to all screens -
-
- -
-
-
- -
- - update("navigation", "Top")} + + +
+ update("navigation", position)} + value={$nav.navigation} + props={{ + options: positionOptions, + }} + /> + {#if $nav.navigation === "Top"} + update("navWidth", width)} /> - update("navigation", "Left")} - /> - - - {#if $navigationStore.navigation === "Top"} -
- -
- update("sticky", e.detail)} - /> -
- -
- update("title", e.detail)} - updateOnChange={false} + {#if !$nav.hideTitle} + update("title", title)} + {bindings} + props={{ + updateOnChange: false, + }} /> - -
- -
- nav.syncAppNavigation({ textAlign: align })} + value={$nav.textAlign} + props={{ + options: alignmentOptions, + }} /> {/if} -
- -
- update("navBackground", e.detail)} + update("navBackground", color)} + value={$nav.navBackground || DefaultAppTheme.navBackground} + props={{ + spectrumTheme: $themeStore.theme, + }} /> -
- -
- update("navTextColor", e.detail)} + update("navTextColor", color)} + value={$nav.navTextColor || DefaultAppTheme.navTextColor} + props={{ + spectrumTheme: $themeStore.theme, + }} />
-
+ -
-
-
- Logo -
-
-
- -
- update("hideLogo", !e.detail)} + +
+ update("hideLogo", !show)} /> - {#if !$navigationStore.hideLogo} -
- -
- update("logoUrl", e.detail)} - updateOnChange={false} + {#if !$nav.hideLogo} + update("logoUrl", url)} + {bindings} + props={{ + updateOnChange: false, + }} /> -
- -
- update("logoLinkUrl", e.detail)} - options={screenRouteOptions} + update("logoLinkUrl", url)} + {bindings} + props={{ + appendBindingsAsOptions: false, + options: screenRouteOptions, + }} /> -
- -
- update("openLogoLinkInNewTab", !!e.detail)} + update("openLogoLinkInNewTab", show)} /> {/if}
-
+ {/if} From d14cfbb0abc2a80760da3cf4132a7cd01be0bfcc Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 26 Mar 2024 16:05:19 +0000 Subject: [PATCH 02/19] Don't show evaluation side panel when context exists but is empty --- .../builder/src/components/common/bindings/BindingPanel.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte index 21d389357f..8c6c56aa99 100644 --- a/packages/builder/src/components/common/bindings/BindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte @@ -131,7 +131,7 @@ if (bindings?.length) { options.push(SidePanels.Bindings) } - if (context) { + if (context && Object.keys(context).length > 0) { options.push(SidePanels.Evaluation) } if (useSnippets && mode === Modes.JavaScript) { From cecd5a1908859ceca295b2325d57ec57648aafbb Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 26 Mar 2024 16:08:55 +0000 Subject: [PATCH 03/19] Fix wrong nav settings being updated --- .../[componentId]/_components/Navigation/index.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte index c04baf2177..a98de86e27 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte @@ -91,12 +91,12 @@ label="Sticky header" control={Checkbox} value={$nav.sticky} - onChange={width => update("navWidth", width)} + onChange={sticky => update("sticky", sticky)} /> update("navigation", position)} + onChange={position => update("navWidth", position)} value={$nav.navWidth} props={{ placeholder: null, From 9fe027b3db62159a25a1b54bfc65488314840443 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 27 Mar 2024 09:30:11 +0000 Subject: [PATCH 04/19] Initial work on nested nav links --- .../ButtonConfiguration.svelte | 1 - .../DraggableList/DraggableList.svelte | 2 +- .../Navigation/EditNavItemPopover.svelte | 76 ++++++++++++ .../_components/Navigation/LinksEditor.svelte | 30 ----- .../_components/Navigation/NavItem.svelte | 51 ++++++++ .../Navigation/NavItemConfiguration.svelte | 113 ++++++++++++++++++ .../_components/Navigation/index.svelte | 4 +- .../client/src/components/app/Layout.svelte | 2 +- 8 files changed, 244 insertions(+), 35 deletions(-) create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte diff --git a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte index 0bad2ffb19..db2289345f 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte @@ -14,7 +14,6 @@ export let key export let nested export let max - export let context const dispatch = createEventDispatcher() diff --git a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte index c5fe2220e9..0eb74da94c 100644 --- a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte +++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte @@ -126,7 +126,7 @@
+ import { Icon, Popover, Layout } from "@budibase/bbui" + import { createEventDispatcher, getContext } from "svelte" + + export let anchor + export let navItem + + const draggable = getContext("draggable") + const dispatch = createEventDispatcher() + + let popover + let drawers = [] + let open = false + + $: console.log(anchor) + + // Auto hide the component when another item is selected + $: if (open && $draggable.selected !== navItem.id) { + popover.hide() + } + + // Open automatically if the component is marked as selected + $: if (!open && $draggable.selected === navItem.id && popover) { + popover.show() + open = true + } + + const updateNavItem = async (setting, value) => { + dispatch("change", { + ...navItem, + [setting]: value, + }) + } + + + { + if (!open) { + popover.show() + open = true + } + }} +/> + + { + drawers = [] + $draggable.actions.select(navItem.id) + }} + on:close={() => { + open = false + if ($draggable.selected === navItem.id) { + $draggable.actions.select() + } + }} + {anchor} + align="left-outside" + showPopover={drawers.length === 0} + clickOutsideOverride={drawers.length > 0} + maxHeight={600} + offset={18} +> + + + + + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte deleted file mode 100644 index c664f50f10..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - Configure the links in your navigation bar. - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte new file mode 100644 index 0000000000..0773d91c15 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte @@ -0,0 +1,51 @@ + + +
+
+ +
{item.text}
+
+
+ { + e.stopPropagation() + removeNavItem(item.id) + }} + /> +
+
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte new file mode 100644 index 0000000000..3a15007890 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItemConfiguration.svelte @@ -0,0 +1,113 @@ + + + + +
+ {#if navItems.length} + 1} + /> + {/if} + +
+
Add nav item
+
+
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte index a98de86e27..27a47ea3e8 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte @@ -1,5 +1,5 @@ -
(open = true)} + on:click={() => (open = !open)} > - {#if open} -
{ - open = false - }} - > -
    - {#if options && Array.isArray(options)} - {#each options as option} -
  • onPick(getOptionValue(option))} - > - {getOptionLabel(option)} - -
    • - {/each} - {/if} -
-
- {/if}
+ + (open = false)} + useAnchorWidth +> +
(open = false)}> +
    + {#if options && Array.isArray(options)} + {#each options as option} +
  • onPick(getOptionValue(option))} + > + {getOptionLabel(option)} + +
    • + {/each} + {/if} +
+
+ + diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 8b7a641563..f6bffbbf10 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -45,7 +45,6 @@ const dispatch = createEventDispatcher() let button - let popover let component $: sortedOptions = getSortedOptions(options, getOptionLabel, sort) @@ -146,11 +145,11 @@ + (open = false)} useAnchorWidth={!autoWidth} @@ -266,16 +265,6 @@ width: 100%; box-shadow: none; } - - .subtitle-text { - font-size: 12px; - line-height: 15px; - font-weight: 500; - color: var(--spectrum-global-color-gray-600); - display: block; - margin-top: var(--spacing-s); - } - .spectrum-Picker-label.auto-width { margin-right: var(--spacing-xs); } @@ -356,11 +345,9 @@ .option-extra.icon.field-icon { display: flex; } - .option-tag { margin: 0 var(--spacing-m) 0 var(--spacing-m); } - .option-tag :global(.spectrum-Tags-item > .spectrum-Icon) { margin-top: 2px; } @@ -374,4 +361,13 @@ .loading--withAutocomplete { top: calc(34px + var(--spacing-m)); } + + .subtitle-text { + font-size: 12px; + line-height: 15px; + font-weight: 500; + color: var(--spectrum-global-color-gray-600); + display: block; + margin-top: var(--spacing-s); + } diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte index 28ee5dafaa..7899ac6c16 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte @@ -1,18 +1,32 @@ - { - if (!open) { - popover.show() - open = true - } - }} -/> + - - - +
+ + + {#if navItem.type === "sublinks"} + + {:else} + + {/if} + +
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte deleted file mode 100644 index 3779568d93..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte +++ /dev/null @@ -1,131 +0,0 @@ - - - - -
- - {#if links?.length} -
- {#each links as link (link.id)} -
-
(dragDisabled = false)} - > - -
- - - - removeLink(link.id)} - /> -
- {/each} -
- {/if} -
- -
- -
- - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte index 0773d91c15..3cea3f7367 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/NavItem.svelte @@ -1,16 +1,20 @@
- -
{item.text}
+ +
{text}
{ diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte new file mode 100644 index 0000000000..12cefb45bf --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte @@ -0,0 +1,148 @@ + + + + + +
+ + {#if links?.length} +
+ {#each links as link (link.id)} +
+
(dragDisabled = false)} + > + +
+ + + + removeLink(link.id)} + /> +
+ {/each} +
+ {/if} +
+ +
+ +
+ + + +
+ No sub links +
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte index 27a47ea3e8..a0e0f1d93a 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte @@ -75,7 +75,7 @@ {#if $selectedScreen?.showNavigation} - +
Date: Thu, 28 Mar 2024 13:16:57 +0000 Subject: [PATCH 06/19] Add sub link drawer --- .../bindings/DrawerBindableCombobox.svelte | 7 +- .../Navigation/EditNavItemPopover.svelte | 18 +++- .../Navigation/SubLinksDrawer.svelte | 101 ++++++++---------- 3 files changed, 67 insertions(+), 59 deletions(-) diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte index 7a1a480bc0..a4a1a2b356 100644 --- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte +++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte @@ -78,7 +78,12 @@ {/if}
- + screen.routing?.route) @@ -52,7 +52,7 @@ { - drawers = [] + open = true $draggable.actions.select(navItem.id) }} on:close={() => { @@ -63,8 +63,8 @@ }} {anchor} align="left-outside" - showPopover={drawers.length === 0} - clickOutsideOverride={drawers.length > 0} + showPopover={drawerCount === 0} + clickOutsideOverride={drawerCount > 0} maxHeight={600} offset={18} > @@ -87,6 +87,8 @@ props={{ updateOnChange: false, }} + on:drawerShow={() => drawerCount++} + on:drawerHide={() => drawerCount--} /> {#if navItem.type === "sublinks"} drawerCount++} + on:drawerHide={() => drawerCount--} /> {:else} drawerCount++} + on:drawerHide={() => drawerCount--} /> {/if} { - if (!link.id) { - link.id = generate() + $: count = value?.length ?? 0 + $: buttonText = `${count || "No"} sub link${count === 1 ? "" : "s"}` + $: drawerTitle = navItem.text ? `${navItem.text} sub links` : "Sub links" + $: subLinks.forEach(subLink => { + if (!subLink.id) { + subLink.id = generate() } }) $: urlOptions = $screenStore.screens .map(screen => screen.routing?.route) .filter(x => x != null) + .sort() - const addLink = () => { - links = [...links, {}] + const addSubLink = () => { + subLinks = [...subLinks, {}] } - const removeLink = id => { - links = links.filter(link => link.id !== id) + const removeSubLink = id => { + subLinks = subLinks.filter(link => link.id !== id) } - const updateLinks = e => { - links = e.detail.items + const saveSubLinks = () => { + onChange(subLinks) + drawer.hide() } - const handleFinalize = e => { - updateLinks(e) - dragDisabled = true + const updateSubLinks = e => { + subLinks = e.detail.items } - - - + + +
- {#if links?.length} + {#if subLinks?.length}
- {#each links as link (link.id)} -
-
(dragDisabled = false)} - > - -
- - + + + (subLink.url = e.detail)} + placeholder="Link" options={urlOptions} - /> - removeLink(link.id)} + on:click={() => removeSubLink(subLink.id)} />
{/each}
{/if}
- + + Add link +
@@ -106,7 +103,7 @@
- No sub links + {buttonText}
From 917a38746802e2a9dbf933f7c9b2266d1425ac0c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 28 Mar 2024 13:33:16 +0000 Subject: [PATCH 07/19] Add transitions to popover showing and hiding due to drawer prescence --- packages/bbui/src/Popover/Popover.svelte | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index 1391348f43..c51af48300 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -99,10 +99,10 @@ on:keydown={handleEscape} class="spectrum-Popover is-open" class:customZindex - class:hide-popover={open && !showPopover} + class:hidden={!showPopover} role="presentation" style="height: {customHeight}; --customZindex: {customZindex};" - transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }} + transition:fly|local={{ y: -20, duration: animate ? 260 : 0 }} on:mouseenter on:mouseleave > @@ -112,16 +112,17 @@ {/if} From 5779a519afbf7ec039a66c15e4b066d2fde3209d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 28 Mar 2024 18:00:45 +0000 Subject: [PATCH 09/19] Fix issue when no sublinks --- packages/client/src/components/app/NavItem.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/app/NavItem.svelte b/packages/client/src/components/app/NavItem.svelte index a69d6d6173..251c261472 100644 --- a/packages/client/src/components/app/NavItem.svelte +++ b/packages/client/src/components/app/NavItem.svelte @@ -64,7 +64,7 @@
- {#each subLinks as subLink} + {#each subLinks || [] as subLink} {#if subLink.internalLink} Date: Thu, 28 Mar 2024 18:20:19 +0000 Subject: [PATCH 10/19] Hide dropdown menu when clicking link --- .../client/src/components/app/NavItem.svelte | 55 ++++++++++--------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/packages/client/src/components/app/NavItem.svelte b/packages/client/src/components/app/NavItem.svelte index 251c261472..348ff35eb9 100644 --- a/packages/client/src/components/app/NavItem.svelte +++ b/packages/client/src/components/app/NavItem.svelte @@ -15,11 +15,14 @@ const sdk = getContext("sdk") const { linkable } = sdk + let renderKey + $: expanded = !!$navStateStore[text] $: icon = !leftNav || expanded ? "ChevronDown" : "ChevronRight" const onClickLink = () => { dispatch("clickLink") + renderKey = Math.random() } const onClickDropdown = () => { @@ -57,32 +60,34 @@ {:else} -
-
- {text} - -
-
-
- {#each subLinks || [] as subLink} - {#if subLink.internalLink} - - {subLink.text} - - {:else} - - {subLink.text} - - {/if} - {/each} + {#key renderKey} +
+
+ {text} + +
+
+
+ {#each subLinks || [] as subLink} + {#if subLink.internalLink} + + {subLink.text} + + {:else} + + {subLink.text} + + {/if} + {/each} +
-
+ {/key} {/if}