MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Hide dropdown menu when clicking link

This commit is contained in:
Andrew Kingston 2024-03-28 18:20:19 +00:00
parent 5779a519af
commit 75d4be94b5
1 changed files with 30 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/client/src/components/app/NavItem.svelte
View File

@ -15,11 +15,14 @@
const sdk = getContext("sdk") const sdk = getContext("sdk")
const { linkable } = sdk const { linkable } = sdk
let renderKey
$: expanded = !!$navStateStore[text] $: expanded = !!$navStateStore[text]
$: icon = !leftNav || expanded ? "ChevronDown" : "ChevronRight" $: icon = !leftNav || expanded ? "ChevronDown" : "ChevronRight"
const onClickLink = () => { const onClickLink = () => {
dispatch("clickLink") dispatch("clickLink")
renderKey = Math.random()
} }
const onClickDropdown = () => { const onClickDropdown = () => {
@ -57,32 +60,34 @@
{:else} {:else}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="dropdown" class:left={leftNav} class:expanded> {#key renderKey}
<div class="text" on:click={onClickDropdown}> <div class="dropdown" class:left={leftNav} class:expanded>
{text} <div class="text" on:click={onClickDropdown}>
<Icon name={icon} /> {text}
</div> <Icon name={icon} />
<div class="sublinks-wrapper"> </div>
<div class="sublinks"> <div class="sublinks-wrapper">
{#each subLinks || [] as subLink} <div class="sublinks">
{#if subLink.internalLink} {#each subLinks || [] as subLink}
<a {#if subLink.internalLink}
href={subLink.url} <a
on:click={onClickLink} href={subLink.url}
use:active={subLink.url} on:click={onClickLink}
use:linkable use:active={subLink.url}
> use:linkable
{subLink.text} >
</a> {subLink.text}
{:else} </a>
<a href={subLink.url} on:click={onClickLink}> {:else}
{subLink.text} <a href={subLink.url} on:click={onClickLink}>
</a> {subLink.text}
{/if} </a>
{/each} {/if}
{/each}
</div>
</div> </div>
</div> </div>
</div> {/key}
{/if} {/if}
<style> <style>
@ -94,6 +99,7 @@
font-size: var(--spectrum-global-dimension-font-size-200); font-size: var(--spectrum-global-dimension-font-size-200);
transition: opacity 130ms ease-out; transition: opacity 130ms ease-out;
font-weight: 600; font-weight: 600;
user-select: none;
} }
a.active { a.active {
opacity: 1; opacity: 1;
@ -115,7 +121,6 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: var(--spacing-xs);
user-select: none;
} }
.sublinks-wrapper { .sublinks-wrapper {
position: absolute; position: absolute;