linting and formating. renamed canvas component

src/components/MainMenu.vue

@@ -8,29 +8,28 @@
 </template>
 
 <script>
-import MenuCellProperties from './MenuCellProperties.vue'
-import MenuGeneralOptions from './MenuGeneralOptions.vue'
-import MenuElementaryCA from './MenuElementaryCA.vue'
-import Menu2dCA from './Menu2dCA.vue'
+import MenuCellProperties from "./MenuCellProperties.vue";
+import MenuGeneralOptions from "./MenuGeneralOptions.vue";
+import MenuElementaryCA from "./MenuElementaryCA.vue";
+import Menu2dCA from "./Menu2dCA.vue";
 export default {
-  name: 'MainMenu',
+  name: "MainMenu",
   components: {
     MenuCellProperties,
     MenuGeneralOptions,
     MenuElementaryCA,
-    Menu2dCA
+    Menu2dCA,
   },
-}
+};
 </script>
 
 <style>
 #sidebar {
-    width: 25%;
-    padding: 0 10px;
-    overflow-y: scroll;
+  width: 25%;
+  padding: 0 10px;
+  overflow-y: scroll;
 }
 
-
 /* Hide scrollbar for Chrome, Safari and Opera */
 #sidebar::-webkit-scrollbar {
   display: none;
@@ -38,26 +37,26 @@ export default {
 
 /* Hide scrollbar for IE, Edge and Firefox */
 #sidebar {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 @media screen and (max-width: 800px) {
-    #container {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
+  #container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-    #mainContent {
-        flex: 1;
-        width: 100%;
-    }
+  #mainContent {
+    flex: 1;
+    width: 100%;
+  }
 
-    #sidebar {
-        flex: 1;
-        padding: 0;
-        width: 100%;
-    }
+  #sidebar {
+    flex: 1;
+    padding: 0;
+    width: 100%;
+  }
 }
 </style>