some mobile

index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico">
     <link rel="manifest" href="/manifest.json">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <link rel="apple-touch-icon" href="/src/assets/1024.png">
 

src/App.vue

@@ -1,11 +1,12 @@
 <template>
 
-  <div id="app" class="flex flex-col h-screen bg-gray-100">
+  <div id="app" class="flex flex-col h-screen bg-gray-100 gap-4">
     <!-- MenuBar всегда фиксирован сверху -->
-    <MenuBar class="w-full fixed top-0 z-10"/>
+    <MenuBar  class="w-full sticky  invisible lg:visible top-0 z-10"/>
+    <ToolBar class=" fixed  visible lg:invisible bottom-0 z-10"/>
 
     <!-- Контентная часть заполняет оставшееся пространство -->
-    <div class="flex-grow mt-16 ">
+    <div class="flex-grow  ">
 
       <router-view class="w-full h-full "/>
     </div>
@@ -16,6 +17,7 @@
 <script setup lang="ts">
 import MenuBar from "./components/MenuBar.vue";
 import OverlayView from "@/components/OverlayView.vue";
+import ToolBar from "@/components/ToolBar.vue";
 
 // @Options({
 //   components: {

src/components/MenuBar.vue

@@ -1,7 +1,7 @@
 
 <template>
-  <div class="card">
+  <div class="card  ">
-    <Menubar :model="items">
+    <Menubar :model="items" >
       <template #start>
 <!--        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">-->
 <!--          <path-->
@@ -27,17 +27,17 @@
       <template #end>
         <div class="flex items-center gap-2">
 <!--          <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />-->
-          <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+<!--          <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />-->
         </div>
       </template>
     </Menubar>
   </div>
+
 </template>
 
 <script setup>
 import { ref } from "vue";
 import Badge from "primevue/badge";
-import Avatar from "primevue/avatar";
 import Menubar from "primevue/menubar";
 
 const items = ref([

src/components/OverlayView.vue

@@ -23,7 +23,7 @@ const openDrawer = (selectedTransactionType = null, selectedCategoryType = null)
     transactionType.value = selectedTransactionType;
     categoryType.value = 'EXPENSE'
   }
-  console.log('we tut testsete')
+
   drawerOpened.value = true;
 }
 
@@ -72,7 +72,7 @@ onMounted(() => {
 
 <template>
 
-  {{ drawerOpened }}
+
   <div v-if="loading">Loding...</div>
   <div v-else>
     <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
@@ -85,7 +85,7 @@ onMounted(() => {
     />
 
     <SpeedDial :model="items" :radius="120" type="quarter" direction="up"
-               class=" mb-10 h-fit !items-end me-10" :style="{ position: 'fixed', right: 0, bottom: 0 }"
+               class=" mb-10 h-fit !items-end me-10 hidden lg:!fixed" :style="{  right: 0, bottom: 0 }"
                pt:menuitem="m-2">
       <template #item="{ item, toggleCallback }" >
         <div

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>

src/components/budgets/BudgetList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4">
+  <div class="px-4 bg-gray-100 h-full ">
     <!-- Заголовок -->
     <h2 class="text-4xl mb-6  font-bold">Monthly Budgets</h2>
 

src/components/settings/SettingsView.vue

@@ -5,9 +5,10 @@ import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center h-full ">
+
-    <h1 class="text-2xl font-bold">Settings</h1>
+  <div class="flex flex-col h-full px-4 ">
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4  h-full w-full px-6">
+    <h2 class="text-4xl font-bold ">Monthly Budgets</h2>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4  ">
         <CategorySettingView />
         <RecurrentSettingView />
     </div>

src/components/transactions/TransactionList.vue

@@ -54,7 +54,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
+    <div class="px-4 bg-gray-100 h-full ">
     <!-- Заголовок -->
     <h2 class="text-4xl mb-6  font-bold">Transaction list</h2>
     <div class="flex flex-col gap-2">

src/router/index.ts

@@ -10,7 +10,7 @@ import TransactionList from "@/components/transactions/TransactionList.vue";
 
 const routes = [
 
-    {path: '/', name: 'Budgets', component: BudgetList},
+    {path: '/', name: 'Budgets main', component: BudgetList},
     {path: '/budgets', name: 'Budgets', component: BudgetList},
     {path: '/budgets/:id', name: 'BudgetView', component: BudgetView},
     {path: '/transactions/:mode*', name: 'Transaction List', component: TransactionList},