116 lines
3.8 KiB
Vue
116 lines
3.8 KiB
Vue
<template>
|
|
<nav class="p-4 bg-zinc-800 grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen text-white relative">
|
|
<div>
|
|
<div
|
|
@click="openServer('@me')"
|
|
class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300">
|
|
<svg width="32"
|
|
height="32"
|
|
viewBox="0 0 24 24">
|
|
<path fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 12c2-2.96 0-7-1-8c0 3.038-1.773 4.741-3 6c-1.226 1.26-2 3.24-2 5a6 6 0 1 0 12 0c0-1.532-1.056-3.94-2-5c-1.786 3-2.791 3-4 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-y-scroll my-2 flex gap-2">
|
|
<div v-for="server in servers"
|
|
:key="server.id"
|
|
@click="openServer(server.id)"
|
|
class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300 h-[56px] w-[56px]">
|
|
<svg width="32"
|
|
height="32"
|
|
viewBox="0 0 256 154">
|
|
<defs>
|
|
<linearGradient id="svgIDa"
|
|
x1="-2.778%"
|
|
x2="100%"
|
|
y1="32%"
|
|
y2="67.556%">
|
|
<stop offset="0%"
|
|
stop-color="#2298BD" />
|
|
<stop offset="100%"
|
|
stop-color="#0ED7B5" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path fill="url(#svgIDa)"
|
|
d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div @click="createServerModelOpen = true"
|
|
class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300">
|
|
<svg width="32"
|
|
height="32"
|
|
viewBox="0 0 24 24">
|
|
<path fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 5v14m-7-7h14" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div v-if="createServerModelOpen"
|
|
class="absolute z-10 top-0 bottom-0 left-0 right-0">
|
|
<div class="bg-zinc-900/80 w-screen h-screen"
|
|
@click="createServerModelOpen = false">
|
|
</div>
|
|
<div
|
|
class="p-4 z-20 absolute bg-zinc-800 shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
|
|
<h2 class="font-semibold text-xl">
|
|
Create a server:
|
|
</h2>
|
|
<div>
|
|
<form @submit.prevent="createServer"
|
|
class="w-3/5">
|
|
<input v-model="serverName"
|
|
type="text"
|
|
class="py-2 px-3 rounded-md mb-2 bg-zinc-700 shadow-md border border-zinc-700/80"
|
|
placeholder="Server name" />
|
|
<input type="submit"
|
|
class="py-2 px-3 rounded-md bg-zinc-700 shadow-md border border-zinc-700/80" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { useServerStore } from '~/stores/servers'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
servers: useServerStore().servers,
|
|
createServerModelOpen: false,
|
|
serverName: ''
|
|
}
|
|
},
|
|
methods: {
|
|
async createServer() {
|
|
const serverStore = useServerStore();
|
|
const { server } = await $fetch('/api/channel/create', { method: 'post', body: { serverName: this.serverName } })
|
|
this.createServerModelOpen = false;
|
|
this.serverName = '';
|
|
serverStore.addServer(server)
|
|
},
|
|
openServer(id: string): void {
|
|
const router = useRouter();
|
|
useServerStore().servers.find((e: unknown, i: number) => {
|
|
if (e.id === id) {
|
|
useServerStore().activeServer = i
|
|
}
|
|
})
|
|
router.push({ path: `/channel/${id}` });
|
|
}
|
|
}
|
|
}
|
|
</script> |