stream day 3

components/Nav.vue

@@ -1,8 +1,8 @@
 <template>
-	<nav class="p-4 bg-zinc-800 grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen text-white relative">
+	<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">
 		<div>
 			<div
-			@click="openServer('@me')"
+			@click="openServer('@me', 'dms')"
 				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"
@@ -16,10 +16,10 @@
 				</svg>
 			</div>
 		</div>
-		<div class="overflow-y-scroll my-2 flex gap-2">
+		<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
 			<div v-for="server in servers"
 				:key="server.id"
-				@click="openServer(server.id)"
+				@click="openServer(server.id, 'servers')"
 				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"
@@ -89,7 +89,6 @@ import { useServerStore } from '~/stores/servers'
 export default {
 	data() {
 		return {
-			servers: useServerStore().servers,
 			createServerModelOpen: false,
 			serverName: ''
 		}
@@ -102,15 +101,12 @@ export default {
 			this.serverName = '';
 			serverStore.addServer(server)
 		},
-		openServer(id: string): void {
+		openServer(id: string, type: string): void {
 			const router = useRouter();
-			useServerStore().servers.find((e: unknown, i: number) => {
-				if (e.id === id) {
-					useServerStore().activeServer = i
-				}
-			})
+			useServerStore().setActive(type, id)
 			router.push({ path: `/channel/${id}` });
 		}
-	}
+	},
+	props: ['servers']
 }
 </script>

components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex bg-zinc-700 w-60 h-screen shadow-sm text-white select-none">
+	<div class="flex bg-[hsl(223,calc(1*6.9%),19.8%)] min-w-60 w-60 h-screen shadow-sm text-white select-none">
 		<div class="w-full"
 			v-if="server">
 			<div class="flex p-4 border-b border-zinc-600/80">
@@ -22,20 +22,6 @@
 							d="M5 9h14M5 15h14M11 4L7 20M17 4l-4 16" />
 					</svg> {{ channel.name }}
 				</div>
-				<div class="flex text-center hover:bg-zinc-600/70 px-2 py-1.5 w-full transition-colors rounded drop-shadow-sm"
-					v-for="channel in server.channels"
-					:key="channel.id">
-					<svg width="24"
-						height="24"
-						viewBox="0 0 24 24">
-						<path fill="none"
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M5 9h14M5 15h14M11 4L7 20M17 4l-4 16" />
-					</svg> {{ channel.name }}
-				</div>
 			</div>
 		</div>
 
@@ -43,22 +29,12 @@
 </template>
 
 <script lang="ts">
-import { useUserStore } from '~/stores/user'
 import { useServerStore } from '~/stores/servers'
 
 export default {
-	data() {
-		return {
-			user: useUserStore().user,
-			server: useServerStore().servers[useServerStore().activeServer]
-		}
-	},
 	mounted() {
-		const route = useRoute()
-
-		if (route.path.includes('@me')) {
-			this.server = useServerStore().dms[useServerStore().activeServer]
-		}
-	}
+		console.log(useServerStore().currentServer, useServerStore().servers)
+	},
+	props: ['server', 'user']
 }
 </script>