website/js/menu.js

@@ -0,0 +1,38 @@
+$(document).ready(function() {
+    $(".extra-menu-items").hide();
+
+    // Show more friends
+    $("#more-friends-click").click(function() {
+        // Show only friends
+        $("#groups-menu-section").slideUp();
+        $("#friends-menu-section a").show();
+
+        // Change buttons
+        $("#more-friends-click").hide();
+        $("#menu-back").show();
+    });
+
+    // Show more groups
+    $("#more-groups-click").click(function() {
+        // Show only groups
+        $("#friends-menu-section").slideUp();
+        $("#groups-menu-section a").show();
+
+        // Change buttons
+        $("#more-groups-click").hide();
+        $("#menu-back").show();
+    });
+
+    // Go back
+    $("#menu-back").click(function() {
+        // Show overview of friends and groups
+        $("#friends-menu-section").slideDown();
+        $("#groups-menu-section").slideDown();
+        $(".extra-menu-items").hide();
+
+        // Change buttons
+        $("#menu-back").hide();
+        $("#more-groups-click").show();
+        $("#more-friends-click").show();
+    });
+});

website/styles/main.css

@@ -13,15 +13,31 @@ Website:        myhyvesbookplus.tk
     vertical-align: middle;
 }
 
+.group-picture {
+    border-radius: 5px;
+    height: 42px;
+    width: 42px;
+    object-fit: cover;
+    vertical-align: middle;
+}
+
+html {
+    height: 100%;
+}
+
 body {
+    height: 100%;
+
     background-color: #B78996;
     color: #333;
+
     font-family: Arial, sans-serif;
 }
 
 .content {
     margin-top: 80px;
     margin-left: 256px;
+    min-height: 100%;
 }
 
 ::selection {

website/styles/menu.css

@@ -1,5 +1,6 @@
 .menu {
     position: fixed;
+    z-index: 50;
 
     left: 0;
     top: 80px;
@@ -14,6 +15,12 @@
     padding: 10px;
 }
 
-.friend-item {
+.nav-list li {
     padding: 5px 20px;
 }
+
+.more-item {
+    padding: 5px 20px;
+    color: #666;
+    font-size: 14px;
+}