chatInfo styling

src/components/chatInformation.vue

@@ -0,0 +1,48 @@
+<template>
+  <div id="chatInformation" class="chatInformation">
+    <h1>open chat</h1>
+    <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
+  </div>
+</template>
+<script>
+import icon from './icon.vue';
+
+export default {
+  name: "chatInformation",
+  components:{
+    icon
+  }
+}
+</script>
+<style scoped>
+.chatInformation{
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: 5rem;
+  width: calc(100% - 8rem);
+  max-width: 30rem;
+  height: calc(100% - 10rem);
+  background-color: #1d1d1d;
+  box-shadow: 6px 6px 20px #111;
+  border-radius: 1rem;
+  text-align: center;
+}
+.closeBtn{
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: #0000;
+  box-shadow: none;
+}
+
+@media (max-width: 30rem) {
+  .chatInformation{
+    transform: unset;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/chatInformations.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="chatInformations">
-
-  </div>
-</template>
-<script >
-  export default {
-    name: "chatInformations"
-  }
-</script>
-<style scoped>
-.chatInformations{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #f00;
-}
-</style>

src/components/topBanner.vue

@@ -7,7 +7,7 @@
         <div id="chatName">{{roomInfo.name}}</div>
         <div id="users">{{roomInfo.user.length}} members</div>
       </div>
-      <icon class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
+      <icon v-on:click.native="showChatInfo()" class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
     </div>
   </div>
 </template>
@@ -19,6 +19,11 @@ export default {
   components:{
     icon
   },
+  methods:{
+    showChatInfo(){
+      document.getElementById("chatInformation").style.display = 'block';
+    }
+  },
   data(){
     return {
       roomInfo: {

src/views/chat.vue

@@ -27,6 +27,7 @@
     </div>
     <newMessage />
     <topBanner />
+    <chatInformation />
   </div>
 </template>
 
@@ -35,6 +36,7 @@ import message from '@/components/message.vue';
 import messageReceive from '@/components/messageReceive.vue';
 import newMessage from '@/components/newMessage.vue';
 import topBanner from "@/components/topBanner";
+import chatInformation from "@/components/chatInformation";
 
 export default {
   name: 'chat',
@@ -42,7 +44,8 @@ export default {
     message,
     messageReceive,
     newMessage,
-    topBanner
+    topBanner,
+    chatInformation
   }
 }
 </script>