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

@@ -43,3 +43,20 @@
     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;
+}

website/queries/friendship.php

@@ -15,6 +15,7 @@ function selectAllFriends($userID) {
             `user`
         INNER JOIN
             `friendship`
+            
         WHERE
             (`friendship`.`user1ID` = :userID AND
             `friendship`.`user2ID` = `user`.`userID` OR 

website/views/header.php

@@ -19,11 +19,6 @@ $userinfo = getHeaderInfo();
         </form>
     </div>
     <div class="right profile-menu">
-        <div id="profile-menu-popup">
-            <a href="/logout"><span style="color: red;" class="fa fa-sign-out" data-title="Uitloggen"></span></a> |
-            <a href="/settings"><span style="color: blue;" class="fa fa-cog" data-title="Instellingen"></span></a> |
-            <a href="/profile"><span style="color: green;" class="fa fa-user" data-title="Profiel"></span></a>
-        </div>
         <div id="profile-hello-popup">
             <div id="hello-loop">
                 Hallo
@@ -32,5 +27,6 @@ $userinfo = getHeaderInfo();
         </div>
         <img id="own-profile-picture" class="profile-picture" src="<?=$userinfo["profilepicture"]?>"/>
     </div>
-    <a href="/chat"><div class="right fa fa-comments-o" id="open-chat" data-title="Prive chats"></div></a>
 </header>
+<?php include("notification-center.php"); ?>
+

website/views/notification-center.php

@@ -0,0 +1,11 @@
+<nav class="menu" id="notification-center">
+    <section id="quick-links">
+        <a href="chat.php"><i class="fa fa-comments-o" data-title="Prive chats"></i></a>
+        <a href="settings.php"><i class="fa fa-cog" data-title="Instellingen"></i></a>
+        <a href="profile.php"><i class="fa fa-user" data-title="Profiel"></i></a>
+        <a href="logout.php"><i class="fa fa-sign-out" data-title="Uitloggen"></i></a>
+    </section>
+    <section id="not">
+
+    </section>
+</nav>