various improvements
This commit is contained in:
261
components/Nav.vue
Normal file → Executable file
261
components/Nav.vue
Normal file → Executable file
@@ -1,130 +1,177 @@
|
||||
<!-- eslint-disable vue/no-multiple-template-root -->
|
||||
<template>
|
||||
<nav
|
||||
class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative">
|
||||
<div>
|
||||
<nuxt-link to="/channel/@me">
|
||||
<button
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300">
|
||||
<span>
|
||||
<svg width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient id="fire"
|
||||
x1="-2.778%"
|
||||
x2="100%"
|
||||
y1="24%"
|
||||
y2="48%">
|
||||
<stop offset="0%"
|
||||
stop-color="#ff0c41" />
|
||||
<stop offset="100%"
|
||||
stop-color="#ff6b0c" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="none"
|
||||
stroke="url(#fire)"
|
||||
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>
|
||||
</span>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5" />
|
||||
</div>
|
||||
<nuxt-link v-for="server in servers"
|
||||
:to="'/channel/' + server.channels[0]?.id">
|
||||
<button :key="server.id"
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] 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>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="createServerModelOpen = true"
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div v-if="createServerModelOpen"
|
||||
class="absolute z-10 top-0 bottom-0 left-0 right-0">
|
||||
<div
|
||||
class="p-4 z-20 absolute bg-[var(--primary-500)] 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-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]"
|
||||
placeholder="Server name" />
|
||||
<input type="submit"
|
||||
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-black/70 w-screen h-screen"
|
||||
@click="createServerModelOpen = false">
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative"
|
||||
>
|
||||
<div>
|
||||
<nuxt-link to="/channel/@me">
|
||||
<button
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300"
|
||||
:class="(serverType === 'dms') ? '!rounded-[1.375rem]' : ''"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="fire"
|
||||
x1="-2.778%"
|
||||
x2="100%"
|
||||
y1="24%"
|
||||
y2="48%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#ff0c41"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#ff6b0c"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="url(#fire)"
|
||||
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>
|
||||
</span>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5">
|
||||
</div>
|
||||
<nuxt-link
|
||||
v-for="server in servers"
|
||||
:key="server.id"
|
||||
:to="'/channel/' + server.channels[0]?.id"
|
||||
>
|
||||
<button
|
||||
:key="server.id"
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 h-[56px] w-[56px]"
|
||||
:class="(activeServer.id === server.id) ? '!rounded-[1.375rem]' : ''"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer"
|
||||
@click="createServerModelOpen = true"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div
|
||||
v-if="createServerModelOpen"
|
||||
class="absolute z-10 top-0 bottom-0 left-0 right-0"
|
||||
>
|
||||
<div
|
||||
class="p-4 z-20 absolute bg-[var(--primary-500)] 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
|
||||
class="w-3/5"
|
||||
@submit.prevent="createServer"
|
||||
>
|
||||
<input
|
||||
v-model="serverName"
|
||||
type="text"
|
||||
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]"
|
||||
placeholder="Server name"
|
||||
>
|
||||
<input
|
||||
type="submit"
|
||||
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-black/70 w-screen h-screen"
|
||||
@click="createServerModelOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { IServer } from '~/types';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
servers: storeToRefs(useGlobalStore()).servers,
|
||||
serverType: storeToRefs(useGlobalStore()).activeServerType,
|
||||
activeServer: storeToRefs(useGlobalStore()).activeServer,
|
||||
createServerModelOpen: false,
|
||||
serverName: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async createServer() {
|
||||
const globalStore = useGlobalStore();
|
||||
const headers = useRequestHeaders(['cookie']) as Record<string, string>;
|
||||
const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers })
|
||||
const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers });
|
||||
this.createServerModelOpen = false;
|
||||
this.serverName = '';
|
||||
globalStore.addServer(server)
|
||||
globalStore.addServer(server);
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user