Added menu for creating an incident on a mobile phone

src/languages/en.js

@@ -38,6 +38,8 @@ export default {
     "Check Update On GitHub": "Check Update On GitHub",
     List: "List",
     Add: "Add",
+    "Add Monitor": "Add Monitor",
+    "Add Incident": "Add Incident",
     Monitor: "Monitor",
     Incident: "Incident",
     Monitors: "Monitors",

src/layouts/Layout.vue

@@ -51,7 +51,7 @@
 
         <!-- Mobile Only -->
         <div v-if="$root.isMobile" style="width: 100%; height: 60px;" />
-        <nav v-if="$root.isMobile" class="bottom-nav">
+        <nav v-if="$root.isMobile" class="bottom-nav scroll">
             <router-link to="/dashboard" class="nav-link">
                 <div><font-awesome-icon icon="tachometer-alt" /></div>
                 {{ $t("Dashboard") }}
@@ -64,7 +64,12 @@
 
             <router-link to="/addMonitor" class="nav-link">
                 <div><font-awesome-icon icon="plus" /></div>
-                {{ $t("Add") }}
+                {{ $t("Add Monitor") }}
+            </router-link>
+
+            <router-link to="/addIncident" class="nav-link">
+                <div><font-awesome-icon icon="plus" /></div>
+                {{ $t("Add Incident") }}
             </router-link>
 
             <router-link to="/settings" class="nav-link">
@@ -201,4 +206,21 @@ main {
     }
 }
 
+.scroll {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+.scroll::-webkit-scrollbar {
+    display: none;
+}
+
+.scroll a {
+    flex: 0 0 auto;
+    min-width: fit-content;
+}
+
 </style>