Workaround for safari sidebar
parent
04955815d3
commit
cb63bdd767
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher, onMount } from 'svelte';
|
||||||
import { slide } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
|
|
||||||
export let image;
|
export let image;
|
||||||
export let label;
|
export let label;
|
||||||
|
@ -10,17 +10,27 @@
|
||||||
export let items = [];
|
export let items = [];
|
||||||
|
|
||||||
let expandMenu = false;
|
let expandMenu = false;
|
||||||
|
let isSafari = false;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
function expand() {
|
function expand() {
|
||||||
if (!mobile) return;
|
if (!mobile && !isSafari) return;
|
||||||
expandMenu = !expandMenu;
|
expandMenu = !expandMenu;
|
||||||
}
|
}
|
||||||
|
|
||||||
function clicked() {
|
function clicked() {
|
||||||
dispatch('clicked');
|
dispatch('clicked');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
isSafari =
|
||||||
|
navigator.vendor &&
|
||||||
|
navigator.vendor.indexOf('Apple') > -1 &&
|
||||||
|
navigator.userAgent &&
|
||||||
|
navigator.userAgent.indexOf('CriOS') == -1 &&
|
||||||
|
navigator.userAgent.indexOf('FxiOS') == -1;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="w-full rounded-xl ease-in duration-150 {mobile ? '' : 'parent'} {active ? 'active' : ''}">
|
<div class="w-full rounded-xl ease-in duration-150 {mobile ? '' : 'parent'} {active ? 'active' : ''}">
|
||||||
|
@ -58,8 +68,8 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if mobile && expandMenu}
|
{#if expandMenu}
|
||||||
<div class="py-2 flex flex-col w-full" transition:slide={{ duration: 100 }}>
|
<div class="py-2 flex flex-col w-full" transition:fly={{ y: -100, duration: 100 }}>
|
||||||
{#each items as item}
|
{#each items as item}
|
||||||
<a
|
<a
|
||||||
on:click={clicked}
|
on:click={clicked}
|
||||||
|
|
Loading…
Reference in New Issue