Create a simple dropdown for notifications

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 => {

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;