chat-modul structur, add store state roomID

webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <nuxt-link
+  v-if="!unreadChatNotificationsCount"
     class="chat-menu"
     :to="{ name: 'chat' }"
   >
@@ -14,19 +15,92 @@
     </base-button>
   
   </nuxt-link>
-  
+  <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
+    <template #default="{ toggleMenu }">
+      <base-button
+        ghost
+        circle
+        v-tooltip="{
+          content: $t('notifications.headerMenuButton.tooltip'),
+          placement: 'bottom-start',
+        }"
+        @click="toggleMenu"
+      >
+      <counter-icon icon="" :count="unreadChatNotificationsCount" danger />
+      <img src="/img/empty/chat-bubble.svg"/>
+       
+      </base-button>
+    </template>
+    <template #popover="{}">
+      <div class="notifications-menu-popover">
+        <div v-for="notification in notifications" v-bind:key="notification.roomid">
+            
+            <ds-space>
+
+             <div class="notifications-menu-popover-item" @click="$store.commit('chat-modul/SET_OPEN_CHAT_MODUL', { showChatModul: true , roomID: notification.roomid })">
+            <p>{{ notification.name }}</p>
+            {{ notification.title }}</div>
+            </ds-space>
+        </div>
+        <!-- <notification-list :notifications="notifications" /> -->
+      </div>
+      <ds-flex class="notifications-link-container">
+        <ds-flex-item class="notifications-link-container-item" :width="{ base: '100%' }" centered>
+          <nuxt-link :to="{ name: 'chat' }">
+            <base-button ghost primary>
+              All Chat Messages
+            </base-button>
+          </nuxt-link>
+        </ds-flex-item>
+      
+      </ds-flex>
+    </template>
+  </dropdown>
 </template>
 
 <script>
- 
+import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+import Dropdown from '~/components/Dropdown'
+import NotificationList from '../NotificationList/NotificationList'
 
 export default {
-  name: 'ChatMenu',
- 
+  name: 'ChatNotificationMenu',
+  components: {
+    CounterIcon,
+    Dropdown,
+    NotificationList,
+  },
+  data() {
+    return {
+      notifications: [ 
+        {roomid: 'u1', name: 'Jenny', title: 'last Message from Jenny'},
+        {roomid: 'u2', name: 'Honey', title: 'last Message from Honey'},
+        {roomid: 'u3', name: 'Bob der Baumeister', title: 'last Message from Bob der Baumeister'},
+       ], 
+    }
+  },
+ computed: {
+    unreadChatNotificationsCount() {
+      const result = this.notifications.reduce((count, notification) => {
+        return notification.read ? count : count + 1
+      }, 0)
+      return result
+    },
+    hasNotifications() {
+      return this.notifications.length
+    },
+ }
 }
 </script>
-
 <style lang="scss">
+.notifications-menu {
+    max-width: 500px;
+}
+.vue-popover-theme {
+ 
+  z-index: 1000000;
+}
+ 
 .counter-icon {
   position: relative;
 

webapp/layouts/default.vue

@@ -14,9 +14,18 @@
       <modal />
     </client-only>
     <client-only>
-      <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>
+      <ds-card space="xx-small" header="sfdfsdf">
+        <div v-if="$store.getters['chat-modul/showChatModul'].showChatModul" class="chat-modul" >
+         
+         <ds-text align="right" class="close">
+           RoomID: {{ $store.getters['chat-modul/showChatModul'].roomID }}
+          <ds-button  @click="$store.commit('chat-modul/SET_OPEN_CHAT_MODUL', { showChatModul: false , roomID: 'u0' })">x</ds-button>
+         </ds-text>
+         
+         <chat-modul :singleRoom="true"/>
+       </div>
+    </ds-card>
+     
     </client-only>
   </div>
 </template>
@@ -50,7 +59,7 @@ export default {
 
 .chat-modul {
   background-color: rgb(233, 228, 228);
-  height: 634px;
+  height: 667px;
   width: 355px;
   position: fixed;
   bottom: 45px;

webapp/pages/profile/_id/_slug.vue

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

webapp/store/chat-modul.js

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