notifications dropdown

Author: supalarry

frontend/src/components/shared/NavBar.vue

@@ -2,7 +2,7 @@
   <!-- eslint-disable max-len -->
   <!-- eslint-disable vue/no-deprecated-v-on-native-modifier -->
   <nav class="md:flex md:justify-between md:items-center md:py-5">
-    <div class="flex items-center justify-between px-5 py-3 md:p-0">
+    <div class="flex items-center justify-between px-5 py-3 md:p-0 w-full">
       <div id="logo">
         <router-link to="/">
           <div class="flex justify-center items-center">
@@ -11,7 +11,7 @@
           </div>
         </router-link>
       </div>
-      <NavBarBell v-if="loggedIn" class="md:invisible"></NavBarBell>
+      <NavBarBell v-if="loggedIn"></NavBarBell>
       <div id="burger" class="md:hidden">
         <button type="button" class="block text-gray-800 focus:outline-none" v-on:click="isOpen = !isOpen">
           <svg class="w-8 h-8 text-purple-matcha fill-current" viewBox="0 0 24 24">
@@ -21,7 +21,6 @@
         </button>
       </div>
     </div>
-    <NavBarBell v-if="loggedIn" class="invisible md:visible"></NavBarBell>
     <div id="links" v-on:click="isOpen = !isOpen" v-bind:class="isOpen ? 'block' : 'hidden'" class="px-2 pb-5 text-center md:p-0 md:block md:flex md:items-center">
       <div v-if="!loggedIn" class="md:flex md:bg-purple-matcha md:border-2 md:border-purple-matcha md:rounded-lg">
         <router-link to="/accounts/signin" class="navigation-button-logged-in md:hover:bg-white-matcha md:hover:text-purple-matcha md:text-purple-matcha md:bg-white-matcha md:py-2 md:px-8 md:rounded-md mx-0">Sign In</router-link>

frontend/src/components/shared/NavBarBell.vue

@@ -1,15 +1,72 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div class="ml-auto mr-8 cursor-pointer relative pr-1">
-    <img src="../../assets/bell.png" class="w-5">
-    <div v-if="notify" class="w-3 h-3 bg-purple-matcha rounded-full absolute right-0 bottom-0 ml-2 pl-1"></div>
+  <div class="ml-auto mr-8 relative pr-1 z-50 outline-none" @focusout="close" tabindex="1">
+    <div class="outline-none">
+      <img v-on:click="toggle()" src="../../assets/bell.png" class="w-5 cursor-pointer">
+      <div v-on:click="toggle()" v-if="notify" class="w-3 h-3 bg-purple-matcha cursor-pointer rounded-full absolute right-0 bottom-0 ml-2 pl-1"></div>
+    </div>
+    <div
+      id="notifications"
+      v-bind:class="{
+      'hidden': !showNotifications,
+      'p-4': true,
+      'overflow-scroll': notifications.length > 3,
+      'bg-white': true,
+      'shadow': true,
+      'w-64': true,
+      'h-auto': notifications.length <= 3,
+      'h-48': notifications.length > 3,
+      'absolute': true,
+      'top-0': true,
+      'mt-10': true,
+      'z-50': true,
+      'rounded-md': true}">
+      <div v-for="notification in notifications" :key="notification.id">{{notification.text}}</div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   data: () => ({
-    notify: false,
+    notify: true,
+    notifications: [
+      { text: 'Samantha liked you', id: 1 },
+      { text: 'Bae liked you', id: 2 },
+      { text: 'Samantha liked you', id: 3 },
+      { text: 'Bae liked you', id: 4 },
+      { text: 'Samantha liked you', id: 5 },
+      { text: 'Bae liked you', id: 6 },
+      { text: 'Samantha liked you', id: 7 },
+      { text: 'Bae liked you', id: 8 },
+      { text: 'Samantha liked you', id: 9 },
+      { text: 'Bae liked you', id: 10 },
+    ],
+    showNotifications: false,
   }),
+  methods: {
+    toggle() {
+      this.showNotifications = !this.showNotifications;
+    },
+    close(event) {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        this.showNotifications = false;
+        this.notify = false;
+      }
+    },
+  },
 };
 </script>
+
+<style>
+
+#notifications {
+  @apply -ml-64;
+}
+
+@screen md {
+  #notifications {
+    @apply ml-0;
+  }
+}
+</style>