+ settings update

src/components/settings/SettingsView.vue

@@ -2,6 +2,32 @@
 
 import CategorySettingView from "@/components/settings/CategorySettingView.vue";
 import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue";
+
+import {ref} from "vue";
+import Divider from "primevue/divider";
+import CategoriesList from "@/components/settings/categories/CategoriesList.vue";
+import RecurrentList from "@/components/settings/recurrent/RecurrentList.vue";
+
+const selectedModeCode = ref("categories")
+
+
+const pages = ref([
+  {
+    "code": "categories",
+    "title": "Категории",
+    "icon": "pi pi-bars"
+  },
+  {
+    "code": "recurrent",
+    "title": "Ежемесячные платежи",
+    "icon": "pi pi-calendar-clock"
+  },
+  {
+    "code": "notifications",
+    "title": "Уведомления",
+    "icon": "pi pi-bell"
+  }
+])
 </script>
 
 <template>
@@ -9,9 +35,22 @@ import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue
   <div class="flex bg-gray-100 flex-col h-full px-4 gap-4 ">
     <h2 class="text-4xl font-bold ">Настройки</h2>
 
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 items-start  ">
+    <div class="grid grid-cols-8 w-full h-full ">
-        <CategorySettingView />
+      <div class="flex flex-row items-center justify-end col-start-2 col-span-1 ">
-        <RecurrentSettingView />
+        <ul class=" flex flex-col  gap-1  ">
+          <li v-for="page in pages" :key="page.code"
+              class="flex flex-row gap-2 p-2 hover:bg-emerald-100 hover:text-emerald-700 hover:rounded-md items-center"
+              :class="selectedModeCode == page.code ? 'bg-blue-100' : ''" @click="selectedModeCode = page.code">
+            <i :class="page.icon"/>{{ page.title }}
+          </li>
+        </ul>
+        <Divider layout="vertical"/>
+      </div>
+      <div class=" flex flex-col col-span-5 gap-2 max-h-[90dvh] overflow-y-scroll justify-items-start">
+        <CategoriesList v-if="selectedModeCode == 'categories'"/>
+        <RecurrentList v-else-if="selectedModeCode == 'recurrent'"/>
+        <p v-else-if="selectedModeCode == 'notifications'" class="flex justify-items-start justify-center items-center h-screen">NOTIFICATIONS UNDER CONSTRUCTIONS</p>
+      </div>
     </div>
 
   </div>

src/components/settings/recurrent/RecurrentList.vue

@@ -3,9 +3,9 @@
   <div v-if="loading" class="flex flex-col items-center justify-center h-full bg-gray-100 py-15">
     Loading...
   </div>
-  <div v-else class="flex flex-col items-center justify-center h-full bg-gray-100 py-15">
+  <div v-else class="flex flex-col  h-full bg-gray-100 py-15">
     <!-- Заголовок -->
-    <h1 class="text-4xl font-extrabold mb-8 text-gray-800">Recurrent Payments</h1>
+    <h1 class="text-4xl font-extrabold mb-8 text-gray-800">Ежемесячные платежи</h1>
 
     <!-- Список рекуррентных платежей -->
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4">