some mobile

src/components/ToolBar.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class=" items-center  toolbar-example justify-between " style="width: 80%; left:10%; bottom: 1.5rem;">
+    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
+
+
+                           :transaction-type="transactionType"
+                           :category-type="categoryType"
+
+                           @close-drawer="closeDrawer()"
+    />
+    <Toolbar class="flex flex-row ">
+<!--      <template #start>-->
+<!--        &lt;!&ndash; Кнопка "Edit" слева &ndash;&gt;-->
+<!--        <Button label="Edit" icon="pi pi-pencil" class="p-button-text" @click="onEditClick"/>-->
+<!--      </template>-->
+      <template #center >
+        <!-- Заголовок по центру -->
+        <div class="!flex flex-row !gap-5">
+        <router-link to="/budgets">
+        <Button icon="pi pi-plus" class="p-button-text !p-0 !gap-0" @click="toggleCallback " label="Бюджеты" icon-pos="top" />
+        </router-link>
+        <router-link to="/transactions">
+          <Button icon="pi pi-plus" class="p-button-text !p-0 !gap-0" @click="toggleCallback " label="Транзакции" icon-pos="top" />
+        </router-link>
+        <router-link to="/settings">
+          <Button icon="pi pi-plus" class="p-button-text !p-0 !gap-0" @click="toggleCallback " label="Настройки" icon-pos="top" />
+        </router-link>
+        </div>
+
+      </template>
+      <template #end>
+        <!-- Кнопка "Add" справа -->
+
+        <SpeedDial :model="items" :radius="120" type="quarter" direction="up"
+                   class=" mb-10 h-fit !items-end me-10" :style="{ position: 'fixed' }"
+                   pt:menuitem="m-2">
+          <template #button="{ toggleCallback }">
+            <Button icon="pi pi-plus" class="p-button-text" @click="toggleCallback" label="Создать" icon-pos="top" />
+          </template>
+          <template #item="{ item, toggleCallback }">
+            <div
+                class="flex flex-row items-start gap-2 justify-between right-10 p-2 border  bg-white rounded border-surface-200 dark:border-surface-700 cursor-pointer"
+                @click="toggleCallback"> <!-- Установлена минимальная ширина -->
+
+              <span>{{ item.label }}</span>
+              <span :class="item.icon"></span>
+            </div>
+          </template>
+        </SpeedDial>
+
+
+      </template>
+      <div class="flex flex-col-reverse fixed bottom-6">
+        <p>hui</p>
+        <p>hui</p>
+        <p>hui</p>
+        <p>hui</p>
+        <p>hui</p>
+      </div>
+    </Toolbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref} from 'vue';
+import Toolbar from 'primevue/toolbar';
+import Button from 'primevue/button';
+import SpeedDial from "primevue/speeddial";
+import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
+import {TransactionType} from "@/models/Transaction";
+import {CategoryType} from "@/models/Category";
+import {useRoute} from "vue-router";
+
+
+const route = useRoute()
+
+const transactionType = ref<TransactionType>()
+const categoryType = ref<CategoryType>()
+const drawerOpened = ref(false);
+
+
+const openDrawer = (selectedTransactionType = null, selectedCategoryType = null) => {
+  if (selectedTransactionType && selectedCategoryType) {
+    transactionType.value = selectedTransactionType;
+    categoryType.value = selectedCategoryType;
+  } else if (selectedTransactionType) {
+    transactionType.value = selectedTransactionType;
+    categoryType.value = 'EXPENSE'
+  }
+
+  drawerOpened.value = true;
+}
+
+
+const closeDrawer = () => {
+  drawerOpened.value = false;
+}
+const items = ref([
+  {
+    label: 'Create instant transaction',
+    icon: 'pi pi-pencil',
+    command: () => {
+      openDrawer('INSTANT')
+    }
+  },
+  {
+    label: 'Create planned income',
+    icon: 'pi pi-refresh',
+    command: () => {
+      openDrawer('PLANNED', 'INCOME')
+    }
+  },
+  {
+    label: 'Create planned expense',
+    icon: 'pi pi-trash',
+    command: () => {
+      openDrawer('PLANNED', 'EXPENSE')
+    }
+  }
+])
+
+const onEditClick = () => {
+  console.log("Edit button clicked");
+};
+
+const onAddClick = () => {
+  console.log("Add button clicked");
+};
+
+onMounted(() => {
+  setTimeout(() => {
+    console.log(route.params['mode']);
+    if (route.params['mode']) {
+      console.log(route.params['mode']);
+
+      openDrawer('INSTANT')
+
+    }
+  }, 10)
+})
+</script>
+
+<style scoped>
+.toolbar-example {
+  //margin: 20px;
+}
+
+h3 {
+  margin: 0;
+}
+</style>