put Settings to off-canvas;

src/App.vue

@@ -12,6 +12,7 @@
     <CustomBookForTracker/>
     <TasksForTracker/>
     <History/>
+    <Settings/>
 </template>
 
 <script>
@@ -23,10 +24,12 @@ import History from "./views/History";
 import TasksForTracker from "./views/TasksForTracker";
 import HistoryForTracker from "./views/HistoryForTracker";
 import CustomBookForTracker from "./views/CustomBookForTracker";
+import Settings from "./views/Settings";
 
 export default {
     el: '#root',
     components: {
+        Settings,
         CustomBookForTracker,
         HistoryForTracker,
         TasksForTracker,

src/views/Menu.vue

@@ -56,13 +56,16 @@
             </a>
         </div>
         <div class="left-menu-item">
-            <router-link to="/settings"
+            <a type="button"
-                         type="button"
                class="btn btn-dark text-light bottom-menu-item"
-                         data-bs-placement="left"
+               data-bs-toggle="offcanvas"
+               data-bs-target="#settingsCanvas"
+               data-bs-placement="top"
                title="Einstellungen">
                 <i class="fas fa-sliders-h"></i>
-            </router-link>
+            </a>
+        </div>
+        <div class="left-menu-item">
         </div>
     </div>
 </template>

src/views/Settings.vue

@@ -1,13 +1,14 @@
 <template>
+    <div class="offcanvas offcanvas-end" id="settingsCanvas"
+         aria-hidden="true">
+        <div class="offcanvas-header">
             <h5><i class="fas fa-sliders-h"></i> Einstellungen</h5>
-    <hr/>
+            <button type="button" v-on:click="updateStorage()" class="btn-close" data-bs-dismiss="offcanvas"  aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
             <div class="row">
-        <div class="col-md-6">
+                <div class="col-md-12">
                     <h5>Allgemeine Einstellungen</h5>
-<!--            <div class="form-group">-->
-<!--                <label>Logo-Pfad</label>-->
-<!--                <input type="text" v-model="dashboardLogo" class="form-control">-->
-<!--            </div>-->
                     <div class="form-group">
                         <label>Ticket-Link <small>Link zu einem Ticket ohne Ticketnummer</small></label>
                         <input type="text" v-model="trackerSystemUrl" class="form-control">
@@ -22,7 +23,8 @@
                     <br/>
                     <div class="form-group">
                         <label>
-                    <input type="checkbox" class="form-control-checkbox" v-model="$store.state.settings.dontShowMinutes">
+                            <input type="checkbox" class="form-control-checkbox"
+                                   v-model="$store.state.settings.dontShowMinutes">
                             Zeit immer in Stunden anzeigen
                         </label>
                     </div>
@@ -37,7 +39,7 @@
                     <!--            </div>-->
                     <!--            <br/>-->
                 </div>
-        <div class="col-md-6">
+                <div class="col-md-12">
                     <!--            <h5>Zurücksetzen & Löschen</h5>-->
                     <!--            <div class="row">-->
                     <!--                <div class="col-md-6">-->
@@ -52,7 +54,8 @@
                         <div class="col-md-6">
                             <h6>Export-Json</h6>
                             <textarea class="form-control" id="exportJsonInput" v-model="exportJson"></textarea>
-                    <button class="btn btn-success tracker-action-button" @click="copy2Clipboard">Export-String kopieren
+                            <button class="btn btn-success tracker-action-button" @click="copy2Clipboard">Export-String
+                                kopieren
                             </button>
                         </div>
                         <div class="col-md-6">
@@ -63,9 +66,7 @@
                     </div>
                 </div>
             </div>
-    <div class="modal-footer">
+        </div>
-        <button class="btn btn-primary" v-on:click="updateStorage()" data-bs-dismiss="offcanvas" >Speichern</button>
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas" >Schließen</button>
     </div>
 </template>