adds dropdown menu and progress bar now changes with user points

Relates #56

private/sass/footer.scss

@@ -9,11 +9,13 @@
   background-color: $navy1;
   position: fixed;
   bottom: 0;
-  width:100%;
+  min-width:70%;
   height: $large;
+  border-top-right-radius: 10px;
 }
 
 #foot-navbar > a {
   color: $white;
   text-decoration: none;
+  margin: 0 $font-h3;
 }

private/sass/navbar.scss

@@ -6,23 +6,27 @@ nav{
   position: fixed;
   top:0;
   right: 0;
-  min-width: 50%;
+  min-width: 70%;
   height: $large;
+  z-index: 10;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   background-color: $navy1;
   color: $white;
+  padding: $smallest;
   border-bottom-left-radius: 10px;
 }
 
-
 #xp-section{
 display:flex;
-align-items:center; 
+align-items:center;
+justify-content: space-around;
+min-width: 60%;
 }
 #xp-section > h3{
-  margin: $small;
-  margin-left: $medium;
+  margin: 0 $small;
+  font-weight: 500;
 }
 #xp-bar{
   margin: $small;
@@ -50,16 +54,38 @@ appearance: none;
 }
 
 #avatar-section{
- text-align: right;
+  position: fixed;
+  right: 0;
+  top: $large;
 }
 #profile-pic{
   height: 4rem;
   border: $navy1 $small solid;
   border-radius: 100%;
   margin-right: $smallest;
 }
-#avatar-section > h4{
+nav > h4{
   font-size: $medium;
   margin: 0;
-  margin: $small;
+}
+.level{
+  margin-left: $small;
+  margin-right: $small;
+}
+
+.popout-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  height: $godzilla;
+  width: 100vw;
+  transform: translateY(-100%);
+  background-color: $navy1;
+  transition: all 0.5s ease-in;
+  box-shadow: 1px 0 3px grey;
+}
+
+.popout-menu--visible {
+  transform: translateY(0);
 }

private/sass/style.scss

@@ -3,6 +3,9 @@
 @import "sizes";
 @import "reset";
 
+// paste line below into terminal to keep css updating
+// sass --watch private/sass:public/css
+
 *{
   box-sizing: border-box;
 }

public/js/navbar.js

@@ -1,7 +1,24 @@
+
 var getPoints = document.querySelector(".getPoints");
+var xpBar = document.querySelector("#xp-bar");
+
+
+(() => {
+    const menuBtn = document.querySelector('.menu-button');
+    const popoutMenu = document.querySelector('.popout-menu');
+    menuBtn.addEventListener('click', () =>
+        toggleMenu(popoutMenu, menuBtn)
+    );
+})();
+
+function toggleMenu(menu, button) {
+    // button.classList.toggle('app_drawer__button--visible');
+    menu.classList.toggle('popout-menu--visible');
+}
 
 function render(number) {
-    getPoints.innerHTML = number
+    getPoints.innerHTML = (number + "/50");
+    xpBar.setAttribute("value", number);
 }
 
 fetch("http://localhost:3000/userpoints/")
@@ -12,3 +29,5 @@ fetch("http://localhost:3000/userpoints/")
     })
 
 
+
+

src/views/partials/navbar.hbs

@@ -1,13 +1,18 @@
 <header>
     <nav>
         <div id="xp-section">
-            <h3 class="getPoints"></h3>
             <h3>XP</h3>
-            <progress max="100" value="50" id="xp-bar"></progress>
+            <h4 class="getPoints"></h4>
+            <progress max="50" value="40" id="xp-bar"></progress>
         </div>
-        <div id="avatar-section">
         <h4 class="level">Waste Warrior</h4>
+        <div id="avatar-section">
+        <button class="menu-button">
         <img id="profile-pic" src="/public/imgs/Avatar.png" alt="Profile picture">
+        </button>
         </div>
     </nav>
+    <menu class="popout-menu">
+
+    </menu>
 </header>