CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-01 19:31:49 +12:00
Code Issues Projects Releases Wiki Activity

Account for mobile support with top navs

Browse source
This commit is contained in:
Andrew Kingston 2024-04-09 12:04:12 +01:00
parent 9ac344f292
commit ffdb8ee1b6
2 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/client/src/components/app/Layout.svelte
View file

@ -286,6 +286,7 @@
internalLink={navItem.internalLink} internalLink={navItem.internalLink}
on:clickLink={() => (mobileOpen = false)} on:clickLink={() => (mobileOpen = false)}
leftNav={navigation === "Left"} leftNav={navigation === "Left"}
{mobile}
{navStateStore} {navStateStore}
/> />
{/each} {/each}

8
packages/client/src/components/app/NavItem.svelte
View file

@ -9,6 +9,7 @@
export let subLinks export let subLinks
export let internalLink export let internalLink
export let leftNav = false export let leftNav = false
export let mobile = false
export let navStateStore export let navStateStore
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -18,7 +19,8 @@
let renderKey let renderKey
$: expanded = !!$navStateStore[text] $: expanded = !!$navStateStore[text]
$: icon = !leftNav || expanded ? "ChevronDown" : "ChevronRight" $: renderLeftNav = leftNav || mobile
$: icon = !renderLeftNav || expanded ? "ChevronDown" : "ChevronRight"
const onClickLink = () => { const onClickLink = () => {
dispatch("clickLink") dispatch("clickLink")
@ -26,7 +28,7 @@
} }
const onClickDropdown = () => { const onClickDropdown = () => {
if (!leftNav) { if (!renderLeftNav) {
return return
} }
navStateStore.update(state => ({ navStateStore.update(state => ({
@ -61,7 +63,7 @@
<!-- 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 -->
{#key renderKey} {#key renderKey}
<div class="dropdown" class:left={leftNav} class:expanded> <div class="dropdown" class:left={renderLeftNav} class:expanded>
<div class="text" on:click={onClickDropdown}> <div class="text" on:click={onClickDropdown}>
{text} {text}
<Icon name={icon} /> <Icon name={icon} />