From d0812dae092a30b74a34aa98e05bee6988e5b938 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 8 Apr 2019 14:26:08 +0200
Subject: [PATCH] Create a simple dropdown for notifications

---
 cypress/integration/common/steps.js |  1 +
 webapp/layouts/default.vue          | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index b65bc96ce..6ccde03f4 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -303,6 +303,7 @@ When('open the notification menu and click on the first item', () => {
 })
 
 Then('see {int} unread notifications in the top menu', count => {
+  cy.find('.notifications-menu').should('contain', count)
 })
 
 Then('I get to the post page of {string}', path => {
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 991662350..77aa32b2b 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -31,6 +31,27 @@
             />
           </no-ssr>
           <template v-if="isLoggedIn">
+            <no-ssr>
+              <dropdown class="notifications-menu">
+                <template
+                  slot="default"
+                  slot-scope="{toggleMenu}"
+                >
+                  <ds-button
+                    primary
+                    icon="bell"
+                    @click.prevent="toggleMenu"
+                  >
+                    7
+                  </ds-button>
+                </template>
+                <template
+                  slot="popover"
+                >
+                  <h1> I am a notification </h1>
+                </template>
+              </dropdown>
+            </no-ssr>
             <no-ssr>
               <dropdown class="avatar-menu">
                 <template
@@ -239,6 +260,11 @@ export default {
   flex: 1;
 }
 
+.notifications-menu {
+  display: flex;
+  align-items: center;
+}
+
 .avatar-menu-trigger {
   user-select: none;
   display: flex;