versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Add bottom sidebar on mobile

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-04-30 22:40:33 -10:00
parent 951a806477
commit d9173b4ce2
No known key found for this signature in database
11 changed files with 187 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

58
layouts/app.vue
View file

@ -2,10 +2,10 @@
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
<SidebarsNavigation />
<div class="relative md:pl-20 min-h-dvh flex flex-row justify-center lg:justify-between">
<aside
class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 hidden lg:flex flex-col gap-10">
<aside v-if="width > 1024"
class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 hidden lg:flex flex-col">
<ClientOnly>
<div class="grow p-10" v-if="!tokenData">
<div class="grow p-10 mb-10" v-if="!tokenData">
<button type="button"
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
<Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" />
@ -16,37 +16,38 @@
sign in</span>
</button>
</div>
<div class="grow" v-else>
<TimelinesTimelineScroller v-else>
<TimelinesNotifications />
</TimelinesTimelineScroller>
<div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
<div class="text-center">
<strong
class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
{{ instance?.lysand_version ?? instance?.version }}</strong> • <a
href="https://github.com/lysand-org/lysand" target="_blank">Source Code</a>• <a
href="https://github.com/lysand-org/lysand/issues" target="_blank">Report an Issue</a>
</div>
<NuxtLink href="https://github.com/lysand-org/lysand" target="_blank">
<ButtonsSecondary class="w-full">
Create your own instance
</ButtonsSecondary>
</NuxtLink>
<NuxtLink href="/about/apps">
<ButtonsSecondary class="w-full">
Mobile Apps
</ButtonsSecondary>
</NuxtLink>
</div>
</ClientOnly>
<div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10">
<div class="text-center">
<strong
class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
{{ instance?.lysand_version ?? instance?.version }}</strong> • <a
href="https://github.com/lysand-org/lysand" target="_blank">Source Code</a>• <a
href="https://github.com/lysand-org/lysand/issues" target="_blank">Report an Issue</a>
</div>
<NuxtLink href="https://github.com/lysand-org/lysand" target="_blank">
<ButtonsSecondary class="w-full">
Create your own instance
</ButtonsSecondary>
</NuxtLink>
<NuxtLink href="/about/apps">
<ButtonsSecondary class="w-full">
Mobile Apps
</ButtonsSecondary>
</NuxtLink>
</div>
</aside>
<div class="w-full max-h-dvh overflow-y-auto">
<div class="w-full max-h-dvh">
<slot />
</div>
<aside class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 lg:block hidden">
<aside v-if="width > 1024"
class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 lg:block hidden">
<slot name="right">
<SocialElementsInstancePresentation />
</slot>
@ -63,6 +64,7 @@ const tokenData = useTokenData();
const client = useMegalodon(tokenData);
const instance = useInstance(client);
const description = useExtendedDescription(client);
const { width } = useWindowSize();
useServerSeoMeta({
title: instance.value?.title,