zoeissleeping/discord-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more actions, new colors (very bad going to change)

Browse Source
This commit is contained in:
Zoe
2023-01-19 00:59:43 -06:00
parent 3cdf7758eb
commit bf5245bec4
17 changed files with 558 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/Nav.vue
View File

@@ -1,10 +1,10 @@
<template>
<nav
class="p-4 bg-[hsl(216,calc(1*7.2%),13.5%)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative">
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">
<div
class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300">
<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"
@@ -29,14 +29,17 @@
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>
</div>
</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">
<div :key="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]">
<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">
@@ -55,12 +58,12 @@
<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>
</button>
</nuxt-link>
</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">
<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">
@@ -71,14 +74,14 @@
stroke-width="2"
d="M12 5v14m-7-7h14" />
</svg>
</div>
</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-zinc-800 shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
class="p-4 z-20 absolute bg-[var(--primary-600)] 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>