Create a navigator class to apply to all pages.

src/views/css/index.css

@@ -108,28 +108,13 @@ body{
     color: white;
 }
 
-.homeButton{
+.navigator{
     position: absolute;
-    top: 15px;
-    right: 15px;
-    background: var(--primary);
-    color: var(--accent);
-    border: none;
-    cursor: pointer;
-    border-radius: 50%;
-    height: 50px;
-    width: 50px;
+    top: 5px;
+    right: 5px;
 }
 
-.homeButton:hover{
-    filter: brightness(1.25);
-}
-
-.homeButton:active{
-    filter: brightness(1.75);
-}
-
-.circleButton{
+.navButton{
     display: flex;
     justify-content: center;
     align-items: center;
@@ -141,17 +126,18 @@ body{
     background: var(--primary);
     border: none;
     cursor: pointer;
+    margin: 10px 0;
 }
 
-.circleButton:hover{
+.navButton:hover{
     filter: brightness(1.25);
 }
 
-.circleButton:active{
+.navButton:active{
     filter: brightness(1.75);
 }
 
-.circleButton svg{
+.navButton svg{
     height: 35px;
     width: 35px;
 }

src/views/js/HomeButton.js

@@ -1,14 +0,0 @@
-import Elem from "./Elem.js";
-
-export default class HomeButton{
-    constructor(container){
-        let homeSvg = '<svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="2.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M2 8L11.7317 3.13416C11.9006 3.04971 12.0994 3.0497 12.2683 3.13416L22 8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 11V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V11" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
-
-        new Elem("button")
-            .innerHtml(homeSvg)
-            .addClass("homeButton")
-            .onclick(()=>{changePage("home")})
-            .appendTo(container);
-    }
-
-}

src/views/js/Navigator.js

@@ -0,0 +1,82 @@
+import Notifier from "./Notifier.js";
+import Elem from "./Elem.js";
+
+export default class Navigator{
+    constructor(container, options){
+        const navBox = new Elem("div")
+            .addClass("navigator")
+            .appendTo(container);
+
+        for(let i = 0; i < options.length; i++){
+            const option = options[i].split("-");
+            switch(option[0]){
+                case "home": navBox.append(this.homeButton()); break;
+                case "back": navBox.append(this.backButton(option[1])); break;
+                case "logout": navBox.append(this.logoutButton()); break;
+                case "viewMenu": navBox.append(this.viewMenuButton()); break;
+                case "addMenu": navBox.append(this.addMenuButton()); break;
+            }
+        }
+    }
+
+    homeButton(){
+        const homeSvg = '<svg viewBox="0 0 24 24" stroke-width="2.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M2 8L11.7317 3.13416C11.9006 3.04971 12.0994 3.0497 12.2683 3.13416L22 8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 11V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V11" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+
+        return new Elem("button")
+            .innerHtml(homeSvg)
+            .addClass("navButton")
+            .onclick(()=>{changePage("home")});
+    }
+
+    backButton(page){
+        const backSvg = '<svg viewBox="0 0 24 24" stroke-width="2.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M3 12L21 12M21 12L12.5 3.5M21 12L12.5 20.5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+
+        return new Elem("button")
+            .innerHtml(backSvg)
+            .addClass("navButton")
+            .onclick(()=>{changePage(page)});
+    }
+
+    logoutButton(){
+        const logoutSvg = '<svg stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M12 12H19M19 12L16 15M19 12L16 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19 6V5C19 3.89543 18.1046 3 17 3H7C5.89543 3 5 3.89543 5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+
+        return new Elem("button")
+            .innerHtml(logoutSvg)
+            .addClass("navButton")
+            .onclick(this.logout);
+    }
+
+    viewMenuButton(){
+        const viewSvg = '<svg viewBox="0 0 24 24" stroke-width="2.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M3 13C6.6 5 17.4 5 21 13" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+
+        return new Elem("button")
+            .innerHtml(viewSvg)
+            .addClass("navButton")
+            .onclick(()=>{changePage("viewMenu")});
+    }
+
+    addMenuButton(){
+        const addSvg = '<svg stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M6 12H12M18 12H12M12 12V6M12 12V18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+
+        return new Elem("button")
+            .innerHtml(addSvg)
+            .addClass("navButton")
+            .onclick(()=>{changePage("addMenu")});
+    }
+
+    async logout(){
+        let response;
+        try{
+            response = await fetch("/api/user/logout", {
+                method: "GET",
+                headers: {"Content-Type": "application/json"}
+            });
+        }catch(e){
+            new Notifier("error", "Something went wrong, try refreshing the page");
+        }
+
+        if(!response.ok) return new Notifier("error", response.error.message);
+
+        changePage("login");
+    }
+}

src/views/js/index.js

@@ -17,6 +17,7 @@ const pages = document.querySelector(".page");
 let currentPage;
 
 window.changePage = (page, data)=>{
+    console.log(page);
     console.time("change page");
     currentPage.close();
 
@@ -66,5 +67,6 @@ fetch("/api/user", {
         currentPage = new Home();
     })
     .catch((err)=>{
+        console.log(err);
         currentPage = new Login();
     });

src/views/js/pages/AddMenu.js

@@ -3,19 +3,12 @@ import Elem from "../Elem.js";
 
 export default class AddMenu extends Page{
     constructor(){
-        super("AddMenu");
-        const closeSvg= '<?xml version="1.0" encoding="UTF-8"?><svg stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+        super("AddMenu", ["back-home"]);
 
-        this.render(closeSvg);
+        this.render();
     }
 
     render(closeSvg){
-        new Elem("button")
-            .innerHtml(closeSvg)
-            .addClass("circleButton")
-            .onclick(()=>{changePage("home")})
-            .appendTo(this.container);
-
         new Elem("button")
             .text("New Transaction")
             .addClass("button")

src/views/js/pages/Home.js

@@ -6,11 +6,10 @@ import Transaction from "../data/Transaction.js";
 
 export default class Home extends Page{
     constructor(){
-        super("Home");
+        super("Home", ["addMenu", "viewMenu", "logout"]);
+
         const date = new Date();
         const month = date.toLocaleString("en-US", {month: "long"});
-        let logoutSvg = '<svg width="24px" height="24px" stroke-width="2.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M12 12H19M19 12L16 15M19 12L16 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19 6V5C19 3.89543 18.1046 3 17 3H7C5.89543 3 5 3.89543 5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
-        let viewSvg = '<svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="2.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M3 13C6.6 5 17.4 5 21 13" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
 
         if(!user.account.isPopulated){
             let from = new Date();
@@ -28,45 +27,11 @@ export default class Home extends Page{
                     new Notifier("error", "Unable to retrieve transactions");
                 });
         }
-        this.render(month, logoutSvg, viewSvg);
-    }
-
-    async logout(){
-        let response;
-        try{
-            response = await fetch("/api/user/logout", {
-                method: "GET",
-                headers: {"Content-Type": "application/json"}
-            });
-        }catch(e){
-            new Notifier("error", "Something went wrong, try refreshing the page");
-        }
-
-        if(!response.ok) return new Notifier("error", response.error.message);
 
-        changePage("login");
+        this.render(month);
     }
 
-    render(month, logoutSvg, viewSvg){
-        new Elem("div")
-            .addClass("buttonBox")
-            .append(new Elem("button")
-                .text("+")
-                .addClass("circleButton")
-                .onclick(()=>{changePage("addMenu")})
-            )
-            .append(new Elem("button")
-                .innerHtml(viewSvg)
-                .addClass("circleButton")
-                .onclick(()=>{changePage("viewMenu")})
-            )
-            .append(new Elem("button")
-                .innerHtml(logoutSvg)
-                .addClass("circleButton")
-                .onclick(this.logout)
-            )
-            .appendTo(this.container);
-
+    render(month){
         new Elem("h1")
             .text(month)
             .appendTo(this.container);

src/views/js/pages/Login.js

@@ -6,6 +6,7 @@ import Notifier from "../Notifier.js";
 
 export default class Login extends Page{
     constructor(){
+        console.log("wtf mate");
         super("Login");
 
         this.render();

src/views/js/pages/Page.js

@@ -1,12 +1,15 @@
 import Elem from "../Elem.js";
+import Navigator from "../Navigator.js";
 
-export default class Page {
-    constructor(page){
+export default class Page{
+    constructor(page, navOptions){
         this.container = new Elem("div")
             .id(page)
             .addClass("page")
             .appendTo(document.body)
             .get();
+
+        new Navigator(this.container, navOptions);
     }
 
     close(){

src/views/js/pages/ViewTransactions.js

@@ -1,7 +1,6 @@
 import Page from "./Page.js";
 import Elem from "../Elem.js";
 import Format from "../Format.js";
-import HomeButton from "../HomeButton.js";
 
 export default class ViewTransactions extends Page{
     constructor(){