Add support for mobile devices

src/views/ConversationView.vue

@@ -7,6 +7,7 @@
   </template>
 </Sidebar>
 <Content autoScroll>
+
   <template v-slot:title>{{ channel.name }}</template>
   <template v-slot:header>
     <Key :channel="channel" />
@@ -20,16 +21,16 @@
 </Content>
 </template>
 <template v-else>
-  <Sidebar />
-  <Content>
-    <template v-slot:title>Missing channel</template>
-    <template v-slot:content>
-      <div class="d-flex flex-column text-center">
-        <i class="error text-warning bi bi-cone-striped"></i>
-        <h2>That channel does not exist!</h2>
-      </div>
-    </template>
-  </Content>  
+<Sidebar />
+<Content>
+  <template v-slot:title>Missing channel</template>
+  <template v-slot:content>
+    <div class="d-flex flex-column text-center">
+      <i class="error text-warning bi bi-cone-striped"></i>
+      <h2>That channel does not exist!</h2>
+    </div>
+  </template>
+</Content>  
 </template>
 </template>
 
@@ -40,9 +41,9 @@ import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 import { useChannelStore } from '../stores/channelStore'
 import { useMessageStore } from '../stores/messageStore'
 import Sidebar from '../components/sidebar/Sidebar.vue'
-import Content from '../components/Content.vue'
+import Content from '../components/content/Content.vue'
 import Key from '../components/common/Key.vue'
-import UserList from '../components/userList/UserList.vue'
+import UserList from '../components/sidebar/UserList.vue'
 import Message from '../components/conversation/Message.vue'
 import MessageInput from '../components/conversation/MessageInput.vue'
 
@@ -53,14 +54,13 @@ const messageStore = useMessageStore()
 const channel = computed(() => { return channelStore.getChannelById(route.params.channelId) })
 const messages = computed(() => { return messageStore.getMessagesByChannelId(route.params.channelId) })
 
-// Show the key.
-const locked = ref(false)
-onBeforeRouteUpdate(async (to, from) => { locked.value = false })
-const abcdef = ref(null)
+// Show the key in the header.
+const keyHidden = ref(false)
+onBeforeRouteUpdate(async (to, from) => { keyHidden.value = false })
 </script>
 
 <style scoped>
 i.error {
   font-size: 10rem;
 }
-</style>
+</style>