Dev portal sidebar

This commit is contained in:
LittleSheep 2024-09-22 20:15:32 +08:00
parent 8763923f33
commit 99522e1001
7 changed files with 75 additions and 50 deletions

View File

@ -0,0 +1,29 @@
<template>
<div class="text-xs text-grey sidebar-footer transition-opacity duration-500">
<div class="flex footer-links flex-wrap">
<nuxt-link to="/terms/privacy-policy" class="hover:underline">Privacy Policy</nuxt-link>
<nuxt-link to="/terms/user-agreement" class="hover:underline">Term of Service</nuxt-link>
</div>
</div>
</template>
<style scoped>
.sidebar-footer {
opacity: 0.3;
}
.sidebar-footer:hover {
opacity: 1;
}
.footer-links *:not(:last-child):after {
content: "·";
font-family: monospace;
font-weight: bold;
text-align: center;
margin-left: 4px;
margin-right: 4px;
text-decoration: none !important;
display: inline-block;
}
</style>

View File

@ -2,7 +2,9 @@
<v-card :to="url" class="mx-[2.5ch] mb-3">
<v-card-text>
<div class="mb-3 flex flex-row gap-4">
<v-avatar :image="post.author?.avatar" />
<nuxt-link :to="`/users/${post.author?.name}`">
<v-avatar :image="post.author?.avatar" />
</nuxt-link>
<div class="flex flex-col">
<span>{{ post.author?.nick }} <span class="text-xs">@{{ post.author?.name }}</span></span>
<span v-if="post.body?.title" class="text-md">{{ post.body?.title }}</span>

View File

@ -51,16 +51,18 @@
<v-list-item :title="t('navGallery')" prepend-icon="mdi-album" to="/gallery" exact />
</v-list>
<v-divider class="border-opacity-50 mb-4" />
<v-divider class="border-opacity-50 my-1" />
<v-list density="compact" nav color="primary">
<v-list-item title="Developer Portal" prepend-icon="mdi-code-tags" to="/dev" exact />
<v-list-item title="Creator Hub" prepend-icon="mdi-pencil" to="#" exact />
</v-list>
<v-divider class="border-opacity-50 mb-4 mt-0.5" />
<copyright no-centered service="capital" class="px-5" />
<div class="px-5 mt-3 text-xs text-grey sidebar-footer transition-opacity duration-500">
<div class="flex footer-links flex-wrap">
<nuxt-link to="/terms/privacy-policy" class="hover:underline">Privacy Policy</nuxt-link>
<nuxt-link to="/terms/user-agreement" class="hover:underline">Term of Service</nuxt-link>
</div>
</div>
<footer-links class="px-5 mt-3" />
</v-navigation-drawer>
<v-main>
@ -75,24 +77,3 @@ const { locale, locales, setLocale, t } = useI18n()
const openDrawer = ref(false)
</script>
<style scoped>
.sidebar-footer {
opacity: 0.3;
}
.sidebar-footer:hover {
opacity: 1;
}
.footer-links *:not(:last-child):after {
content: "·";
font-family: monospace;
font-weight: bold;
text-align: center;
margin-left: 4px;
margin-right: 4px;
text-decoration: none !important;
display: inline-block;
}
</style>

View File

@ -1,16 +1,19 @@
<template>
<v-app-bar flat color="primary" scroll-behavior="hide" scroll-threshold="800">
<v-container fluid class="mx-auto d-flex align-center justify-center px-8">
<nuxt-link to="/dev" exact class="flex items-center me-4">
<v-img class="me-3 ms-1" width="32" height="32" alt="Logo" :src="Logo" />
<v-tooltip>
<template #activator="{ props }">
<div @click="openDrawer = !openDrawer" v-bind="props" class="cursor-pointer">
<v-img class="me-4 ms-1" width="32" height="32" alt="Logo" :src="Logo" />
</div>
</template>
Open / close drawer
</v-tooltip>
<span>Developer Portal</span>
<nuxt-link to="/dev" exact>
<h2 class="mt-1">Developer Portal</h2>
</nuxt-link>
<div class="nav-links overflow-y-auto flex">
<v-btn variant="text" text="Bots" to="/dev/bots" exact />
</div>
<v-spacer></v-spacer>
<v-menu>
@ -40,6 +43,24 @@
</v-container>
</v-app-bar>
<v-navigation-drawer v-model="openDrawer" location="left" width="300" floating>
<v-list density="compact" nav color="primary">
<v-list-item title="Back" prepend-icon="mdi-arrow-left" to="/" exact />
</v-list>
<v-divider class="border-opacity-50 my-1" />
<v-list density="compact" nav color="primary">
<v-list-item title="Bots" prepend-icon="mdi-robot" to="/dev/bots" exact />
</v-list>
<v-divider class="border-opacity-50 mb-4 mt-1" />
<copyright no-centered service="capital" class="px-5" />
<footer-links class="px-5 mt-3" />
</v-navigation-drawer>
<v-main>
<slot />
</v-main>
@ -49,19 +70,9 @@
import Logo from "../assets/logo-w-shadow.png"
const { locale, locales, setLocale, t } = useI18n()
const openDrawer = ref(false)
useHead({
titleTemplate: "%s | Solsynth Dev Portal"
})
</script>
<style scoped>
.nav-links::-webkit-scrollbar {
display: none;
}
.nav-links {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<v-container>
<v-container class="px-12">
<div class="flex justify-between items-center mt-5">
<div class="flex items-end gap-2">
<h1 class="text-2xl">Bots</h1>

View File

@ -1,5 +1,5 @@
<template>
<v-container>
<v-container class="px-12">
<div class="flex justify-between items-center mt-5">
<div class="flex items-end gap-2">
<h1 class="text-2xl">Create a new bot</h1>

View File

@ -1,7 +1,9 @@
<template>
<v-container class="content-container mx-auto">
<div class="my-3 flex flex-row gap-4">
<v-avatar :image="post.author?.avatar" />
<nuxt-link :to="`/users/${post.author?.name}`">
<v-avatar :image="post.author?.avatar" />
</nuxt-link>
<div class="flex flex-col">
<span>{{ post.author?.nick }} <span class="text-xs">@{{ post.author?.name }}</span></span>
<span v-if="post.body?.title" class="text-md">{{ post.body?.title }}</span>