Refactor sidebar

src/views/HomeView.vue

@@ -0,0 +1,35 @@
+<template>
+<Sidebar>
+</Sidebar>
+<Content>
+  <template v-slot:title>Welcome to Mercury!</template>
+  <template v-slot:content>
+    <div class="d-flex flex-column text-center align-items-center px-5 overflow-hidden">
+      <img class="animate__animated animate__rotateIn py-5 w-25" id="logo" src="../assets/logo-light.png" />
+      <h1 class="animate__animated animate__fadeInDown animate__delay-1s">
+        Mercury is a web-based BENNC client.
+      </h1>
+      <h2 class="animate__animated animate__fadeInDown animate__delay-2s">
+        Go to <router-link :to="{ name: 'Settings' }" class="text-muted"><i class="bi bi-gear-fill"></i> Settings</router-link> to configure your client.
+      </h2>
+    </div>
+  </template>
+</Content>
+</template>
+
+<script setup>
+import Sidebar from '../components/Sidebar.vue'
+import Content from '../components/Content.vue'
+</script>
+
+<style scoped>
+#logo {
+  filter: invert(80%);
+}
+h1 {
+  --animate-delay: 0.5s;
+}
+h2 {
+  --animate-delay: 0.5s;
+}
+</style>