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 new navigation sidebar and instance description block on /

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-04-25 13:04:45 -10:00
parent b105c40807
commit 9467cef34b
No known key found for this signature in database
11 changed files with 251 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/buttons/base.vue
View file

@ -1,6 +1,6 @@
<template>
<button v-bind="$props" type="button"
class="rounded-md duration-200 hover:shadow disabled:opacity-70 disabled:cursor-wait px-3 py-2 text-sm font-semibold text-white shadow-sm">
class="rounded-md duration-200 hover:shadow disabled:opacity-70 disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm">
<slot />
</button>
</template>

48
components/sidebars/navigation.vue Normal file
View file

@ -0,0 +1,48 @@
<template>
<aside
class="fixed h-dvh z-20 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group">
<NuxtLink class="rounded w-11 h-11 ring-1 ring-white/10 hover:scale-105 duration-200" href="/">
<img src="https://lysand.org/logo.png" alt="Lysand logo" />
</NuxtLink>
<div class="flex flex-col gap-3">
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Timelines</h3>
<NuxtLink v-for="timeline in timelines" :key="timeline.href" :to="timeline.href">
<ButtonsBase
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<Icon :name="timeline.icon" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
</ButtonsBase>
</NuxtLink>
</div>
<!-- Login buttons -->
<div class="flex flex-col gap-3 mt-auto">
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Account</h3>
<NuxtLink>
<ButtonsBase disabled
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<Icon name="tabler:login" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Sign In</span>
</ButtonsBase>
</NuxtLink>
</div>
</aside>
</template>
<script lang="ts" setup>
const timelines = ref([
{
href: "/public",
name: "Public",
icon: "tabler:world",
},
{
href: "/local",
name: "Local",
icon: "tabler:home",
},
]);
</script>