update board dimensions after window resize

src/App.vue

@@ -18,6 +18,8 @@
   import MainMenu from "./components/MainMenu.vue";
   import CanvasBoard from "./components/CanvasBoard.vue";
   import MenuReset from "./components/MenuReset.vue";
+  import { mapWritableState, mapActions } from "pinia";
+  import { globalStore } from "./stores/index.js";
 
   export default {
     name: "App",
@@ -32,22 +34,35 @@
         windowWidth: window.innerWidth,
       };
     },
-    methods: {
-      toggleMainMenu() {
-        this.mainMenu = !this.mainMenu;
-      },
-      onResize() {
-        this.windowWidth = window.innerWidth;
-      },
+    computed: {
+      ...mapWritableState(globalStore, {
+        canvasWidth: "canvasWidth",
+        canvasHeight: "canvasHeight",
+      }),
     },
     mounted() {
       this.$nextTick(() => {
         window.addEventListener("resize", this.onResize);
       });
     },
-    beforeDestroy() {
+    beforeUnmount() {
       window.removeEventListener("resize", this.onResize);
     },
+    methods: {
+      ...mapActions(globalStore, ["setBoardWidth", "setBoardHeight"]),
+      toggleMainMenu() {
+        this.mainMenu = !this.mainMenu;
+      },
+      onResize() {
+        this.$nextTick(() => {
+          this.windowWidth = window.innerWidth;
+          this.canvasWidth = window.innerWidth;
+          this.canvasHeight = window.innerHeight;
+          this.setBoardWidth();
+          this.setBoardHeight();
+        });
+      },
+    },
   };
 </script>
 
@@ -121,8 +136,9 @@
     h1 {
       font-size: medium;
       display: flex;
-      justify-content: space-around;
       align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
     }
 
     #burger-toggle {