add store chat-modul, showChatModul

webapp/layouts/default.vue

@@ -14,11 +14,12 @@
       <modal />
     </client-only>
     <client-only>
-      <div v-if="true" class="chat-modul" ><chat-modul :singleRoom="true"/></div>
+      <div v-if="$store.getters['chat-modul/showChatModul'].showChatModul" class="chat-modul" >
+        <div  class="close" @click="$store.commit('chat-modul/SET_OPEN_CHAT_MODUL', false)">x close chat</div>
+        <chat-modul :singleRoom="true"/></div>
     </client-only>
   </div>
 </template>
-
 <script>
 import seo from '~/mixins/seo'
 import mobile from '~/mixins/mobile'
@@ -48,12 +49,17 @@ export default {
 }
 
 .chat-modul {
-  background-color: red;
+  background-color: rgb(233, 228, 228);
-  height: 594px;
+  height: 634px;
   width: 355px;
-  position: absolute;
+  position: fixed;
   bottom: 45px;
   right: 0;
   z-index: 10000;
+  .close {
+    padding: 10px; 
+    color: blue; 
+    cursor: pointer;
+  }
 }
 </style>

webapp/pages/profile/_id/_slug.vue

@@ -80,7 +80,7 @@
               @update="updateFollow"
             />
             <base-button
-             
+              @click="$store.commit('chat-modul/SET_OPEN_CHAT_MODUL', true)"
               v-tooltip="{
                 content: $t('notifications.headerMenuButton.chat'),
                 placement: 'bottom-start',

webapp/store/chat-modul.js

@@ -0,0 +1,19 @@
+export const state = () => {
+  return {
+    showChatModul: false,
+  }
+}
+
+export const mutations = {
+  SET_OPEN_CHAT_MODUL(state, ctx) {
+    console.log(ctx)
+    state.showChatModul = ctx || false
+  },
+}
+
+export const getters = {
+    showChatModul(state) {
+        console.log('getter', state)
+    return state
+  },
+}