Added a notification bar

website/public/js/header.js

@@ -1,7 +1,27 @@
 $(document).ready(function() {
+    // Hide notification center.
     $("#profile-menu-popup").hide();
+
+    // $("#own-profile-picture").click(function() {
+    //     $("#profile-menu-popup").toggle();
+    //     $("#profile-hello-popup").toggle();
+    // });
+
     $("#own-profile-picture").click(function() {
-        $("#profile-menu-popup").toggle();
-        $("#profile-hello-popup").toggle();
+        if($("#notification-center").css('right') == "-256px") {
+            // $(".content").animate({
+            //     marginRight: "256px"
+            // }, 500);
+            $("#notification-center").animate({
+                right: "0px"
+            }, 500);
+        } else {
+            // $(".content").animate({
+            //     marginRight: "0px"
+            // }, 500);
+            $("#notification-center").animate({
+                right: "-256px"
+            }, 500);
+        }
     });
 });

website/public/styles/header.css

@@ -33,32 +33,12 @@ header {
 header div {
     display: inline-block;
 }
-
-#open-chat {
-    font-size: 32px;
-    line-height: 80px;
-    margin-right: 50px;
-}
-
-.profile-menu {
-    font-size: 21px;
-}
-
 .profile-menu img {
     padding: 8px;
     height: 64px;
     width: 64px;
 }
 
-#own-profile-picture, #profile-menu-popup span {
+#own-profile-picture {
     cursor: pointer;
 }
-
-#profile-menu-popup {
-    padding: 5px;
-
-    background: white;
-    color: #666;
-
-    border-radius: 3px;
-}

website/public/styles/menu.css

@@ -42,4 +42,21 @@
     height: 100%;
     padding: 0;
     text-align: left;
+}
+
+#notification-center {
+    left: auto;
+    width: 256px;
+    right: -256px;
+}
+
+#quick-links {
+    text-align: center;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+#quick-links i {
+    color: #845663;
+    font-size: 42px;
+    padding: 7px;
 }