use <Teleport> for setting footer content

This commit is contained in:
joshuaboud 2022-06-15 17:15:21 -03:00
parent 318a9f9220
commit 39033b17fe
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E

View File

@ -1,10 +1,12 @@
<template>
<div class="text-default bg-default h-full flex flex-col items-stretch">
<router-view v-if="providesValid" @updateFooterText="text => routerViewFooterText = text" />
<div class="flex flex-row items-center px-4 py-2">
<div class="text-sm" v-html="routerViewFooterText"></div>
<div class="grow" />
<div id="footer-buttons" class="flex flex-row-reverse gap-buttons">
<router-view v-if="providesValid" />
<div class="flex flex-row items-center px-4 py-2 gap-2">
<div id="footer-text" class="flex flex-row flex-wrap gap-x-4 gap-y-0 text-xs grow basis-0"></div>
<div class="grow-0">
45Drives
</div>
<div id="footer-buttons" class="flex flex-row-reverse gap-buttons grow basis-0">
<SettingsMenu />
</div>
</div>
@ -60,6 +62,4 @@ const clipboard = reactive({
provide(clipboardInjectionKey, clipboard);
providesValid.value = true;
const routerViewFooterText = ref("");
</script>