Modified layout on index and mylayout

frontend/src/layouts/MyLayout.vue

@@ -10,9 +10,9 @@
           <q-toolbar-title>GeoCaching
         </q-toolbar-title>
         <q-fab color="green-3" text-color="black" icon="menu" direction="down">
-          <q-fab-action color="green-3" text-color="black" to="/" icon="menu" />
+          <q-fab-action color="green-3" text-color="black" to="/" icon="directions" />
-          <q-fab-action color="green-3" text-color="black" to="/CacheView" icon="list" />
+          <q-fab-action color="green-3" text-color="black" to="/CacheView" icon="map" />
-          <q-fab-action color="green-3" text-color="black" to="/" icon="ranking" />
+          <q-fab-action color="green-3" text-color="black" to="/" icon="list" />
           <q-fab-action color="green-3" text-color="black" to="/Login" icon="perm_identity" />
           <q-fab-action color="green-3" text-color="black" to="/" icon="logout" />
         </q-fab>
@@ -38,7 +38,20 @@
           to="/CacheView"
         >
           <q-item-section avatar>
-            <q-icon name="school" />
+            <q-icon name="directions" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Startseite</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          tag="a"
+          target="_blank"
+          href=""
+        >
+          <q-item-section avatar>
+            <q-icon name="map" />
           </q-item-section>
           <q-item-section>
             <q-item-label>Caches</q-item-label>
@@ -51,25 +64,12 @@
           href=""
         >
           <q-item-section avatar>
-            <q-icon name="code" />
+            <q-icon name="list" />
           </q-item-section>
           <q-item-section>
             <q-item-label>Rangliste</q-item-label>
           </q-item-section>
         </q-item>
-        <q-item
-          clickable
-          tag="a"
-          target="_blank"
-          href=""
-        >
-          <q-item-section avatar>
-            <q-icon name="chat" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Discord Chat Channel</q-item-label>
-          </q-item-section>
-        </q-item>
         <q-item
           clickable
           tag="a"
@@ -77,7 +77,7 @@
           to="/Login"
         >
           <q-item-section avatar>
-            <q-icon name="record_voice_over" />
+            <q-icon name="perm_identity" />
           </q-item-section>
           <q-item-section>
             <q-item-label>Profil</q-item-label>
@@ -90,7 +90,7 @@
           href=""
         >
           <q-item-section avatar>
-            <q-icon name="rss_feed" />
+            <q-icon name="logout" />
           </q-item-section>
           <q-item-section>
             <q-item-label>Abmelden</q-item-label>

frontend/src/pages/Index.vue

@@ -8,7 +8,21 @@
       <q-card-section>
         <div class="text-h6">GeoCaching</div>
         <div class="text-body2">Willkommen</div>
-         <q-btn color="green-3" text-color="black" class="full-width q-mt-md" label="Was ist GeoCaching?"  @click="card = true" />
+         <q-expansion-item
+           expand-separator
+           rounded-borders
+           class="bg-green-3 text-black shadow-2 full-width q-mt-md"
+           label="Was ist GeoCaching?"
+         >
+           <q-card>
+             <q-card-section>
+               GeoCaching ist eine spielerische Führung, eine Schnitzeljagd, über die Bundesgartenschau.
+               Es gibt mehrere Routen (Caches), von denen man wählen kann. Auf jedem Cache gibt es mehrere Stationen, bei denen Rätsel und Aufgaben gelöst werden müssen, um die nächste zu finden.
+               Eine Station ist eine QR-Code, bei dessen einscannen das nächste Rätsel freigeschaltet wird.
+               Findet ein Cacher alle Stationen eines Caches erhält er eine kleine Belohnung und sammelt Punkte für eine Rangliste.
+             </q-card-section>
+           </q-card>
+         </q-expansion-item>
       </q-card-section>
     </q-card>
       <q-card class="my-card" style="max-width: 600px">
@@ -22,22 +36,6 @@
           <q-btn color="green-3" text-color="black" class="full-width q-mt-md" label="Zu den Caches" to="/CacheView"/>
         </q-card-section>
       </q-card>
-      <q-dialog v-model="card">
-        <q-card>
-          <q-card-section>
-            <div class="row no-wrap items-center">
-              <div class="col text-h6 ellipsis">Was ist GeoCaching?</div>
-            </div>
-          </q-card-section>
-          <q-card-section>
-            <p class="text-subtitle1">GeoCaching ist eine Art Schnitzeljagd. </p>
-          </q-card-section>
-          <q-separator />
-          <q-card-actions>
-            <q-btn flat color="primary" v-close-popup>Ok</q-btn>
-          </q-card-actions>
-        </q-card>
-      </q-dialog>
     </div>
 </template>
 
@@ -45,8 +43,6 @@
 export default {
   data () {
     return {
-      card: false,
-
       slideVol: 39,
       slideAlarm: 56,
       slideVibration: 63