Bugfixing a refaktoring

src/layouts/ProfileLayout.vue

@@ -15,31 +15,7 @@
           {{ pageTitle || "Polétání.cz" }}
         </q-toolbar-title>
 
-        <q-btn flat>
-          <AvatarFromPhoto v-if="loggedUser.avatarImageUrl" :size="32" :src="loggedUser.avatarImageUrl"/>
-          <q-icon name="person" v-else/>
-
-          <q-menu auto-close>
-            <q-list style="min-width: 200px">
-              <q-item clickable :to="{name: 'profile'}">
-                <q-item-section avatar>
-                  <q-icon name="person"/>
-                </q-item-section>
-                <q-item-section>Osobní nastavení</q-item-section>
-              </q-item>
-
-              <q-item clickable @click="logout" class="q-mt-lg">
-                <q-item-section avatar>
-                  <q-icon name="logout"/>
-                </q-item-section>
-                <q-item-section>
-                  Odhlásit
-                </q-item-section>
-              </q-item>
-
-            </q-list>
-          </q-menu>
-        </q-btn>
+        <TopMenuButton :logged-user="loggedUser" @logout="logout"/>
 
       </q-toolbar>
     </q-header>
@@ -50,18 +26,9 @@
       bordered
     >
 
-      <q-img class="absolute-top" :src="loggedUser.titleImageUrl" style="height: 150px">
-      </q-img>
+      <q-img class="absolute-top" :src="loggedUser.titleImageUrl" style="height: 150px"/>
       <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
-        <q-list class="q-my-lg">
-          <template v-for="link in linksList" :key="link.title">
-            <q-separator v-if="link.separator"/>
-            <NavigationButton
-              v-if="!link.separator"
-              v-bind="link"
-            />
-          </template>
-        </q-list>
+        <SidebarNavigation/>
       </q-scroll-area>
     </q-drawer>
 
@@ -85,54 +52,17 @@ import {useMeta, useQuasar} from "quasar";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 import {useRouter} from "vue-router";
 import {successObject} from "src/composables/dialog";
+import SidebarNavigation from "components/navigation/SidebarNavigation.vue";
+import TopMenuButton from "components/navigation/TopMenuButton.vue";
+
+const $q = useQuasar();
+const $router = useRouter();
 
 const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
 useMeta(() => ({
   title: pageTitle.value !== '' ? `${pageTitle.value} - Polétání.cz` : 'Polétání.cz'
 }));
 
-const linksList = [
-  {
-    title: 'Přidat let',
-    icon: 'airplane_ticket',
-    to: {name: "addFlight"}
-  },
-  {separator: true},
-  {
-    title: 'Moje lety',
-    icon: "flight_takeoff",
-    to: {name: "myFlights"}
-  },
-  {
-    title: 'Letadla',
-    icon: "connecting_airports",
-    to: {name: "aircrafts"}
-  },
-  {
-    title: 'Zajímavá místa',
-    icon: "place",
-    to: {name: "poi"}
-  },
-  {
-    title: 'Spolucestující',
-    icon: "people",
-    to: {name: "copilots"}
-  },
-  {separator: true},
-  {
-    title: 'Události',
-    icon: 'event',
-    to: {name: "events"}
-  },
-  {separator: true},
-  {
-    title: 'Organizace',
-    icon: "groups",
-    to: {name: "organizations"}
-  },
-  {separator: true},
-]
-
 const leftDrawerOpen = ref(false)
 const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
@@ -143,9 +73,6 @@ onMounted(() => {
 })
 const loggedUser = storeToRefs(useUserStore()).user;
 
-const $q = useQuasar();
-const $router = useRouter();
-
 const logout = () => {
   useUserStore().logout().then(() => {
     $q.notify(successObject("Odhlášení bylo úspěšné"));