From 64fb65dea555bf65ed384bab2a86d971a614e97f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karel=20Kr=C3=BDda?= <karel.kryda@gmail.com>
Date: Wed, 2 Feb 2022 14:02:45 +0100
Subject: [PATCH] Added menu for creating an incident on a mobile phone

---
 src/languages/en.js    |  2 ++
 src/layouts/Layout.vue | 26 ++++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 930527820..4a98581e1 100644
--- a/src/languages/en.js
+++ b/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",
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 711ed9c19..ffb41a49e 100644
--- a/src/layouts/Layout.vue
+++ b/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>