begin working on settings menu, font awesome cog icon menu, disable scrollbar

package.json

@@ -9,6 +9,9 @@
     },
     "dependencies": {
         "@babel/parser": "^7.11.5",
+        "@fortawesome/fontawesome-svg-core": "^1.2.32",
+        "@fortawesome/free-solid-svg-icons": "^5.15.1",
+        "@fortawesome/vue-fontawesome": "^2.0.0",
         "animate.css": "^4.1.1",
         "axios": "^0.21.0",
         "buefy": "^0.9.4",

src/App.vue

@@ -1,6 +1,12 @@
 <template>
     <div id="app">
-        <div id="expression" class="animate__animated animate__faster" :class="currentAnimation" v-katex="expression"></div>
+        <div class="columns is-justify-content-end pt-2">
+            <div class="column is-1 mr-2">
+                <b-icon @click.native="openSettings" id="settingsCog" pack="fas" icon="cog" custom-size="3x"></b-icon>
+            </div>
+        </div>
+        <div id="expression" class="animate__animated animate__faster" :class="currentAnimation"
+             v-katex="expression"></div>
         <div class="container">
             <div class="columns is-centered">
                 <div class="column is-three-fifths">
@@ -19,6 +25,16 @@
 html, body, #app {
     height: 100%;
     min-height: 100%;
+    max-height: 100%;
+}
+
+html {
+    scrollbar-width: none; /* For Firefox */
+    -ms-overflow-style: none; /* For Internet Explorer and Edge */
+}
+
+html::-webkit-scrollbar {
+    width: 0px; /* For Chrome, Safari, and Opera */
 }
 
 #input {
@@ -69,6 +85,11 @@ a, p, span {
     }
 }
 
+#settingsCog {
+    cursor: pointer;
+    float: right;
+}
+
 .notices .toast {
     padding: 0.6em 1.35em !important;
 }
@@ -84,9 +105,9 @@ export default {
             answer: null,
             currentQuestion: null,
             correctTimeout: false,
-            inputClass: false,
+            inputClass: '',
             allowInputSubmit: true,
-            currentAnimation: null,
+            currentAnimation: '',
             chances: 3
         }
     },
@@ -172,6 +193,9 @@ export default {
         },
         unlockInput() {
             this.allowInputSubmit = true;
+        },
+        openSettings() {
+
         }
     }
 }

src/main.js

@@ -1,16 +1,28 @@
 import Vue from 'vue'
 import VueKatex from 'vue-katex';
-import { Input, Field } from 'buefy';
+import {ConfigProgrammatic, Input, Field, Button, Icon} from 'buefy';
+import {library} from '@fortawesome/fontawesome-svg-core';
+import {faCog} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import App from './App.vue'
 import 'katex/dist/katex.min.css';
 import './scss/buefy.scss';
 import 'animate.css/animate.min.css';
 
-
 Vue.config.productionTip = false
+library.add(faCog);
+Vue.component('vue-fontawesome', FontAwesomeIcon);
+
 Vue.use(Input);
 Vue.use(Field);
-Vue.use(VueKatex)
+Vue.use(Button);
+Vue.use(Icon);
+ConfigProgrammatic.setOptions({
+    defaultIconComponent: 'vue-fontawesome',
+    defaultIconPack: 'fas'
+})
+Vue.use(VueKatex);
+
 
 new Vue({
     render: h => h(App),

yarn.lock

@@ -861,6 +861,30 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-common-types@^0.2.32":
+  version "0.2.32"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259"
+  integrity sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==
+
+"@fortawesome/fontawesome-svg-core@^1.2.32":
+  version "1.2.32"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz#da092bfc7266aa274be8604de610d7115f9ba6cf"
+  integrity sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.32"
+
+"@fortawesome/free-solid-svg-icons@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz#e1432676ddd43108b41197fee9f86d910ad458ef"
+  integrity sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.32"
+
+"@fortawesome/vue-fontawesome@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.0.tgz#63da3e459147cebb0a8d58eed81d6071db9f5973"
+  integrity sha512-N3VKw7KzRfOm8hShUVldpinlm13HpvLBQgT63QS+aCrIRLwjoEUXY5Rcmttbfb6HkzZaeqjLqd/aZCQ53UjQpg==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"