From 8cee47890339e8ccddd677d18e966697b83be182 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 7 Sep 2024 11:02:06 +0500
Subject: [PATCH 1/7] fix a little trouble

---
 src/app/components.d.ts             | 3 ---
 src/modules/entities/EntityItem.vue | 4 ++--
 src/pages/authorization/signIn.vue  | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 7120db4..6641692 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -9,7 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     App: typeof import('./App.vue')['default']
     AuthorizationForm: typeof import('./../modules/authorization/AuthorizationForm.vue')['default']
-    Avatar: typeof import('primevue/avatar')['default']
     BaseDivider: typeof import('./../shared/BaseDivider.vue')['default']
     BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
     BaseSidebarMenu: typeof import('./../modules/BaseSidebarMenu.vue')['default']
@@ -33,7 +32,6 @@ declare module 'vue' {
     ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
     MenuHeader: typeof import('./../modules/MenuHeader.vue')['default']
-    page: typeof import('./../modules/Home page.vue')['default']
     PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
     PageHeader: typeof import('./../modules/PageHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
@@ -51,6 +49,5 @@ declare module 'vue' {
     TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
     ToggleSwitch: typeof import('primevue/toggleswitch')['default']
     Tree: typeof import('primevue/tree')['default']
-    UserInfoHeaderWithSettings: typeof import('./../components/UserInfoHeaderWithSettings.vue')['default']
   }
 }
diff --git a/src/modules/entities/EntityItem.vue b/src/modules/entities/EntityItem.vue
index d43a073..efbe165 100644
--- a/src/modules/entities/EntityItem.vue
+++ b/src/modules/entities/EntityItem.vue
@@ -15,7 +15,7 @@ const entity = useVModel(props, 'entity', emit);
   <div>
     <DividerItem
       v-if="entity.entity_type === 'divider'"
-      v-model:entityData="entity as IDivider"
+      :entityData="entity as IDivider"
       :isEditMode="isEditMode"
     />
     <TextItem
@@ -25,7 +25,7 @@ const entity = useVModel(props, 'entity', emit);
     />
     <ImageItem
       v-if="entity.entity_type === 'image'"
-      v-model:entityData="entity as IImage"
+      :entityData="entity as IImage"
       :isEditMode="isEditMode"
     />
   </div>
diff --git a/src/pages/authorization/signIn.vue b/src/pages/authorization/signIn.vue
index d879ed0..684b02d 100644
--- a/src/pages/authorization/signIn.vue
+++ b/src/pages/authorization/signIn.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
-<template></template>
+<template><div></div></template>
 
 <style scoped></style>
-- 
GitLab


From 71a0dd299a060777336a38b58bd736d48508b1fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sun, 8 Sep 2024 17:56:48 +0500
Subject: [PATCH 2/7] remove PrimeVue and add Modal and Drawer components

---
 package-lock.json                     | 109 --------------------------
 package.json                          |   4 -
 src/app/App.vue                       |   1 -
 src/app/assets/icons/close-circle.svg |   4 +
 src/app/components.d.ts               |  14 ++--
 src/app/main.ts                       |  34 +-------
 src/modules/BaseSidebarMenu.vue       |   2 +-
 src/modules/CropImageModal.vue        |  14 ++--
 src/modules/MenuHeader.vue            |  11 +--
 src/pages/[uuid]/SheetPage.vue        |  28 ++++---
 src/shared/BaseDivider.vue            |   2 +-
 src/shared/BaseDrawer.vue             |  85 ++++++++++++++++++++
 src/shared/BaseModal.vue              |  89 +++++++++++++++++++++
 src/shared/icons/CloseCircle.vue      |  26 ++++++
 src/shared/icons/HamgurgerMenu.vue    |  26 ++++++
 vite.config.ts                        |   2 -
 yarn.lock                             |  62 ---------------
 17 files changed, 266 insertions(+), 247 deletions(-)
 create mode 100644 src/app/assets/icons/close-circle.svg
 create mode 100644 src/shared/BaseDrawer.vue
 create mode 100644 src/shared/BaseModal.vue
 create mode 100644 src/shared/icons/CloseCircle.vue
 create mode 100644 src/shared/icons/HamgurgerMenu.vue

diff --git a/package-lock.json b/package-lock.json
index dadd3a1..9396ea8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,18 +8,14 @@
       "name": "ShelfNote",
       "version": "0.0.0",
       "dependencies": {
-        "@primevue/themes": "^4.0.4",
         "@vueuse/core": "^10.11.0",
         "pinia": "^2.1.7",
-        "primeicons": "^7.0.0",
-        "primevue": "^4.0.4",
         "tailwindcss": "^3.4.7",
         "vue": "^3.4.29",
         "vue-cookies": "^1.8.4",
         "vue-router": "^4.3.3"
       },
       "devDependencies": {
-        "@primevue/auto-import-resolver": "^4.0.4",
         "@rushstack/eslint-patch": "^1.8.0",
         "@tsconfig/node20": "^20.1.4",
         "@types/node": "^20.14.5",
@@ -418,91 +414,6 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/@primeuix/styled": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
-      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/utils": "^0.0.5"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primeuix/utils": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
-      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primevue/auto-import-resolver": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/auto-import-resolver/-/auto-import-resolver-4.0.4.tgz",
-      "integrity": "sha512-rI91rugr0/A58lmDcC4m3nxKdMh2K2O6ntQd+6UT8oFYiptJVNXQLY+U4zweAoG1toMnIoqGR20FXOTA7lS7ww==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@primevue/metadata": "4.0.4"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primevue/core": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.4.tgz",
-      "integrity": "sha512-xGD2hNYL4WLnkWuoxIjMIqEXiydYpFovDuCMHMWRl3yb/AFJcHpyZpUlgZ2HnJydA5ZsLS00sGsPHEoV5u2M8A==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/styled": "^0.0.5",
-        "@primeuix/utils": "^0.0.5"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
-    "node_modules/@primevue/icons": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.4.tgz",
-      "integrity": "sha512-eHOuO5jIv/qb3mpo3m1qpDKJxw/B8ZFpAcsKxV4uWhAXkxWo/afmykGO38PVabKc3SSai8bq1zFVXPA1w0cg9g==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/utils": "^0.0.5",
-        "@primevue/core": "4.0.4"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primevue/metadata": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.0.4.tgz",
-      "integrity": "sha512-j1Cb6qxuKDHyT0vjlFiLjiHILN7D6xC2zIaHRcYn0XcQS27r5ianzGFIiW98OVRFTUqWAf4k0TSCrgZPawPjRA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primevue/themes": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.4.tgz",
-      "integrity": "sha512-eknRgSo1KQY+r7LEtb/jERhVHq4/Vlu5BKBQ8/Sc/G3DBDHaeJTDqYHWWoTxdaTJkXbC2pJMKFaJ/Vs7LuoIOw==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/styled": "^0.0.5"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
@@ -2965,26 +2876,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/primeicons": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
-      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
-    },
-    "node_modules/primevue": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.4.tgz",
-      "integrity": "sha512-1moEddbczJ1+yEyfeYQk3xOQB64iCjjM//f+HSXs6YrKVVC0QjPFx9XPNXrr2JjHlp+6D7EpPZtsmcrfA9jWkA==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/styled": "^0.0.5",
-        "@primeuix/utils": "^0.0.5",
-        "@primevue/core": "4.0.4",
-        "@primevue/icons": "4.0.4"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index f799f2e..2ff40ec 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@primevue/themes": "^4.0.4",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
     "pinia": "^2.1.7",
-    "primeicons": "^7.0.0",
-    "primevue": "^4.0.4",
     "universal-cookie": "^7",
     "uuid": "^10.0.0",
     "vue": "^3.4.29",
@@ -26,7 +23,6 @@
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
-    "@primevue/auto-import-resolver": "^4.0.4",
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.14.5",
diff --git a/src/app/App.vue b/src/app/App.vue
index 32edf7f..8b88d7d 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import 'primeicons/primeicons.css';
 import cookies from '@/app/plugins/Cookie';
 onMounted(() => {
   const home_uuidFromLS = cookies.get('home_uuid');
diff --git a/src/app/assets/icons/close-circle.svg b/src/app/assets/icons/close-circle.svg
new file mode 100644
index 0000000..6d3a6e8
--- /dev/null
+++ b/src/app/assets/icons/close-circle.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z" fill="#1C274C"/>
+</svg>
\ No newline at end of file
diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 6641692..7908541 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -2,7 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {}
+export {};
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -12,16 +12,17 @@ declare module 'vue' {
     BaseDivider: typeof import('./../shared/BaseDivider.vue')['default']
     BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
     BaseSidebarMenu: typeof import('./../modules/BaseSidebarMenu.vue')['default']
-    Button: typeof import('primevue/button')['default']
     CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']
     CropImageModal: typeof import('./../modules/CropImageModal.vue')['default']
     DashedIcon: typeof import('./../shared/icons/DashedIcon.vue')['default']
-    Dialog: typeof import('primevue/dialog')['default']
-    Divider: typeof import('primevue/divider')['default']
+    ToggleSwitch: typeof import('primevue/toggleswitch')['default']
+    // Dialog: typeof import('primevue/dialog')['default']
+    // Drawer: typeof import('primevue/drawer')['default']
+    SpeedDial: typeof import('primevue/speeddial')['default']
+    Tree: typeof import('primevue/tree')['default']
     DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']
     DividerMenu: typeof import('./../modules/entities/menu/DividerMenu.vue')['default']
     DottedIcon: typeof import('./../shared/icons/DottedIcon.vue')['default']
-    Drawer: typeof import('primevue/drawer')['default']
     EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default']
     EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default']
     EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
@@ -40,14 +41,11 @@ declare module 'vue' {
     SignIn: typeof import('./../pages/authorization/signIn.vue')['default']
     SignUp: typeof import('./../pages/authorization/signUp.vue')['default']
     SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']
-    SpeedDial: typeof import('primevue/speeddial')['default']
     TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
     TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
     TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
     TextMenu: typeof import('./../modules/entities/menu/TextMenu.vue')['default']
     TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
     TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
-    ToggleSwitch: typeof import('primevue/toggleswitch')['default']
-    Tree: typeof import('primevue/tree')['default']
   }
 }
diff --git a/src/app/main.ts b/src/app/main.ts
index dd3a5c7..73720b0 100644
--- a/src/app/main.ts
+++ b/src/app/main.ts
@@ -2,40 +2,8 @@ import '@/app/assets/main.css';
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
 import App from './App.vue';
 import router from './router';
-import Aura from '@primevue/themes/aura';
-import { definePreset } from '@primevue/themes';
 
 const app = createApp(App);
-const theme = 'sky';
-const MyPreset = definePreset(Aura, {
-  semantic: {
-    primary: {
-      50: `{${theme}.50}`,
-      100: `{${theme}.100}`,
-      200: `{${theme}.200}`,
-      300: `{${theme}.300}`,
-      400: `{${theme}.400}`,
-      500: `{${theme}.500}`,
-      600: `{${theme}.600}`,
-      700: `{${theme}.700}`,
-      800: `{${theme}.800}`,
-      900: `{${theme}.900}`,
-      950: `{${theme}.950}`
-    }
-  }
-});
-app
-  .use(PrimeVue, {
-    theme: {
-      preset: MyPreset,
-      options: {
-        // darkModeSelector: '.darkModeToggle'
-      }
-    }
-  })
-  .use(createPinia())
-  .use(router)
-  .mount('#app');
+app.use(createPinia()).use(router).mount('#app');
diff --git a/src/modules/BaseSidebarMenu.vue b/src/modules/BaseSidebarMenu.vue
index b9fd5f8..b46b63e 100644
--- a/src/modules/BaseSidebarMenu.vue
+++ b/src/modules/BaseSidebarMenu.vue
@@ -33,7 +33,7 @@ onMounted(() => {
 <template>
   <div class="flex flex-col h-full p-4">
     <MenuHeader @closeMenu="emit('closeMenu')" />
-    <Divider />
+    <BaseDivider />
     <nav>
       <h3 class="text-xl">Menu</h3>
       <div style="margin-left: 58px" class="mt-4 -mb-2 select-none font-bold">
diff --git a/src/modules/CropImageModal.vue b/src/modules/CropImageModal.vue
index cfbf78c..0f7b65b 100644
--- a/src/modules/CropImageModal.vue
+++ b/src/modules/CropImageModal.vue
@@ -90,11 +90,12 @@ const submitForm = () => {
 
 <template>
   <div>
-    <Dialog
-      v-model:visible="isVisible"
-      :draggable="false"
-      :style="`width: ${modalWidth}%; position: relative`"
-    >
+    <!--    <Dialog-->
+    <!--      v-model:visible="isVisible"-->
+    <!--      :draggable="false"-->
+    <!--      :style="`width: ${modalWidth}%; position: relative`"-->
+    <!--    >-->
+    <BaseModal v-model:isVisible="isVisible" :style="`width: ${modalWidth}%; position: relative`">
       <template #header>
         <div class="mx-auto select-none">
           <i
@@ -128,7 +129,8 @@ const submitForm = () => {
           @change="onCropperChange"
         ></Cropper>
       </div>
-    </Dialog>
+    </BaseModal>
+    <!--    </Dialog>-->
   </div>
 </template>
 
diff --git a/src/modules/MenuHeader.vue b/src/modules/MenuHeader.vue
index 9b94a4d..d47b701 100644
--- a/src/modules/MenuHeader.vue
+++ b/src/modules/MenuHeader.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAuthorizationStore } from '@/app/stores/authorization';
+import CloseCircle from '@/shared/icons/CloseCircle.vue';
 
 const emit = defineEmits(['closeMenu']);
 const authorizationStore = useAuthorizationStore();
@@ -13,13 +14,9 @@ const logout = () => {
 <template>
   <section class="flex justify-between items-center mb-4">
     <LogoAndLabel />
-    <Button
-      severity="danger"
-      icon="pi pi-times"
-      rounded
-      outlined
-      @click="emit('closeMenu')"
-    ></Button>
+    <button @click="emit('closeMenu')">
+      <CloseCircle color="red" size="30" />
+    </button>
   </section>
   <section class="flex items-center justify-between">
     <div>
diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue
index e96dd05..2470a59 100644
--- a/src/pages/[uuid]/SheetPage.vue
+++ b/src/pages/[uuid]/SheetPage.vue
@@ -8,6 +8,8 @@ import type { IImageMainInfo } from '@/app/interfaces';
 import { createEntity, fetchForEntities, setDefaultPageBackground } from '@/app/helpers';
 import TelegramSection from '@/modules/TelegramSection.vue';
 import cookies from '@/app/plugins/Cookie';
+import HamgurgerMenu from '@/shared/icons/HamgurgerMenu.vue';
+import BaseDrawer from '@/shared/BaseDrawer.vue';
 
 const dataStore = useDataStore();
 const interfaceStore = useInterfaceStore();
@@ -74,25 +76,25 @@ const saveImage = (finalImageUrl: string) => {
   interfaceStore.editPageBackground(finalImageUrl);
   isModalUploadFile.value = false;
 };
+const closeMenu = () => (isMenuVisible.value = false);
 </script>
 
 <template>
   <PageHeader v-model:isEditMode="isEditMode" :title="'Home page'" />
   <div class="fixed top-0 left-0 z-50">
-    <Button
-      label="Menu"
-      iconPos="top"
-      icon="pi pi-bars"
-      severity="contrast"
-      size="small"
-      @click.prevent="isMenuVisible = !isMenuVisible"
-    />
+    <button @click.prevent="isMenuVisible = !isMenuVisible">
+      Menu
+      <HamgurgerMenu color="black" size="30" />
+    </button>
   </div>
-  <Drawer v-model:visible="isMenuVisible">
-    <template #container="{ closeCallback }">
-      <BaseSidebarMenu class="relative z-50" @closeMenu="closeCallback" />
-    </template>
-  </Drawer>
+  <BaseDrawer theme="dark" :isVisible="isMenuVisible">
+    <BaseSidebarMenu class="relative z-50" @closeMenu="closeMenu" />
+  </BaseDrawer>
+  <!--  <Drawer v-model:visible="isMenuVisible">-->
+  <!--    <template #container="{ closeCallback }">-->
+  <!--      <BaseSidebarMenu class="relative z-50" @closeMenu="closeCallback" />-->
+  <!--    </template>-->
+  <!--  </Drawer>-->
   <TelegramSection />
   <CropImageModal
     v-model:isVisible="isModalUploadFile"
diff --git a/src/shared/BaseDivider.vue b/src/shared/BaseDivider.vue
index 832cc94..ed05734 100644
--- a/src/shared/BaseDivider.vue
+++ b/src/shared/BaseDivider.vue
@@ -7,7 +7,7 @@ defineProps<Props>();
 </script>
 
 <template>
-  <div :style="`border-bottom: ${height ?? 1}px ${type || 'solid'} #6b7280`" class="w-full"></div>
+  <div :style="`border-bottom: ${height ?? 1}px ${type ?? 'solid'} #6b7280`" class="w-full"></div>
 </template>
 
 <style scoped></style>
diff --git a/src/shared/BaseDrawer.vue b/src/shared/BaseDrawer.vue
new file mode 100644
index 0000000..7d8f93e
--- /dev/null
+++ b/src/shared/BaseDrawer.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+  isVisible: boolean;
+  theme: 'light' | 'dark';
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isVisible']);
+const isVisible = useVModel(props, 'isVisible', emit);
+</script>
+
+<template>
+  <article>
+    <section
+      :class="[
+        'drawerBackground',
+        {
+          openedDrawerBackground: isVisible
+        }
+      ]"
+      @click.prevent="isVisible = false"
+    ></section>
+    <section
+      :style="`color: ${theme === 'light' ? 'black' : 'white'}; background-color: ${theme === 'light' ? 'white' : 'black'}`"
+      :class="[
+        'drawer',
+        {
+          openedDrawer: isVisible
+        }
+      ]"
+    >
+      <header class="drawerHeader">
+        <slot name="header" />
+        <button class="buttonClose" @click.prevent="isVisible = false">Cls</button>
+      </header>
+      <slot />
+    </section>
+  </article>
+</template>
+
+<style scoped>
+.drawerBackground {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: -50;
+  opacity: 0;
+}
+.openedDrawerBackground {
+  z-index: 60;
+  opacity: 1;
+}
+.drawer {
+  position: absolute;
+  top: 0;
+  z-index: -50;
+  width: 400px;
+  height: 100vh;
+  padding: 20px;
+  transform: translateX(-100%);
+  transition: all ease-out 0.25s;
+  border-right: 2px solid gray;
+}
+.openedDrawer {
+  z-index: 9999;
+  transform: translateX(0);
+}
+.drawerHeader {
+  font-weight: bold;
+  font-size: 1.5rem;
+  padding-right: 50px;
+  margin-bottom: 20px;
+  min-height: 1rem;
+}
+.buttonClose {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 30px;
+}
+</style>
diff --git a/src/shared/BaseModal.vue b/src/shared/BaseModal.vue
new file mode 100644
index 0000000..d9a1b2d
--- /dev/null
+++ b/src/shared/BaseModal.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import CloseCircle from '@/shared/icons/CloseCircle.vue';
+
+interface Props {
+  isVisible: boolean;
+  theme: 'light' | 'dark';
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isVisible']);
+const isVisible = useVModel(props, 'isVisible', emit);
+</script>
+
+<template>
+  <article>
+    <section
+      :class="[
+        'modalBackground',
+        {
+          openedModalBackground: isVisible
+        }
+      ]"
+    ></section>
+    <section
+      :style="`color: ${theme === 'light' ? 'black' : 'white'}; background-color: ${theme === 'light' ? 'white' : 'black'}`"
+      :class="[
+        'modal',
+        {
+          openedModal: isVisible
+        }
+      ]"
+    >
+      <header class="modalHeader">
+        <slot name="header" />
+        <button class="buttonClose" @click.prevent="isVisible = false">
+          <CloseCircle :color="theme === 'light' ? 'white' : 'black'" />
+        </button>
+      </header>
+      <slot />
+    </section>
+  </article>
+</template>
+
+<style scoped>
+.modalBackground {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: -50;
+  opacity: 0;
+}
+.openedModalBackground {
+  z-index: 60;
+  opacity: 1;
+}
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -50;
+  padding: 20px;
+  border: 2px solid gray;
+  border-radius: 10px;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.5);
+  transition: all ease-in-out 0.2s;
+}
+.openedModal {
+  z-index: 9999;
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+.modalHeader {
+  font-weight: bold;
+  font-size: 1.5rem;
+  padding-right: 50px;
+  margin-bottom: 20px;
+  min-height: 1rem;
+}
+.buttonClose {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 30px;
+}
+</style>
diff --git a/src/shared/icons/CloseCircle.vue b/src/shared/icons/CloseCircle.vue
new file mode 100644
index 0000000..688ad16
--- /dev/null
+++ b/src/shared/icons/CloseCircle.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    :fill="color ?? 'none'"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
+      fill="#1C274C"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/HamgurgerMenu.vue b/src/shared/icons/HamgurgerMenu.vue
new file mode 100644
index 0000000..bc67560
--- /dev/null
+++ b/src/shared/icons/HamgurgerMenu.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    :fill="color ?? 'none'"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355ZM18.75 16C18.75 16.4142 18.4142 16.75 18 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H18C18.4142 15.25 18.75 15.5858 18.75 16ZM18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H6C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75H18ZM18.75 8C18.75 8.41421 18.4142 8.75 18 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H18C18.4142 7.25 18.75 7.58579 18.75 8Z"
+      fill="#1C274C"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/vite.config.ts b/vite.config.ts
index 85a05cb..70a4224 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,6 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
-import { PrimeVueResolver } from '@primevue/auto-import-resolver';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,7 +19,6 @@ export default defineConfig({
       }
     }),
     Components({
-      resolvers: [PrimeVueResolver()],
       dts: 'src/app/components.d.ts',
       dirs: ['src/app', 'src/pages', 'src/modules', 'src/components', 'src/shared']
     }),
diff --git a/yarn.lock b/yarn.lock
index 3b5d4b2..fd7e72f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -480,53 +480,6 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
   integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
-"@primeuix/styled@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz"
-  integrity sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==
-  dependencies:
-    "@primeuix/utils" "^0.0.5"
-
-"@primeuix/utils@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz"
-  integrity sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==
-
-"@primevue/auto-import-resolver@^4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@primevue/auto-import-resolver/-/auto-import-resolver-4.0.4.tgz#33968037de9721065ff031cab67e0c58e56a41f5"
-  integrity sha512-rI91rugr0/A58lmDcC4m3nxKdMh2K2O6ntQd+6UT8oFYiptJVNXQLY+U4zweAoG1toMnIoqGR20FXOTA7lS7ww==
-  dependencies:
-    "@primevue/metadata" "4.0.4"
-
-"@primevue/core@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/@primevue/core/-/core-4.0.4.tgz"
-  integrity sha512-xGD2hNYL4WLnkWuoxIjMIqEXiydYpFovDuCMHMWRl3yb/AFJcHpyZpUlgZ2HnJydA5ZsLS00sGsPHEoV5u2M8A==
-  dependencies:
-    "@primeuix/styled" "^0.0.5"
-    "@primeuix/utils" "^0.0.5"
-
-"@primevue/icons@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.4.tgz"
-  integrity sha512-eHOuO5jIv/qb3mpo3m1qpDKJxw/B8ZFpAcsKxV4uWhAXkxWo/afmykGO38PVabKc3SSai8bq1zFVXPA1w0cg9g==
-  dependencies:
-    "@primeuix/utils" "^0.0.5"
-    "@primevue/core" "4.0.4"
-
-"@primevue/metadata@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@primevue/metadata/-/metadata-4.0.4.tgz#a107d56c121168cc90493eb8fd0e015e7bbc1b67"
-  integrity sha512-j1Cb6qxuKDHyT0vjlFiLjiHILN7D6xC2zIaHRcYn0XcQS27r5ianzGFIiW98OVRFTUqWAf4k0TSCrgZPawPjRA==
-
-"@primevue/themes@^4.0.4":
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.4.tgz"
-  integrity sha512-eknRgSo1KQY+r7LEtb/jERhVHq4/Vlu5BKBQ8/Sc/G3DBDHaeJTDqYHWWoTxdaTJkXbC2pJMKFaJ/Vs7LuoIOw==
-  dependencies:
-    "@primeuix/styled" "^0.0.5"
-
 "@rollup/pluginutils@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
@@ -4913,21 +4866,6 @@ pretty-error@^4.0.0:
     lodash "^4.17.20"
     renderkid "^3.0.0"
 
-primeicons@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz"
-  integrity sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==
-
-primevue@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/primevue/-/primevue-4.0.4.tgz"
-  integrity sha512-1moEddbczJ1+yEyfeYQk3xOQB64iCjjM//f+HSXs6YrKVVC0QjPFx9XPNXrr2JjHlp+6D7EpPZtsmcrfA9jWkA==
-  dependencies:
-    "@primeuix/styled" "^0.0.5"
-    "@primeuix/utils" "^0.0.5"
-    "@primevue/core" "4.0.4"
-    "@primevue/icons" "4.0.4"
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-- 
GitLab


From e55959585df18e6c397cb74bf982746d31d35625 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sun, 8 Sep 2024 19:45:02 +0500
Subject: [PATCH 3/7] toggleSwitch in progress

---
 src/shared/ToggleSwitch.vue | 87 +++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 src/shared/ToggleSwitch.vue

diff --git a/src/shared/ToggleSwitch.vue b/src/shared/ToggleSwitch.vue
new file mode 100644
index 0000000..e2b89cf
--- /dev/null
+++ b/src/shared/ToggleSwitch.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+  isActive: boolean;
+  size?: 'large' | 'extraLarge';
+  color?: string;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isActive']);
+const isActive = useVModel(props, 'isActive', emit);
+</script>
+
+<template>
+  <button
+    :style="`background-color: ${color ?? '#0ea5e9'}`"
+    :class="[
+      'switcher',
+      {
+        largeSwitcher: size === 'large',
+        extraLargeSwitcher: size === 'extraLarge',
+        activeSwitcher: isActive
+      }
+    ]"
+    @click.prevent="isActive = !isActive"
+  >
+    <div
+      :class="[
+        'switcherCircle',
+        {
+          largeSwitcherCircle: size === 'large',
+          extraLargeSwitcherCircle: size === 'extraLarge',
+          activeSwitcherCircle: isActive
+        }
+      ]"
+    ></div>
+  </button>
+</template>
+
+<style scoped>
+.switcher {
+  display: flex;
+  justify-content: start;
+  width: 30px;
+  height: 18px;
+  padding: 2px;
+  border-radius: 9px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.switcher:hover {
+  filter: brightness(90%);
+}
+.activeSwitcher {
+  justify-content: end;
+  background-color: black !important;
+}
+.largeSwitcher {
+  width: 35px;
+  height: 21px;
+  border-radius: 11px;
+}
+.extraLargeSwitcher {
+  width: 40px;
+  height: 24px;
+  border-radius: 12px;
+}
+.switcherCircle {
+  width: 14px;
+  height: 14px;
+  background-color: white;
+  border-radius: 50%;
+  float: left;
+  transition: all 0.2s ease-in-out;
+}
+.activeSwitcherCircle {
+  float: right;
+}
+.largeSwitcherCircle {
+  width: 17px;
+  height: 17px;
+}
+.extraLargeSwitcherCircle {
+  width: 20px;
+  height: 20px;
+}
+</style>
-- 
GitLab


From 6632f9bb0a407942e45543681d5508bc828edcf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Fri, 13 Sep 2024 18:09:01 +0500
Subject: [PATCH 4/7] change components after primevue in process

---
 src/app/assets/icons/close-circle.svg         |   2 +-
 src/app/assets/main.css                       |   4 +
 src/app/components.d.ts                       |  30 +-
 src/app/interfaces/environment.ts             |  25 +-
 src/app/stores/data.ts                        |  42 +--
 src/app/stores/interface.ts                   |   2 +
 .../entities/settings/DividerSettings.vue}    |   0
 .../settings/EntityPositionSettings.vue       |   7 +
 .../entities/settings}/ImageMenu.vue          |   0
 src/components/entities/settings/TextMenu.vue |  81 +++++
 src/modules/BaseSidebarMenu.vue               |  92 ++---
 src/modules/CropImageModal.vue                |   8 +-
 src/modules/MenuHeader.vue                    |  29 +-
 src/modules/PageBackgroundMenu.vue            |   2 +-
 src/modules/PageHeader.vue                    |   5 +-
 src/modules/entities/DividerItem.vue          |   5 +-
 src/modules/entities/ImageItem.vue            |   9 +-
 src/modules/entities/TextItem.vue             |  19 +-
 src/modules/entities/menu/TextMenu.vue        |  63 ----
 src/output.css                                |  66 +++-
 src/pages/[uuid]/SheetPage.vue                |  22 +-
 src/shared/BaseDrawer.vue                     |  85 -----
 src/shared/BaseModal.vue                      |  89 -----
 src/shared/Button.vue                         | 156 +++++++++
 src/shared/{BaseDivider.vue => Divider.vue}   |   0
 src/shared/Drawer.vue                         | 160 +++++++++
 src/shared/Modal.vue                          | 166 +++++++++
 src/shared/ToggleSwitch.vue                   | 166 ++++++---
 src/shared/Tree.vue                           | 320 ++++++++++++++++++
 src/shared/icons/CloseCircle.vue              |   2 +-
 src/shared/icons/ExitIcon.vue                 |  30 ++
 src/shared/icons/HamgurgerMenu.vue            |   2 +-
 src/shared/icons/HomeIcon.vue                 |  26 ++
 src/shared/icons/NavigationIcon.vue           |  30 ++
 src/shared/icons/SettingsIcon.vue             |  43 +++
 src/shared/icons/VerticalArrowsIcon.vue       |  34 ++
 36 files changed, 1356 insertions(+), 466 deletions(-)
 rename src/{modules/entities/menu/DividerMenu.vue => components/entities/settings/DividerSettings.vue} (100%)
 create mode 100644 src/components/entities/settings/EntityPositionSettings.vue
 rename src/{modules/entities/menu => components/entities/settings}/ImageMenu.vue (100%)
 create mode 100644 src/components/entities/settings/TextMenu.vue
 delete mode 100644 src/modules/entities/menu/TextMenu.vue
 delete mode 100644 src/shared/BaseDrawer.vue
 delete mode 100644 src/shared/BaseModal.vue
 create mode 100644 src/shared/Button.vue
 rename src/shared/{BaseDivider.vue => Divider.vue} (100%)
 create mode 100644 src/shared/Drawer.vue
 create mode 100644 src/shared/Modal.vue
 create mode 100644 src/shared/Tree.vue
 create mode 100644 src/shared/icons/ExitIcon.vue
 create mode 100644 src/shared/icons/HomeIcon.vue
 create mode 100644 src/shared/icons/NavigationIcon.vue
 create mode 100644 src/shared/icons/SettingsIcon.vue
 create mode 100644 src/shared/icons/VerticalArrowsIcon.vue

diff --git a/src/app/assets/icons/close-circle.svg b/src/app/assets/icons/close-circle.svg
index 6d3a6e8..22022e7 100644
--- a/src/app/assets/icons/close-circle.svg
+++ b/src/app/assets/icons/close-circle.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z" fill="#1C274C"/>
 </svg>
\ No newline at end of file
diff --git a/src/app/assets/main.css b/src/app/assets/main.css
index b7736c7..0c447b6 100644
--- a/src/app/assets/main.css
+++ b/src/app/assets/main.css
@@ -137,6 +137,7 @@
 }
 body {
   min-height: 100vh;
+  overflow-x: hidden;
 }
 #app {
   min-height: 100vh;
@@ -154,12 +155,15 @@ body {
   padding: 0;
   margin: 0;
   border: none;
+  box-sizing: border-box;
 }
 
 *,
 *::before,
 *::after {
   box-sizing: border-box;
+  user-select: none;
+  color: white;
 }
 
 /* Links */
diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 7908541..9d8258e 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -2,50 +2,60 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     App: typeof import('./App.vue')['default']
     AuthorizationForm: typeof import('./../modules/authorization/AuthorizationForm.vue')['default']
-    BaseDivider: typeof import('./../shared/BaseDivider.vue')['default']
     BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
     BaseSidebarMenu: typeof import('./../modules/BaseSidebarMenu.vue')['default']
+    Button: typeof import('./../shared/Button.vue')['default']
+    CloseCircle: typeof import('./../shared/icons/CloseCircle.vue')['default']
     CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']
     CropImageModal: typeof import('./../modules/CropImageModal.vue')['default']
     DashedIcon: typeof import('./../shared/icons/DashedIcon.vue')['default']
-    ToggleSwitch: typeof import('primevue/toggleswitch')['default']
-    // Dialog: typeof import('primevue/dialog')['default']
-    // Drawer: typeof import('primevue/drawer')['default']
-    SpeedDial: typeof import('primevue/speeddial')['default']
-    Tree: typeof import('primevue/tree')['default']
+    Divider: typeof import('./../shared/Divider.vue')['default']
     DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']
-    DividerMenu: typeof import('./../modules/entities/menu/DividerMenu.vue')['default']
+    DividerMenu: typeof import('./../modules/entities/settings/DividerMenu.vue')['default']
+    DividerSettings: typeof import('./../components/entities/settings/DividerSettings.vue')['default']
     DottedIcon: typeof import('./../shared/icons/DottedIcon.vue')['default']
+    Drawer: typeof import('./../shared/Drawer.vue')['default']
     EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default']
     EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default']
+    EntityPositionSettings: typeof import('./../components/entities/settings/EntityPositionSettings.vue')['default']
     EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
+    ExitIcon: typeof import('./../shared/icons/ExitIcon.vue')['default']
+    HamgurgerMenu: typeof import('./../shared/icons/HamgurgerMenu.vue')['default']
+    HomeIcon: typeof import('./../shared/icons/HomeIcon.vue')['default']
     ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
-    ImageMenu: typeof import('./../modules/entities/menu/ImageMenu.vue')['default']
+    ImageMenu: typeof import('./../components/entities/settings/ImageMenu.vue')['default']
     ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default']
     ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default']
     ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
     MenuHeader: typeof import('./../modules/MenuHeader.vue')['default']
+    Modal: typeof import('./../shared/Modal.vue')['default']
+    NavigationIcon: typeof import('./../shared/icons/NavigationIcon.vue')['default']
     PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
     PageHeader: typeof import('./../modules/PageHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SettingsIcon: typeof import('./../shared/icons/SettingsIcon.vue')['default']
     SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
     SignIn: typeof import('./../pages/authorization/signIn.vue')['default']
     SignUp: typeof import('./../pages/authorization/signUp.vue')['default']
     SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']
+    SpeedDial: typeof import('primevue/speeddial')['default']
     TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
     TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
     TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
-    TextMenu: typeof import('./../modules/entities/menu/TextMenu.vue')['default']
+    TextMenu: typeof import('./../components/entities/settings/TextMenu.vue')['default']
     TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
     TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
+    ToggleSwitch: typeof import('./../shared/ToggleSwitch.vue')['default']
+    Tree: typeof import('./../shared/Tree.vue')['default']
+    VerticalArrowsIcon: typeof import('./../shared/icons/VerticalArrowsIcon.vue')['default']
   }
 }
diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts
index 0abd796..f468b7f 100644
--- a/src/app/interfaces/environment.ts
+++ b/src/app/interfaces/environment.ts
@@ -37,11 +37,20 @@ export interface IEntity {
   }[];
 }
 
-export type TColors =
-  | 'green-blue'
-  | 'red-yellow'
-  | 'darkBlue-pink-orange'
-  | 'pink-lightBlue-green'
-  | 'pink-red-orange'
-  | 'pink-purple'
-  | 'purple-pink';
+export type TTheme =
+  | 'white'
+  | 'slate'
+  | 'blue'
+  | 'sky'
+  | 'teal'
+  | 'lime'
+  | 'green'
+  | 'yellow'
+  | 'orange'
+  | 'pink'
+  | 'fuchsia'
+  | 'purple'
+  | 'indigo'
+  | 'rose'
+  | 'red'
+  | 'black';
diff --git a/src/app/stores/data.ts b/src/app/stores/data.ts
index 6d30c22..ea60bfd 100644
--- a/src/app/stores/data.ts
+++ b/src/app/stores/data.ts
@@ -5,48 +5,30 @@ import cookies from '@/app/plugins/Cookie';
 export const useDataStore = defineStore('dataStore', () => {
   const sheets = ref([
     {
-      key: '0',
-      label: 'Личная жизнь',
-      data: '/0a49c3f4-57d2-4c82-be20-c7bab0abd623',
-      icon: 'pi pi-fw pi-inbox',
-      type: 'url',
+      text: 'Личная жизнь',
+      link: '/0a49c3f4-57d2-4c82-be20-c7bab0abd623',
       children: [
         {
-          key: '0-0',
-          label: 'Девушка',
-          data: '/f22dabd2-029b-46ae-8580-a8291449a051',
-          icon: 'pi pi-fw pi-cog',
-          type: 'url',
+          text: 'Девушка',
+          link: '/f22dabd2-029b-46ae-8580-a8291449a051',
           children: [
             {
-              key: '0-0-0',
-              label: 'Заморочки и проблемы и всё-всё-всё моей любимой девушки',
-              icon: 'pi pi-fw pi-file',
-              data: '/83ad3c89-64a2-428d-995c-8008d40cec8a',
-              type: 'url'
+              text: 'Заморочки и проблемы и всё-всё-всё моей любимой девушки',
+              link: '/83ad3c89-64a2-428d-995c-8008d40cec8a'
             },
             {
-              key: '0-0-1',
-              label: 'Любимые цветы девушки',
-              icon: 'pi pi-fw pi-file',
-              data: '/(uuid of sheet)',
-              type: 'url'
+              text: 'Любимые цветы девушки',
+              link: '/(uuid of sheet)'
             }
           ]
         },
         {
-          key: '0-1',
-          label: 'Работа',
-          data: '/81d8bc92-57cb-4ab2-89c2-63304bd0e5fb',
-          icon: 'pi pi-fw pi-home',
-          type: 'url',
+          text: 'Работа',
+          link: '/81d8bc92-57cb-4ab2-89c2-63304bd0e5fb',
           children: [
             {
-              key: '0-1-0',
-              label: 'Pet-projects',
-              icon: 'pi pi-fw pi-file',
-              data: '/(uuid of sheet)',
-              type: 'url'
+              text: 'Pet-projects',
+              link: '/(uuid of sheet)'
             }
           ]
         }
diff --git a/src/app/stores/interface.ts b/src/app/stores/interface.ts
index c12fa15..34f2f4a 100644
--- a/src/app/stores/interface.ts
+++ b/src/app/stores/interface.ts
@@ -4,6 +4,7 @@ import { useWebsocketStore } from '@/app/stores/websocket';
 export const useInterfaceStore = defineStore('interfaceStore', () => {
   const websocketStore = useWebsocketStore();
 
+  const isDarkMode = ref<boolean>(true);
   const defaultPageBackground = ref<string>(
     'https://t3.ftcdn.net/jpg/05/01/28/98/360_F_501289843_4ITbthNCydFQGgJmoZe4IQKchItBubqZ.jpg'
   );
@@ -44,6 +45,7 @@ export const useInterfaceStore = defineStore('interfaceStore', () => {
     pageBackground.value = url;
   }
   return {
+    isDarkMode,
     pageBackground,
     defaultPageBackground,
     isFetchedForBackground,
diff --git a/src/modules/entities/menu/DividerMenu.vue b/src/components/entities/settings/DividerSettings.vue
similarity index 100%
rename from src/modules/entities/menu/DividerMenu.vue
rename to src/components/entities/settings/DividerSettings.vue
diff --git a/src/components/entities/settings/EntityPositionSettings.vue b/src/components/entities/settings/EntityPositionSettings.vue
new file mode 100644
index 0000000..6177ca0
--- /dev/null
+++ b/src/components/entities/settings/EntityPositionSettings.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <MenuDial />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/menu/ImageMenu.vue b/src/components/entities/settings/ImageMenu.vue
similarity index 100%
rename from src/modules/entities/menu/ImageMenu.vue
rename to src/components/entities/settings/ImageMenu.vue
diff --git a/src/components/entities/settings/TextMenu.vue b/src/components/entities/settings/TextMenu.vue
new file mode 100644
index 0000000..1b054d4
--- /dev/null
+++ b/src/components/entities/settings/TextMenu.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { deleteEntity, editEntity } from '@/app/helpers';
+import type { IParagraph } from '@/app/interfaces/entities';
+import { useVModel } from '@vueuse/core';
+import type { TTheme } from '@/app/interfaces/environment';
+import cookies from '@/app/plugins/Cookie';
+
+interface Props {
+  entityData: IParagraph;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:entityData']);
+const entityData = useVModel(props, 'entityData', emit);
+const isModal = ref<boolean>(false);
+
+const addTitle = () => {
+  editEntity({ ...entityData.value, title: 'Title', entity_title_position: 'center' });
+  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
+};
+const removeTitle = () => {
+  const newState = { ...entityData.value };
+  newState.title = null;
+  editEntity({ ...newState });
+  entityData.value = newState;
+};
+const editPosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.entity_position = position;
+  editEntity({ ...entityData.value, entity_position: position });
+};
+const editTitlePosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.entity_title_position = position;
+  editEntity({ ...entityData.value, entity_title_position: position });
+};
+const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
+  entityData.value.font_size = newSize;
+  editEntity({ ...entityData.value, font_size: newSize });
+};
+const editParagraphWidth = (widthMode: 'full' | 'half') => {
+  entityData.value.paragraph_size = widthMode;
+  editEntity({ ...entityData.value, paragraph_size: widthMode });
+};
+const themeColor: TTheme = cookies.get('favorite_color');
+</script>
+
+<template>
+  <div
+    :style="`background-color: ${themeColor}`"
+    class="absolute left-2 top-0 transition-all select-none size-12 p-2 flex justify-center items-center rounded-full hover:brightness-75 cursor-pointer"
+    @click.prevent="isModal = true"
+  >
+    <SettingsIcon color="white" size="25" />
+  </div>
+  <Modal v-model:isVisible="isModal" theme="black"
+    ><template #header>Edit paragraph</template>
+    <div>
+      <select id="" name="textSize">
+        <option></option>
+      </select></div
+  ></Modal>
+  <!--  <div class="speedDial absolute left-2 top-0 transition-all select-none">-->
+  <!--    <TextStateMenu-->
+  <!--      :entityData="entityData"-->
+  <!--      @deleteEntity="deleteEntity"-->
+  <!--      @addTitle="addTitle"-->
+  <!--      @removeTitle="removeTitle"-->
+  <!--    />-->
+  <!--  </div>-->
+  <!--  <div class="speedDial h-12 absolute left-2 top-0 translate-y-full transition-all select-none">-->
+  <!--    <TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />-->
+  <!--  </div>-->
+  <!--  <div class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none">-->
+  <!--    <TextPositionMenu-->
+  <!--      :entityData="entityData"-->
+  <!--      @editPosition="editPosition"-->
+  <!--      @editTitlePosition="editTitlePosition"-->
+  <!--      @editParagraphWidth="editParagraphWidth"-->
+  <!--    />-->
+  <!--  </div>-->
+</template>
+
+<style scoped></style>
diff --git a/src/modules/BaseSidebarMenu.vue b/src/modules/BaseSidebarMenu.vue
index b46b63e..dd58ce5 100644
--- a/src/modules/BaseSidebarMenu.vue
+++ b/src/modules/BaseSidebarMenu.vue
@@ -1,65 +1,69 @@
 <script setup lang="ts">
 import { useDataStore } from '@/app/stores/data';
+import Tree from '@/shared/Tree.vue';
+import { useAuthorizationStore } from '@/app/stores/authorization';
+import HomeIcon from '@/shared/icons/HomeIcon.vue';
+
+const authorizationStore = useAuthorizationStore();
 
 const route = useRoute();
 const dataStore = useDataStore();
-const emit = defineEmits(['closeMenu']);
-
-const sheets = ref();
-const expandedKeys = ref({});
-
-const expandSheet = (sheet) => {
-  if (sheet.children && sheet.children.length) {
-    expandedKeys.value[sheet.key] = true;
+const userNickName = computed(() => authorizationStore.userNickName);
 
-    for (let child of sheet.children) {
-      expandSheet(child);
-    }
-  }
-};
-const expandAll = () => {
-  for (let sheet of sheets.value) {
-    expandSheet(sheet);
-  }
-  expandedKeys.value = { ...expandedKeys.value };
+const logout = () => {
+  authorizationStore.logout();
 };
+const sheets = ref();
 
 onMounted(() => {
   sheets.value = dataStore.sheets;
-  expandAll();
 });
 </script>
 
 <template>
-  <div class="flex flex-col h-full p-4">
-    <MenuHeader @closeMenu="emit('closeMenu')" />
-    <BaseDivider />
-    <nav>
+  <div class="flex flex-col">
+    <section class="flex items-center justify-between">
+      <div>
+        <p class="text-xl w-48 overflow-ellipsis overflow-hidden text-nowrap">
+          @{{ userNickName }}
+        </p>
+      </div>
+      <a
+        href="/settings"
+        class="pi pi-cog ml-auto mr-1 p-2 hover:cursor-pointer"
+        style="font-size: 2rem"
+      ></a>
+      <SettingsIcon
+        class="p-2 cursor-pointer hover:brightness-75 transition-all"
+        color="white"
+        size="50"
+      />
+      <button @click.prevent="logout">
+        <ExitIcon color="#f00" class="hover:brightness-75 transition-all" />
+      </button>
+    </section>
+    <Divider class="mt-4" />
+    <nav class="mt-4">
       <h3 class="text-xl">Menu</h3>
-      <div style="margin-left: 58px" class="mt-4 -mb-2 select-none font-bold">
-        <a v-if="route.path !== '/'" href="/"
-          ><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</a
+      <div class="mt-4 -mb-2 ml-4 select-none font-bold">
+        <a v-if="route.path !== '/'" href="/" class="text-lg flex gap-4"
+          ><HomeIcon color="white" size="20" />Главное меню</a
         >
         <span v-else><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</span>
       </div>
-      <Tree
-        v-model:expandedKeys="expandedKeys"
-        :value="sheets"
-        pt:root:class="pl-0"
-        pt:sheetLabel:class="text-white"
-      >
-        <template #url="slotProps">
-          <a
-            :href="slotProps.node.data"
-            :class="[
-              'block',
-              {
-                'bg-sky-900 p-2 ml-0 -m-2 rounded-md': route.path === slotProps.node.data
-              }
-            ]"
-            >{{ slotProps.node.label }}</a
-          >
-        </template>
+      <Tree :expand="true" theme="black" :items="sheets">
+        <!--        <template #url="slotProps">-->
+        <!--          <a-->
+        <!--            :href="slotProps.node.data"-->
+        <!--            :class="[-->
+        <!--              'block',-->
+        <!--              {-->
+        <!--                'bg-sky-900 p-2 ml-0 -m-2 rounded-md': route.path === slotProps.node.data-->
+        <!--              }-->
+        <!--            ]"-->
+        <!--            >{{ slotProps.node.label }}</a-->
+        <!--          >-->
+        <!--        </template>-->
       </Tree>
     </nav>
   </div>
diff --git a/src/modules/CropImageModal.vue b/src/modules/CropImageModal.vue
index 0f7b65b..1e4c5eb 100644
--- a/src/modules/CropImageModal.vue
+++ b/src/modules/CropImageModal.vue
@@ -95,7 +95,11 @@ const submitForm = () => {
     <!--      :draggable="false"-->
     <!--      :style="`width: ${modalWidth}%; position: relative`"-->
     <!--    >-->
-    <BaseModal v-model:isVisible="isVisible" :style="`width: ${modalWidth}%; position: relative`">
+    <Modal
+      v-model:isVisible="isVisible"
+      :style="`width: ${modalWidth}%; position: relative`"
+      theme="black"
+    >
       <template #header>
         <div class="mx-auto select-none">
           <i
@@ -129,7 +133,7 @@ const submitForm = () => {
           @change="onCropperChange"
         ></Cropper>
       </div>
-    </BaseModal>
+    </Modal>
     <!--    </Dialog>-->
   </div>
 </template>
diff --git a/src/modules/MenuHeader.vue b/src/modules/MenuHeader.vue
index d47b701..b2e8700 100644
--- a/src/modules/MenuHeader.vue
+++ b/src/modules/MenuHeader.vue
@@ -1,35 +1,8 @@
-<script setup lang="ts">
-import { useAuthorizationStore } from '@/app/stores/authorization';
-import CloseCircle from '@/shared/icons/CloseCircle.vue';
-
-const emit = defineEmits(['closeMenu']);
-const authorizationStore = useAuthorizationStore();
-const userNickName = computed(() => authorizationStore.userNickName);
-
-const logout = () => {
-  authorizationStore.logout();
-};
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <section class="flex justify-between items-center mb-4">
     <LogoAndLabel />
-    <button @click="emit('closeMenu')">
-      <CloseCircle color="red" size="30" />
-    </button>
-  </section>
-  <section class="flex items-center justify-between">
-    <div>
-      <p class="text-xl w-48 overflow-ellipsis overflow-hidden text-nowrap">@{{ userNickName }}</p>
-    </div>
-    <a
-      href="/settings"
-      class="pi pi-cog ml-auto mr-1 p-2 hover:cursor-pointer"
-      style="font-size: 2rem"
-    ></a>
-    <button @click.prevent="logout">
-      <i class="pi pi-sign-out text-red-500 p-2" style="font-size: 1.5rem"></i>
-    </button>
   </section>
 </template>
 
diff --git a/src/modules/PageBackgroundMenu.vue b/src/modules/PageBackgroundMenu.vue
index c7c0be0..d120564 100644
--- a/src/modules/PageBackgroundMenu.vue
+++ b/src/modules/PageBackgroundMenu.vue
@@ -7,7 +7,7 @@ const emit = defineEmits(['uploadFile', 'setDefaultBackground']);
 </script>
 
 <template>
-  <section class="changeImageBlock absolute top-2 right-2 transition-all">
+  <section class="changeImageBlock absolute top-2 right-6 transition-all">
     <div
       class="bg-black p-2 mb-1 rounded-md hover:text-gray-300 transition-all select-none cursor-pointer"
     >
diff --git a/src/modules/PageHeader.vue b/src/modules/PageHeader.vue
index 967c7ad..7b5a0bf 100644
--- a/src/modules/PageHeader.vue
+++ b/src/modules/PageHeader.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
+import cookies from '@/app/plugins/Cookie';
+import type { TTheme } from '@/app/interfaces/environment';
 
 interface Props {
   title: string;
@@ -8,6 +10,7 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits(['update:isEditMode']);
 const isEditMode = useVModel(props, 'isEditMode', emit);
+const themeColor: TTheme = cookies.get('favorite_color');
 </script>
 
 <template>
@@ -18,7 +21,7 @@ const isEditMode = useVModel(props, 'isEditMode', emit);
       @click.prevent="isEditMode = !isEditMode"
     >
       <span class="font-medium select-none">Edit mode</span>
-      <ToggleSwitch v-model="isEditMode" />
+      <ToggleSwitch :isActive="isEditMode" :theme="themeColor" />
     </button>
   </header>
 </template>
diff --git a/src/modules/entities/DividerItem.vue b/src/modules/entities/DividerItem.vue
index cd1ee2a..d8adc5d 100644
--- a/src/modules/entities/DividerItem.vue
+++ b/src/modules/entities/DividerItem.vue
@@ -10,8 +10,9 @@ defineProps<Props>();
 
 <template>
   <section class="entityContainer relative px-16 py-6">
-    <BaseDivider :type="entityData.divider_type" :height="entityData.divider_height" />
-    <DividerMenu v-if="isEditMode" :entityData="entityData" />
+    <Divider :type="entityData.divider_type" :height="entityData.divider_height" />
+    <DividerSettings v-if="isEditMode" :entityData="entityData" />
+    <EntityPositionSettings />
   </section>
 </template>
 
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 1d5fb07..3dce9b4 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -118,14 +118,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
         v-model:entityData="entityData"
         @openCropImageModal="openCropImageModal"
       />
-      <div
-        v-if="!entityData?.title && entityData.image_height < 137"
-        class="aggregateHigh h-0 transition-all"
-      ></div>
-      <div
-        v-if="!entityData?.title && entityData.image_height >= 137 && entityData.image_height < 167"
-        class="aggregateShort h-0 transition-all"
-      ></div>
+      <EntityPositionSettings />
     </div>
   </section>
 </template>
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index d14a5a9..3d51198 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -64,25 +64,8 @@ const { height: textareaHeight } = useElementSize(textarea);
           @input="triggerResize"
         />
       </div>
-      <div
-        v-if="!entityData?.title && textareaHeight < 87 && isEditMode"
-        class="aggregateHigh transition-all h-0"
-      ></div>
-      <div
-        v-if="
-          (!entityData?.title && textareaHeight >= 87 && textareaHeight < 132 && isEditMode) ||
-          (entityData?.title && textareaHeight < 65 && isEditMode)
-        "
-        class="aggregateMedium transition-all h-0"
-      ></div>
-      <div
-        v-if="
-          (!entityData?.title && textareaHeight >= 132 && textareaHeight < 167 && isEditMode) ||
-          (entityData?.title && textareaHeight >= 65 && textareaHeight < 100 && isEditMode)
-        "
-        class="aggregateShort transition-all h-0"
-      ></div>
       <TextMenu v-if="isEditMode" v-model:entityData="entityData" />
+      <EntityPositionSettings />
     </div>
   </section>
 </template>
diff --git a/src/modules/entities/menu/TextMenu.vue b/src/modules/entities/menu/TextMenu.vue
deleted file mode 100644
index 91eaf4c..0000000
--- a/src/modules/entities/menu/TextMenu.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { deleteEntity, editEntity } from '@/app/helpers';
-import type { IParagraph } from '@/app/interfaces/entities';
-import { useVModel } from '@vueuse/core';
-
-interface Props {
-  entityData: IParagraph;
-}
-const props = defineProps<Props>();
-const emit = defineEmits(['update:entityData']);
-const entityData = useVModel(props, 'entityData', emit);
-
-const addTitle = () => {
-  editEntity({ ...entityData.value, title: 'Title', entity_title_position: 'center' });
-  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
-};
-const removeTitle = () => {
-  const newState = { ...entityData.value };
-  newState.title = null;
-  editEntity({ ...newState });
-  entityData.value = newState;
-};
-const editPosition = (position: 'left' | 'center' | 'right') => {
-  entityData.value.entity_position = position;
-  editEntity({ ...entityData.value, entity_position: position });
-};
-const editTitlePosition = (position: 'left' | 'center' | 'right') => {
-  entityData.value.entity_title_position = position;
-  editEntity({ ...entityData.value, entity_title_position: position });
-};
-const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
-  entityData.value.font_size = newSize;
-  editEntity({ ...entityData.value, font_size: newSize });
-};
-const editParagraphWidth = (widthMode: 'full' | 'half') => {
-  entityData.value.paragraph_size = widthMode;
-  editEntity({ ...entityData.value, paragraph_size: widthMode });
-};
-</script>
-
-<template>
-  <div class="speedDial absolute left-2 top-0 transition-all select-none">
-    <TextStateMenu
-      :entityData="entityData"
-      @deleteEntity="deleteEntity"
-      @addTitle="addTitle"
-      @removeTitle="removeTitle"
-    />
-  </div>
-  <div class="speedDial h-12 absolute left-2 top-0 translate-y-full transition-all select-none">
-    <TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
-  </div>
-  <div class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none">
-    <TextPositionMenu
-      :entityData="entityData"
-      @editPosition="editPosition"
-      @editTitlePosition="editTitlePosition"
-      @editParagraphWidth="editParagraphWidth"
-    />
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/output.css b/src/output.css
index a5cbb16..4c24ee2 100644
--- a/src/output.css
+++ b/src/output.css
@@ -628,10 +628,6 @@ video {
   left: 0.5rem;
 }
 
-.right-2 {
-  right: 0.5rem;
-}
-
 .right-6 {
   right: 1.5rem;
 }
@@ -718,6 +714,10 @@ video {
   margin-left: 0px;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -762,6 +762,10 @@ video {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .size-10 {
   width: 2.5rem;
   height: 2.5rem;
@@ -1178,10 +1182,6 @@ video {
   padding-bottom: 1.5rem;
 }
 
-.pl-0 {
-  padding-left: 0px;
-}
-
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1247,6 +1247,10 @@ video {
   font-weight: 600;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -1255,6 +1259,11 @@ video {
   line-height: 1.5;
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1265,11 +1274,6 @@ video {
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1291,6 +1295,14 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1301,11 +1313,39 @@ video {
   transition-duration: 300ms;
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
 
+.hover\:bg-slate-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-slate-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.hover\:brightness-75:hover {
+  --tw-brightness: brightness(.75);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.hover\:brightness-125:hover {
+  --tw-brightness: brightness(1.25);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
\ No newline at end of file
diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue
index 2470a59..8f15594 100644
--- a/src/pages/[uuid]/SheetPage.vue
+++ b/src/pages/[uuid]/SheetPage.vue
@@ -6,10 +6,7 @@ import { useWebsocketStore } from '@/app/stores/websocket';
 import type { IEntity } from '@/app/interfaces/environment';
 import type { IImageMainInfo } from '@/app/interfaces';
 import { createEntity, fetchForEntities, setDefaultPageBackground } from '@/app/helpers';
-import TelegramSection from '@/modules/TelegramSection.vue';
 import cookies from '@/app/plugins/Cookie';
-import HamgurgerMenu from '@/shared/icons/HamgurgerMenu.vue';
-import BaseDrawer from '@/shared/BaseDrawer.vue';
 
 const dataStore = useDataStore();
 const interfaceStore = useInterfaceStore();
@@ -21,6 +18,7 @@ const entities = computed(() => dataStore.entities);
 const backgroundUrl = computed<string>(() => interfaceStore.pageBackground);
 const defaultBackgroundUrl = computed<string>(() => interfaceStore.defaultPageBackground);
 const isFetchedForBackground = computed(() => interfaceStore.isFetchedForBackground);
+const isDarkMode = computed(() => interfaceStore.isDarkMode);
 // const pageTitle = computed(() => dataStore.currentPage.page_title);
 
 const isMenuVisible = ref<boolean>(false);
@@ -82,14 +80,18 @@ const closeMenu = () => (isMenuVisible.value = false);
 <template>
   <PageHeader v-model:isEditMode="isEditMode" :title="'Home page'" />
   <div class="fixed top-0 left-0 z-50">
-    <button @click.prevent="isMenuVisible = !isMenuVisible">
+    <button
+      class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md"
+      @click.prevent="isMenuVisible = !isMenuVisible"
+    >
       Menu
-      <HamgurgerMenu color="black" size="30" />
+      <HamgurgerMenu color="white" size="40" />
     </button>
   </div>
-  <BaseDrawer theme="dark" :isVisible="isMenuVisible">
+  <Drawer v-model:isVisible="isMenuVisible" theme="black">
+    <template #header><MenuHeader /></template>
     <BaseSidebarMenu class="relative z-50" @closeMenu="closeMenu" />
-  </BaseDrawer>
+  </Drawer>
   <!--  <Drawer v-model:visible="isMenuVisible">-->
   <!--    <template #container="{ closeCallback }">-->
   <!--      <BaseSidebarMenu class="relative z-50" @closeMenu="closeCallback" />-->
@@ -101,7 +103,11 @@ const closeMenu = () => (isMenuVisible.value = false);
     v-model:imageInfo="backgroundImageInfo"
     @saveImage="saveImage"
   />
-  <main id="pageContainer" class="flex flex-col">
+  <main
+    id="pageContainer"
+    class="flex flex-col"
+    :style="`background-color: ${isDarkMode ? 'black' : 'light'}`"
+  >
     <article style="min-height: 200px" class="backgroundContainer relative">
       <img
         :src="backgroundUrl"
diff --git a/src/shared/BaseDrawer.vue b/src/shared/BaseDrawer.vue
deleted file mode 100644
index 7d8f93e..0000000
--- a/src/shared/BaseDrawer.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core';
-
-interface Props {
-  isVisible: boolean;
-  theme: 'light' | 'dark';
-}
-const props = defineProps<Props>();
-const emit = defineEmits(['update:isVisible']);
-const isVisible = useVModel(props, 'isVisible', emit);
-</script>
-
-<template>
-  <article>
-    <section
-      :class="[
-        'drawerBackground',
-        {
-          openedDrawerBackground: isVisible
-        }
-      ]"
-      @click.prevent="isVisible = false"
-    ></section>
-    <section
-      :style="`color: ${theme === 'light' ? 'black' : 'white'}; background-color: ${theme === 'light' ? 'white' : 'black'}`"
-      :class="[
-        'drawer',
-        {
-          openedDrawer: isVisible
-        }
-      ]"
-    >
-      <header class="drawerHeader">
-        <slot name="header" />
-        <button class="buttonClose" @click.prevent="isVisible = false">Cls</button>
-      </header>
-      <slot />
-    </section>
-  </article>
-</template>
-
-<style scoped>
-.drawerBackground {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: -50;
-  opacity: 0;
-}
-.openedDrawerBackground {
-  z-index: 60;
-  opacity: 1;
-}
-.drawer {
-  position: absolute;
-  top: 0;
-  z-index: -50;
-  width: 400px;
-  height: 100vh;
-  padding: 20px;
-  transform: translateX(-100%);
-  transition: all ease-out 0.25s;
-  border-right: 2px solid gray;
-}
-.openedDrawer {
-  z-index: 9999;
-  transform: translateX(0);
-}
-.drawerHeader {
-  font-weight: bold;
-  font-size: 1.5rem;
-  padding-right: 50px;
-  margin-bottom: 20px;
-  min-height: 1rem;
-}
-.buttonClose {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  width: 30px;
-}
-</style>
diff --git a/src/shared/BaseModal.vue b/src/shared/BaseModal.vue
deleted file mode 100644
index d9a1b2d..0000000
--- a/src/shared/BaseModal.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core';
-import CloseCircle from '@/shared/icons/CloseCircle.vue';
-
-interface Props {
-  isVisible: boolean;
-  theme: 'light' | 'dark';
-}
-const props = defineProps<Props>();
-const emit = defineEmits(['update:isVisible']);
-const isVisible = useVModel(props, 'isVisible', emit);
-</script>
-
-<template>
-  <article>
-    <section
-      :class="[
-        'modalBackground',
-        {
-          openedModalBackground: isVisible
-        }
-      ]"
-    ></section>
-    <section
-      :style="`color: ${theme === 'light' ? 'black' : 'white'}; background-color: ${theme === 'light' ? 'white' : 'black'}`"
-      :class="[
-        'modal',
-        {
-          openedModal: isVisible
-        }
-      ]"
-    >
-      <header class="modalHeader">
-        <slot name="header" />
-        <button class="buttonClose" @click.prevent="isVisible = false">
-          <CloseCircle :color="theme === 'light' ? 'white' : 'black'" />
-        </button>
-      </header>
-      <slot />
-    </section>
-  </article>
-</template>
-
-<style scoped>
-.modalBackground {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: -50;
-  opacity: 0;
-}
-.openedModalBackground {
-  z-index: 60;
-  opacity: 1;
-}
-.modal {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: -50;
-  padding: 20px;
-  border: 2px solid gray;
-  border-radius: 10px;
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(0.5);
-  transition: all ease-in-out 0.2s;
-}
-.openedModal {
-  z-index: 9999;
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-.modalHeader {
-  font-weight: bold;
-  font-size: 1.5rem;
-  padding-right: 50px;
-  margin-bottom: 20px;
-  min-height: 1rem;
-}
-.buttonClose {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  width: 30px;
-}
-</style>
diff --git a/src/shared/Button.vue b/src/shared/Button.vue
new file mode 100644
index 0000000..904c8fb
--- /dev/null
+++ b/src/shared/Button.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  label?: string
+  iconPos?: 'left' | 'top' | 'right' | 'bottom'
+  textStyle?: 'bold' | 'italic'
+  border?: 'white' | 'black'
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black'
+}
+const props = defineProps<Props>()
+const colorTheme = computed(() => {
+  if (!props?.theme) return '#0ea5e9'
+  switch (props?.theme) {
+    case 'white':
+      return '#ffffff'
+    case 'slate':
+      return '#64748b'
+    case 'blue':
+      return '#3b82f6'
+    case 'sky':
+      return '#0ea5e9'
+    case 'teal':
+      return '#14b8a6'
+    case 'lime':
+      return '#84cc16'
+    case 'green':
+      return '#22c55e'
+    case 'yellow':
+      return '#eab308'
+    case 'orange':
+      return '#f97316'
+    case 'pink':
+      return '#ec4899'
+    case 'fuchsia':
+      return '#d946ef'
+    case 'purple':
+      return '#a855f7'
+    case 'indigo':
+      return '#6366f1'
+    case 'rose':
+      return '#f43f5e'
+    case 'red':
+      return '#ef4444'
+    case 'black':
+      return '#000000'
+  }
+  return '#ffffff'
+})
+const textColor = computed(() => {
+  if (!props.theme) return '#ffffff'
+  if (props.theme === 'white') return '#000000'
+  return '#ffffff'
+})
+</script>
+
+<template>
+  <button
+    :class="[
+      'button',
+      {
+        'flex-column': iconPos === 'top' || iconPos === 'bottom',
+        'border-black': theme === 'white' || border === 'black',
+        'border-white': border === 'white'
+      }
+    ]"
+  >
+    <span :style="`background-color: ${colorTheme}`" class="background"></span>
+    <span
+      :class="[
+        'icon',
+        {
+          'order-2': iconPos === 'right' || iconPos === 'bottom'
+        }
+      ]"
+    >
+      <slot name="icon" />
+    </span>
+    <span
+      :style="`color: ${textColor}`"
+      :class="[
+        'text',
+        {
+          bold: textStyle === 'bold',
+          italic: textStyle === 'italic'
+        }
+      ]"
+      >{{ label ?? 'Button' }}</span
+    >
+  </button>
+</template>
+
+<style scoped>
+.button {
+  position: relative;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+.button:hover .background {
+  filter: brightness(90%);
+}
+.background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  border-radius: 5px;
+  transition: filter 0.2s ease-in-out;
+}
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.text {
+  padding: 0.75rem 0.5rem;
+}
+.flex-column {
+  flex-direction: column;
+}
+.border-black {
+  border: 1px solid black;
+}
+.border-white {
+  border: 1px solid white;
+}
+.order-2 {
+  order: 2;
+}
+.bold {
+  font-weight: bold;
+}
+.italic {
+  font-style: italic;
+}
+</style>
diff --git a/src/shared/BaseDivider.vue b/src/shared/Divider.vue
similarity index 100%
rename from src/shared/BaseDivider.vue
rename to src/shared/Divider.vue
diff --git a/src/shared/Drawer.vue b/src/shared/Drawer.vue
new file mode 100644
index 0000000..50dfbf4
--- /dev/null
+++ b/src/shared/Drawer.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { computed } from 'vue';
+
+interface Props {
+  isVisible: boolean;
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
+}
+const props = defineProps<Props>();
+const colorTheme = computed(() => {
+  if (!props?.theme) return '#0ea5e9';
+  switch (props?.theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+    case 'black':
+      return '#000000';
+  }
+  return '#ffffff';
+});
+const textColor = computed(() => {
+  if (!props.theme) return '#000000';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
+const emit = defineEmits(['update:isVisible']);
+const isVisible = useVModel(props, 'isVisible', emit);
+</script>
+
+<template>
+  <article>
+    <section
+      :class="[
+        'drawerBackground',
+        {
+          openedDrawerBackground: isVisible
+        }
+      ]"
+      @click.prevent="isVisible = false"
+    ></section>
+    <section
+      :style="`color: ${textColor}; background-color: ${colorTheme}`"
+      :class="[
+        'drawer',
+        {
+          openedDrawer: isVisible
+        }
+      ]"
+    >
+      <header class="drawerHeader">
+        <slot name="header" />
+        <button class="buttonClose" @click.prevent="isVisible = false">
+          <svg
+            width="40px"
+            height="40px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
+              :fill="textColor ?? '#1C274C'"
+            />
+          </svg>
+        </button>
+      </header>
+      <slot />
+    </section>
+  </article>
+</template>
+
+<style scoped>
+.drawerBackground {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: -50;
+  opacity: 0;
+}
+.openedDrawerBackground {
+  z-index: 60;
+  opacity: 1;
+}
+.drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 350px;
+  height: 100vh;
+  padding: 20px;
+  transform: translateX(-100%);
+  transition: transform ease-out 0.2s;
+  border-right: 2px solid gray;
+}
+.openedDrawer {
+  transform: translateX(0);
+}
+.drawerHeader {
+  font-weight: bold;
+  font-size: 1.5rem;
+  padding-right: 50px;
+  margin-bottom: 20px;
+  min-height: 1rem;
+}
+.buttonClose {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 30px;
+}
+</style>
diff --git a/src/shared/Modal.vue b/src/shared/Modal.vue
new file mode 100644
index 0000000..a72aa73
--- /dev/null
+++ b/src/shared/Modal.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { computed } from 'vue';
+
+interface Props {
+  isVisible: boolean;
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
+}
+const props = defineProps<Props>();
+const colorTheme = computed(() => {
+  if (!props?.theme) return '#0ea5e9';
+  switch (props?.theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+    case 'black':
+      return '#000000';
+  }
+  return '#0ea5e9';
+});
+const textColor = computed(() => {
+  if (!props.theme) return '#000000';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
+const emit = defineEmits(['update:isVisible']);
+const isVisible = useVModel(props, 'isVisible', emit);
+</script>
+
+<template>
+  <article>
+    <section
+      :class="[
+        'modalBackground',
+        {
+          openedModalBackground: isVisible
+        }
+      ]"
+    ></section>
+    <section
+      :style="`color: ${textColor}; background-color: ${colorTheme}`"
+      :class="[
+        'modal',
+        {
+          openedModal: isVisible
+        }
+      ]"
+    >
+      <header class="modalHeader">
+        <slot name="header" />
+        <div class="buttonClose" @click.prevent="isVisible = false">
+          <svg
+            width="40px"
+            height="40px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
+              :fill="textColor ?? '#1C274C'"
+            />
+          </svg>
+        </div>
+      </header>
+      <slot />
+    </section>
+  </article>
+</template>
+
+<style scoped>
+.modalBackground {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: -50;
+  opacity: 0;
+}
+.openedModalBackground {
+  z-index: 60;
+  opacity: 1;
+}
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: -50;
+  min-width: 250px;
+  min-height: 100px;
+  padding: 20px;
+  border: 2px solid gray;
+  border-radius: 10px;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.5);
+  transition: all ease-in-out 0.2s;
+  user-select: none;
+}
+.openedModal {
+  user-select: auto;
+  z-index: 9999;
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+.modalHeader {
+  font-weight: bold;
+  font-size: 1.5rem;
+  padding-right: 50px;
+  margin-bottom: 20px;
+  min-height: 1rem;
+}
+.buttonClose {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 30px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/shared/ToggleSwitch.vue b/src/shared/ToggleSwitch.vue
index e2b89cf..86ba7f3 100644
--- a/src/shared/ToggleSwitch.vue
+++ b/src/shared/ToggleSwitch.vue
@@ -1,87 +1,147 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
+import { computed } from 'vue';
 
 interface Props {
   isActive: boolean;
-  size?: 'large' | 'extraLarge';
-  color?: string;
+  size?: 'small' | 'large';
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red';
 }
 const props = defineProps<Props>();
 const emit = defineEmits(['update:isActive']);
 const isActive = useVModel(props, 'isActive', emit);
+
+const colorTheme = computed(() => {
+  switch (props.theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+  }
+  return '#0ea5e9';
+});
+const sizes = computed(() => {
+  if (!props?.size)
+    return {
+      containerWidth: 35,
+      containerHeight: 21,
+      padding: 3,
+      borderRadius: 11,
+      circleSize: 15,
+      transformXCircle: 14
+    };
+  switch (props.size) {
+    case 'small':
+      return {
+        containerWidth: 30,
+        containerHeight: 18,
+        padding: 2,
+        borderRadius: 9,
+        circleSize: 14,
+        transformXCircle: 12
+      };
+    case 'large':
+      return {
+        containerWidth: 40,
+        containerHeight: 24,
+        padding: 3,
+        borderRadius: 12,
+        circleSize: 18,
+        transformXCircle: 14
+      };
+  }
+  return '';
+});
 </script>
 
 <template>
   <button
-    :style="`background-color: ${color ?? '#0ea5e9'}`"
-    :class="[
-      'switcher',
-      {
-        largeSwitcher: size === 'large',
-        extraLargeSwitcher: size === 'extraLarge',
-        activeSwitcher: isActive
-      }
-    ]"
+    :style="`min-width: ${sizes.containerWidth}px; min-height: ${sizes.containerHeight}px; border-radius: ${sizes.borderRadius}px; padding: ${sizes.padding}px;`"
+    class="switcher"
     @click.prevent="isActive = !isActive"
   >
-    <div
+    <span
+      :style="`background-color: ${colorTheme ?? '#0ea5e9'}; border-radius: ${sizes.borderRadius}px;`"
       :class="[
-        'switcherCircle',
+        'activeBackground',
         {
-          largeSwitcherCircle: size === 'large',
-          extraLargeSwitcherCircle: size === 'extraLarge',
-          activeSwitcherCircle: isActive
+          inactiveBackground: !isActive
         }
       ]"
-    ></div>
+    ></span>
+    <span
+      :style="`width: ${sizes.circleSize}px; height: ${sizes.circleSize}px; transform: translateX(${isActive ? sizes.transformXCircle : 0}px);`"
+      class="switcherCircle"
+    ></span>
   </button>
 </template>
 
 <style scoped>
 .switcher {
-  display: flex;
-  justify-content: start;
-  width: 30px;
-  height: 18px;
-  padding: 2px;
-  border-radius: 9px;
+  position: relative;
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
-}
-.switcher:hover {
-  filter: brightness(90%);
 }
-.activeSwitcher {
-  justify-content: end;
-  background-color: black !important;
+.activeBackground {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: background-color 0.2s ease-in-out;
 }
-.largeSwitcher {
-  width: 35px;
-  height: 21px;
-  border-radius: 11px;
+.inactiveBackground {
+  background-color: rgba(187, 197, 204, 0.66) !important;
+  transition: background-color 0.2s ease-in-out;
 }
-.extraLargeSwitcher {
-  width: 40px;
-  height: 24px;
-  border-radius: 12px;
+.switcher:hover .inactiveBackground {
+  filter: brightness(90%);
 }
 .switcherCircle {
-  width: 14px;
-  height: 14px;
+  display: block;
   background-color: white;
   border-radius: 50%;
-  float: left;
-  transition: all 0.2s ease-in-out;
-}
-.activeSwitcherCircle {
-  float: right;
-}
-.largeSwitcherCircle {
-  width: 17px;
-  height: 17px;
-}
-.extraLargeSwitcherCircle {
-  width: 20px;
-  height: 20px;
+  transition: transform 0.2s ease-in-out;
 }
 </style>
diff --git a/src/shared/Tree.vue b/src/shared/Tree.vue
new file mode 100644
index 0000000..cc4d736
--- /dev/null
+++ b/src/shared/Tree.vue
@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+interface Props {
+  items?: {
+    text: string;
+    link?: string;
+    color?: string;
+    children?: {
+      text: string;
+      link?: string;
+      color?: string;
+      children?: {
+        text: string;
+        link?: string;
+        color?: string;
+      }[];
+    }[];
+  }[];
+  maxWidth?: number;
+  expand?: boolean;
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
+}
+const props = defineProps<Props>();
+const items = computed(() => props.items);
+const colorTheme = computed(() => {
+  if (!props?.theme) return '#ffffff';
+  switch (props?.theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+    case 'black':
+      return '#000000';
+  }
+  return '#ffffff';
+});
+const textColor = computed(() => {
+  if (!props.theme) return '#000000';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
+
+const state = ref([]);
+const setInitialState = () => {
+  if (!props?.items) return;
+  for (let item of props.items) {
+    state.value.push({
+      isOpen: props?.expand ?? false,
+      text: item.text
+    });
+    if (item.children) {
+      for (let child of item.children) {
+        state.value.push({
+          isOpen: props?.expand ?? false,
+          text: child.text
+        });
+        console.log('child', child);
+        if (child.children) {
+          for (let grandChild of child.children) {
+            state.value.push({
+              isOpen: props?.expand ?? false,
+              text: grandChild.text
+            });
+          }
+        }
+      }
+    }
+  }
+};
+watch([items], () => {
+  if (items.value) setInitialState();
+});
+const toggleIsOpen = (item) =>
+  state.value.map((itemState) => {
+    if (itemState.text === item.text) itemState.isOpen = !itemState.isOpen;
+  });
+</script>
+
+<template>
+  <ul
+    :style="`background-color: ${colorTheme ?? 'white'}; max-width: ${maxWidth ?? 300}px`"
+    class="tree"
+  >
+    <li
+      v-for="item of items"
+      :key="item.text"
+      :class="[
+        'item flex',
+        {
+          openItem: state.find((itemState) => itemState.text === item.text && itemState.isOpen)
+        }
+      ]"
+    >
+      <svg
+        v-if="item.children"
+        :class="[
+          'openButton',
+          {
+            openButtonOpened: state.find(
+              (itemState) => itemState.text === item.text && itemState.isOpen
+            )
+          }
+        ]"
+        width="25px"
+        height="25px"
+        viewBox="0 -0.5 28 28"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+        @click.prevent="toggleIsOpen(item)"
+      >
+        <g
+          id="Page-1"
+          stroke="none"
+          stroke-width="1"
+          fill="none"
+          fill-rule="evenodd"
+          sketch:type="MSPage"
+        >
+          <g
+            id="Icon-Set-Filled"
+            sketch:type="MSLayerGroup"
+            transform="translate(-156.000000, -623.000000)"
+            :fill="textColor ?? '#000000'"
+          >
+            <path
+              id="open"
+              d="M183,647.998 L157,647.998 C156.448,647.998 156,648.446 156,648.999 C156,649.552 156.448,650 157,650 L183,650 C183.552,650 184,649.552 184,648.999 C184,648.446 183.552,647.998 183,647.998 L183,647.998 Z M158.014,645.995 L182.018,645.995 C184.375,645.995 184.296,644.608 183.628,643.574 L171.44,624.555 C170.882,623.771 169.22,623.703 168.56,624.555 L156.372,643.574 C155.768,644.703 155.687,645.995 158.014,645.995 L158.014,645.995 Z"
+              sketch:type="MSShapeGroup"
+            ></path>
+          </g>
+        </g>
+      </svg>
+      <div
+        :class="[
+          'content',
+          {
+            openContent: state.find((itemState) => itemState.text === item.text && itemState.isOpen)
+          }
+        ]"
+      >
+        <a :href="item.link" class="text">{{ item.text }}</a>
+        <div class="children">
+          <div v-for="child of item.children" :key="child.text" class="flex item">
+            <svg
+              v-if="child.children"
+              :class="[
+                'openButton',
+                {
+                  openButtonOpened: state.find(
+                    (itemState) => itemState.text === child.text && itemState.isOpen
+                  )
+                }
+              ]"
+              width="25px"
+              height="25px"
+              viewBox="0 -0.5 28 28"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+              @click.prevent="toggleIsOpen(child)"
+            >
+              <g
+                id="Page-1"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+                sketch:type="MSPage"
+              >
+                <g
+                  id="Icon-Set-Filled"
+                  sketch:type="MSLayerGroup"
+                  transform="translate(-156.000000, -623.000000)"
+                  :fill="textColor ?? '#000000'"
+                >
+                  <path
+                    id="open"
+                    d="M183,647.998 L157,647.998 C156.448,647.998 156,648.446 156,648.999 C156,649.552 156.448,650 157,650 L183,650 C183.552,650 184,649.552 184,648.999 C184,648.446 183.552,647.998 183,647.998 L183,647.998 Z M158.014,645.995 L182.018,645.995 C184.375,645.995 184.296,644.608 183.628,643.574 L171.44,624.555 C170.882,623.771 169.22,623.703 168.56,624.555 L156.372,643.574 C155.768,644.703 155.687,645.995 158.014,645.995 L158.014,645.995 Z"
+                    sketch:type="MSShapeGroup"
+                  ></path>
+                </g>
+              </g>
+            </svg>
+            <div
+              :class="[
+                'content',
+                {
+                  openContent: state.find(
+                    (itemState) => itemState.text === child.text && itemState.isOpen
+                  )
+                }
+              ]"
+            >
+              <a :href="child.link" class="text">{{ child.text }}</a>
+              <div class="children">
+                <div v-for="grandChild of child.children" :key="grandChild.text" class="flex item">
+                  <div
+                    :class="[
+                      'content',
+                      {
+                        openContent: state.find(
+                          (itemState) => itemState.text === grandChild.text && itemState.isOpen
+                        )
+                      }
+                    ]"
+                  >
+                    <p :href="grandChild.link" class="text">{{ grandChild.text }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.tree {
+  padding: 15px 25px 15px 15px;
+}
+.item {
+  position: relative;
+}
+.content {
+  width: 100%;
+  padding-left: 25px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  background-color: v-bind(colorTheme);
+}
+.text {
+  display: block;
+  position: relative;
+  padding: 4px 0 4px 5px;
+  z-index: 3;
+  color: v-bind(textColor);
+  background-color: v-bind(colorTheme);
+  word-break: break-word;
+}
+.openButton {
+  position: absolute;
+  z-index: 3;
+  top: 5px;
+  left: 0;
+  cursor: pointer;
+  padding: 5px;
+  margin: -5px -5px -5px 0;
+  transition: transform 0.3s ease;
+}
+.openButtonOpened {
+  transform: rotate(180deg);
+}
+.children {
+  width: 100%;
+  padding-left: 10px;
+  opacity: 0;
+  max-height: 0;
+  transform: translateY(-100%);
+  transition: all 0.3s ease;
+}
+.openContent > .children {
+  transform: translateY(0);
+  opacity: 1;
+  max-height: 1000px;
+}
+.flex {
+  display: flex;
+  align-items: start;
+  justify-content: end;
+}
+</style>
diff --git a/src/shared/icons/CloseCircle.vue b/src/shared/icons/CloseCircle.vue
index 688ad16..e288723 100644
--- a/src/shared/icons/CloseCircle.vue
+++ b/src/shared/icons/CloseCircle.vue
@@ -18,7 +18,7 @@ defineProps<Props>();
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
-      fill="#1C274C"
+      :fill="color ?? '#1C274C'"
     />
   </svg>
 </template>
diff --git a/src/shared/icons/ExitIcon.vue b/src/shared/icons/ExitIcon.vue
new file mode 100644
index 0000000..ffff729
--- /dev/null
+++ b/src/shared/icons/ExitIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.70725 2.4087C9 3.03569 9 4.18259 9 6.4764V17.5236C9 19.8174 9 20.9643 9.70725 21.5913C10.4145 22.2183 11.4955 22.0297 13.6576 21.6526L15.9864 21.2465C18.3809 20.8288 19.5781 20.62 20.2891 19.7417C21 18.8635 21 17.5933 21 15.0529V8.94711C21 6.40671 21 5.13652 20.2891 4.25826C19.5781 3.37999 18.3809 3.17118 15.9864 2.75354L13.6576 2.34736C11.4955 1.97026 10.4145 1.78171 9.70725 2.4087ZM12 10.1686C12.4142 10.1686 12.75 10.52 12.75 10.9535V13.0465C12.75 13.48 12.4142 13.8314 12 13.8314C11.5858 13.8314 11.25 13.48 11.25 13.0465V10.9535C11.25 10.52 11.5858 10.1686 12 10.1686Z"
+      :fill="color ?? '#1C274C'"
+    />
+    <path
+      d="M7.54717 4.5C5.48889 4.503 4.41599 4.54826 3.73223 5.23202C3 5.96425 3 7.14276 3 9.49979V14.4998C3 16.8568 3 18.0353 3.73223 18.7676C4.41599 19.4513 5.48889 19.4966 7.54717 19.4996C7.49985 18.8763 7.49992 18.1557 7.50001 17.3768V6.6227C7.49992 5.84388 7.49985 5.1233 7.54717 4.5Z"
+      :fill="color ?? '#1C274C'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/HamgurgerMenu.vue b/src/shared/icons/HamgurgerMenu.vue
index bc67560..bdbe96a 100644
--- a/src/shared/icons/HamgurgerMenu.vue
+++ b/src/shared/icons/HamgurgerMenu.vue
@@ -18,7 +18,7 @@ defineProps<Props>();
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355ZM18.75 16C18.75 16.4142 18.4142 16.75 18 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H18C18.4142 15.25 18.75 15.5858 18.75 16ZM18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H6C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75H18ZM18.75 8C18.75 8.41421 18.4142 8.75 18 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H18C18.4142 7.25 18.75 7.58579 18.75 8Z"
-      fill="#1C274C"
+      :fill="color ?? '#1C274C'"
     />
   </svg>
 </template>
diff --git a/src/shared/icons/HomeIcon.vue b/src/shared/icons/HomeIcon.vue
new file mode 100644
index 0000000..50dabe0
--- /dev/null
+++ b/src/shared/icons/HomeIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 0L0 6V8H1V15H4V10H7V15H15V8H16V6L14 4.5V1H11V2.25L8 0ZM9 10H12V13H9V10Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/NavigationIcon.vue b/src/shared/icons/NavigationIcon.vue
new file mode 100644
index 0000000..fcd6ccf
--- /dev/null
+++ b/src/shared/icons/NavigationIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 512 512"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>navigation-filled</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="icon" :fill="color ?? '#000000'" transform="translate(42.666667, 42.666667)">
+        <path
+          id="Combined-Shape"
+          d="M213.333333,3.55271368e-14 C331.15408,3.55271368e-14 426.666667,95.5125867 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 3.55271368e-14,331.15408 3.55271368e-14,213.333333 C3.55271368e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z M234.666667,341.333333 L192,341.333333 L192,384 L234.666667,384 L234.666667,341.333333 Z M320,106.666667 L181.333333,181.333333 L106.666667,320 L245.333333,245.333333 L320,106.666667 Z M213.333333,192 C225.115408,192 234.666667,201.551259 234.666667,213.333333 C234.666667,225.115408 225.115408,234.666667 213.333333,234.666667 C201.551259,234.666667 192,225.115408 192,213.333333 C192,201.551259 201.551259,192 213.333333,192 Z M384,192 L341.333333,192 L341.333333,234.666667 L384,234.666667 L384,192 Z M85.3333333,192 L42.6666667,192 L42.6666667,234.666667 L85.3333333,234.666667 L85.3333333,192 Z M234.666667,42.6666667 L192,42.6666667 L192,85.3333333 L234.666667,85.3333333 L234.666667,42.6666667 Z"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/SettingsIcon.vue b/src/shared/icons/SettingsIcon.vue
new file mode 100644
index 0000000..41b9327
--- /dev/null
+++ b/src/shared/icons/SettingsIcon.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 30 30"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+  >
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+      sketch:type="MSPage"
+    >
+      <g
+        id="Icon-Set-Filled"
+        sketch:type="MSLayerGroup"
+        transform="translate(-103.000000, -362.000000)"
+        :fill="color ?? '#000000'"
+      >
+        <path
+          id="settings"
+          d="M118,382 C115.261,382 113.042,379.762 113.042,377 C113.042,374.238 115.261,372 118,372 C120.739,372 122.959,374.238 122.959,377 C122.959,379.762 120.739,382 118,382 L118,382 Z M132.008,380.536 L129.685,379.184 C129.815,378.474 129.901,377.749 129.901,377 C129.901,376.252 129.815,375.526 129.685,374.816 L132.008,373.464 C132.957,372.912 133.281,371.688 132.733,370.732 L130.75,367.268 C130.203,366.312 128.989,365.983 128.041,366.536 L125.694,367.901 C124.598,366.961 123.352,366.192 121.967,365.697 L121.967,364 C121.967,362.896 121.079,362 119.983,362 L116.017,362 C114.921,362 114.033,362.896 114.033,364 L114.033,365.697 C112.648,366.192 111.402,366.961 110.306,367.901 L107.959,366.536 C107.011,365.983 105.797,366.312 105.25,367.268 L103.267,370.732 C102.719,371.688 103.044,372.912 103.992,373.464 L106.315,374.816 C106.185,375.526 106.099,376.252 106.099,377 C106.099,377.749 106.185,378.474 106.315,379.184 L103.992,380.536 C103.044,381.088 102.719,382.312 103.267,383.268 L105.25,386.732 C105.797,387.688 107.011,388.017 107.959,387.464 L110.306,386.099 C111.402,387.039 112.648,387.809 114.033,388.303 L114.033,390 C114.033,391.104 114.921,392 116.017,392 L119.983,392 C121.079,392 121.967,391.104 121.967,390 L121.967,388.303 C123.352,387.809 124.598,387.039 125.694,386.099 L128.041,387.464 C128.989,388.017 130.203,387.688 130.75,386.732 L132.733,383.268 C133.281,382.312 132.957,381.088 132.008,380.536 L132.008,380.536 Z M118,374 C116.357,374 115.025,375.344 115.025,377 C115.025,378.657 116.357,380 118,380 C119.643,380 120.975,378.657 120.975,377 C120.975,375.344 119.643,374 118,374 L118,374 Z"
+          sketch:type="MSShapeGroup"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/VerticalArrowsIcon.vue b/src/shared/icons/VerticalArrowsIcon.vue
new file mode 100644
index 0000000..07ca726
--- /dev/null
+++ b/src/shared/icons/VerticalArrowsIcon.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    id="Capa_1"
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 349.455 349.455"
+    xml:space="preserve"
+  >
+    <path
+      :style="`fill: ${color ?? '#231f20'}`"
+      d="M248.263,240.135c-1.407-1.407-3.314-2.197-5.304-2.197c-1.989,0-3.896,0.79-5.304,2.197
+	l-45.429,45.429l0.001-221.673l45.428,45.429c1.407,1.407,3.314,2.197,5.304,2.197c1.989,0,3.896-0.79,5.304-2.197l14.143-14.143
+	c1.406-1.406,2.196-3.314,2.196-5.303c0-1.989-0.79-3.897-2.196-5.303L180.032,2.197C178.625,0.79,176.717,0,174.728,0
+	c-1.989,0-3.896,0.79-5.304,2.197L87.049,84.573c-1.406,1.407-2.196,3.314-2.196,5.303c0,1.989,0.79,3.897,2.197,5.304
+	l14.143,14.142c1.464,1.464,3.384,2.196,5.303,2.196c1.919,0,3.839-0.732,5.304-2.197l45.429-45.43l-0.001,221.673l-45.428-45.429
+	c-1.407-1.407-3.314-2.197-5.304-2.197c-1.989,0-3.896,0.79-5.304,2.197l-14.143,14.143c-1.406,1.406-2.196,3.314-2.196,5.303
+	c0,1.989,0.79,3.897,2.196,5.303l82.374,82.374c1.465,1.464,3.385,2.197,5.304,2.197c1.919,0,3.839-0.733,5.304-2.197l82.375-82.375
+	c1.406-1.406,2.196-3.314,2.196-5.303c0-1.989-0.79-3.897-2.196-5.303L248.263,240.135z"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
-- 
GitLab


From dbf0e6dae96001f58591ac1353b74fa288124c6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sun, 15 Sep 2024 18:56:06 +0500
Subject: [PATCH 5/7] add MenuDial and refactor

---
 src/app/assets/icons/close-circle.svg         |   4 -
 src/app/assets/main.css                       |   4 +
 src/app/components.d.ts                       |   5 +-
 src/components/PageMenuButton.vue             |  17 +++
 src/pages/[uuid]/SheetPage.vue                |  24 +---
 src/shared/MenuDial.vue                       | 106 ++++++++++++++++++
 .../{HamgurgerMenu.vue => HamburgerMenu.vue}  |   0
 7 files changed, 134 insertions(+), 26 deletions(-)
 delete mode 100644 src/app/assets/icons/close-circle.svg
 create mode 100644 src/components/PageMenuButton.vue
 create mode 100644 src/shared/MenuDial.vue
 rename src/shared/icons/{HamgurgerMenu.vue => HamburgerMenu.vue} (100%)

diff --git a/src/app/assets/icons/close-circle.svg b/src/app/assets/icons/close-circle.svg
deleted file mode 100644
index 22022e7..0000000
--- a/src/app/assets/icons/close-circle.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z" fill="#1C274C"/>
-</svg>
\ No newline at end of file
diff --git a/src/app/assets/main.css b/src/app/assets/main.css
index 0c447b6..e1a9b3e 100644
--- a/src/app/assets/main.css
+++ b/src/app/assets/main.css
@@ -242,6 +242,10 @@ label {
 legend {
   display: block;
 }
+input[type=file], /* FF, IE7+, chrome (except button) */
+input[type=file]::-webkit-file-upload-button {
+  cursor: pointer;
+}
 ::-webkit-scrollbar {
   width: 10px;
 }
diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 9d8258e..827970b 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -27,7 +27,7 @@ declare module 'vue' {
     EntityPositionSettings: typeof import('./../components/entities/settings/EntityPositionSettings.vue')['default']
     EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
     ExitIcon: typeof import('./../shared/icons/ExitIcon.vue')['default']
-    HamgurgerMenu: typeof import('./../shared/icons/HamgurgerMenu.vue')['default']
+    HamburgerMenu: typeof import('./../shared/icons/HamburgerMenu.vue')['default']
     HomeIcon: typeof import('./../shared/icons/HomeIcon.vue')['default']
     ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
     ImageMenu: typeof import('./../components/entities/settings/ImageMenu.vue')['default']
@@ -35,11 +35,13 @@ declare module 'vue' {
     ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default']
     ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
+    MenuDial: typeof import('./../shared/MenuDial.vue')['default']
     MenuHeader: typeof import('./../modules/MenuHeader.vue')['default']
     Modal: typeof import('./../shared/Modal.vue')['default']
     NavigationIcon: typeof import('./../shared/icons/NavigationIcon.vue')['default']
     PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
     PageHeader: typeof import('./../modules/PageHeader.vue')['default']
+    PageMenuButton: typeof import('./../components/PageMenuButton.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SettingsIcon: typeof import('./../shared/icons/SettingsIcon.vue')['default']
@@ -47,7 +49,6 @@ declare module 'vue' {
     SignIn: typeof import('./../pages/authorization/signIn.vue')['default']
     SignUp: typeof import('./../pages/authorization/signUp.vue')['default']
     SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']
-    SpeedDial: typeof import('primevue/speeddial')['default']
     TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
     TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
     TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
diff --git a/src/components/PageMenuButton.vue b/src/components/PageMenuButton.vue
new file mode 100644
index 0000000..8cbf136
--- /dev/null
+++ b/src/components/PageMenuButton.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const emit = defineEmits(['openMenu']);
+</script>
+
+<template>
+  <div class="fixed top-0 left-0 z-50">
+    <button
+      class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md"
+      @click.prevent="emit('openMenu')"
+    >
+      Menu
+      <HamburgerMenu color="white" size="40" />
+    </button>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue
index 8f15594..83a2354 100644
--- a/src/pages/[uuid]/SheetPage.vue
+++ b/src/pages/[uuid]/SheetPage.vue
@@ -7,6 +7,7 @@ import type { IEntity } from '@/app/interfaces/environment';
 import type { IImageMainInfo } from '@/app/interfaces';
 import { createEntity, fetchForEntities, setDefaultPageBackground } from '@/app/helpers';
 import cookies from '@/app/plugins/Cookie';
+import PageMenuButton from '@/components/PageMenuButton.vue';
 
 const dataStore = useDataStore();
 const interfaceStore = useInterfaceStore();
@@ -74,29 +75,16 @@ const saveImage = (finalImageUrl: string) => {
   interfaceStore.editPageBackground(finalImageUrl);
   isModalUploadFile.value = false;
 };
-const closeMenu = () => (isMenuVisible.value = false);
+const openMenu = () => (isMenuVisible.value = true);
 </script>
 
 <template>
   <PageHeader v-model:isEditMode="isEditMode" :title="'Home page'" />
-  <div class="fixed top-0 left-0 z-50">
-    <button
-      class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md"
-      @click.prevent="isMenuVisible = !isMenuVisible"
-    >
-      Menu
-      <HamgurgerMenu color="white" size="40" />
-    </button>
-  </div>
+  <PageMenuButton @openMenu="openMenu" />
   <Drawer v-model:isVisible="isMenuVisible" theme="black">
     <template #header><MenuHeader /></template>
-    <BaseSidebarMenu class="relative z-50" @closeMenu="closeMenu" />
+    <BaseSidebarMenu class="relative z-50" />
   </Drawer>
-  <!--  <Drawer v-model:visible="isMenuVisible">-->
-  <!--    <template #container="{ closeCallback }">-->
-  <!--      <BaseSidebarMenu class="relative z-50" @closeMenu="closeCallback" />-->
-  <!--    </template>-->
-  <!--  </Drawer>-->
   <TelegramSection />
   <CropImageModal
     v-model:isVisible="isModalUploadFile"
@@ -157,8 +145,4 @@ const closeMenu = () => (isMenuVisible.value = false);
 .telegramContainer:hover > a {
   filter: brightness(0.75);
 }
-input[type=file], /* FF, IE7+, chrome (except button) */
-input[type=file]::-webkit-file-upload-button {
-  cursor: pointer;
-}
 </style>
diff --git a/src/shared/MenuDial.vue b/src/shared/MenuDial.vue
new file mode 100644
index 0000000..f782875
--- /dev/null
+++ b/src/shared/MenuDial.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import PlusIcon from '@/shared/icons/PlusIcon.vue';
+import { computed } from 'vue';
+
+interface Props {
+  isActive: boolean;
+  items: {
+    label: string;
+    color?: string;
+    onClick?: () => void;
+  }[];
+  size?: 'large' | 'extraLarge';
+  color?: string;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isActive']);
+const isActive = useVModel(props, 'isActive', emit);
+
+const elementsSize = computed(() => {
+  if (!props?.size) return 30;
+  switch (props.size) {
+    case 'large':
+      return 40;
+    case 'extraLarge':
+      return 50;
+  }
+});
+</script>
+
+<template>
+  <section class="menuContainer">
+    <button
+      :style="`background-color: ${color ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${isActive ? 'rotate(45deg)' : ''};`"
+      class="menuButton"
+      @click.prevent="isActive = !isActive"
+    >
+      <slot name="button" />
+      <PlusIcon v-if="!$slots.button" :size="elementsSize - 10" />
+    </button>
+    <ul
+      :class="[
+        'menuList',
+        {
+          menuListOpened: isActive
+        }
+      ]"
+      :style="`transform: translateY(-${elementsSize / 2}px) translateX(${isActive ? elementsSize + 10 : 0}px)`"
+    >
+      <li
+        v-for="item of items"
+        :key="item.label"
+        :style="`background-color: ${item?.color ?? 'white'}; height: ${elementsSize}px`"
+        class="menuElement"
+        @click.prevent="item?.onClick"
+      >
+        {{ item.label }}
+      </li>
+    </ul>
+  </section>
+  {{ elementsSize }}
+</template>
+
+<style scoped>
+.menuContainer {
+  position: relative;
+}
+.menuButton {
+  position: relative;
+  border: 2px solid black;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  transition: 0.2s ease-in-out;
+}
+.menuButton:hover {
+  filter: brightness(75%);
+}
+.menuList {
+  display: flex;
+  gap: 10px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  opacity: 0;
+  transition: 0.2s ease-in-out;
+}
+.menuListOpened {
+  opacity: 1;
+}
+.menuElement {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  border-radius: 5px;
+  user-select: none;
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+}
+.menuElement:hover {
+  filter: brightness(75%);
+}
+</style>
diff --git a/src/shared/icons/HamgurgerMenu.vue b/src/shared/icons/HamburgerMenu.vue
similarity index 100%
rename from src/shared/icons/HamgurgerMenu.vue
rename to src/shared/icons/HamburgerMenu.vue
-- 
GitLab


From ab450632ca86405f9e09d8beb8115a1cba443df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Mon, 16 Sep 2024 12:05:42 +0500
Subject: [PATCH 6/7] refactor

---
 src/app/components.d.ts                       |  14 +--
 src/app/helpers/images.ts                     |  77 ++++++++++++
 src/app/helpers/index.ts                      | 111 ++++++------------
 src/{modules => components}/MenuHeader.vue    |   0
 .../entities/image/ImageSizeMenu.vue          |   2 +-
 src/components/entities/settings/TextMenu.vue |   6 +-
 src/modules/BaseSidebarMenu.vue               |   1 -
 src/modules/PageHeader.vue                    |   3 +-
 src/pages/[uuid]/SheetPage.vue                |   3 +-
 src/shared/{ => ui}/Button.vue                |  60 +++++-----
 src/shared/{ => ui}/Divider.vue               |   0
 src/shared/{ => ui}/Drawer.vue                |   0
 src/shared/{ => ui}/Modal.vue                 |   0
 src/shared/{ => ui}/ToggleSwitch.vue          |   0
 src/shared/{ => ui}/Tree.vue                  |   0
 15 files changed, 159 insertions(+), 118 deletions(-)
 rename src/{modules => components}/MenuHeader.vue (100%)
 rename src/shared/{ => ui}/Button.vue (73%)
 rename src/shared/{ => ui}/Divider.vue (100%)
 rename src/shared/{ => ui}/Drawer.vue (100%)
 rename src/shared/{ => ui}/Modal.vue (100%)
 rename src/shared/{ => ui}/ToggleSwitch.vue (100%)
 rename src/shared/{ => ui}/Tree.vue (100%)

diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 9d8258e..9a7732f 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -11,17 +11,17 @@ declare module 'vue' {
     AuthorizationForm: typeof import('./../modules/authorization/AuthorizationForm.vue')['default']
     BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
     BaseSidebarMenu: typeof import('./../modules/BaseSidebarMenu.vue')['default']
-    Button: typeof import('./../shared/Button.vue')['default']
+    Button: typeof import('./../shared/ui/Button.vue')['default']
     CloseCircle: typeof import('./../shared/icons/CloseCircle.vue')['default']
     CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']
     CropImageModal: typeof import('./../modules/CropImageModal.vue')['default']
     DashedIcon: typeof import('./../shared/icons/DashedIcon.vue')['default']
-    Divider: typeof import('./../shared/Divider.vue')['default']
+    Divider: typeof import('./../shared/ui/Divider.vue')['default']
     DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']
     DividerMenu: typeof import('./../modules/entities/settings/DividerMenu.vue')['default']
     DividerSettings: typeof import('./../components/entities/settings/DividerSettings.vue')['default']
     DottedIcon: typeof import('./../shared/icons/DottedIcon.vue')['default']
-    Drawer: typeof import('./../shared/Drawer.vue')['default']
+    Drawer: typeof import('./../shared/ui/Drawer.vue')['default']
     EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default']
     EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default']
     EntityPositionSettings: typeof import('./../components/entities/settings/EntityPositionSettings.vue')['default']
@@ -35,8 +35,8 @@ declare module 'vue' {
     ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default']
     ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
-    MenuHeader: typeof import('./../modules/MenuHeader.vue')['default']
-    Modal: typeof import('./../shared/Modal.vue')['default']
+    MenuHeader: typeof import('./../components/MenuHeader.vue')['default']
+    Modal: typeof import('./../shared/ui/Modal.vue')['default']
     NavigationIcon: typeof import('./../shared/icons/NavigationIcon.vue')['default']
     PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
     PageHeader: typeof import('./../modules/PageHeader.vue')['default']
@@ -54,8 +54,8 @@ declare module 'vue' {
     TextMenu: typeof import('./../components/entities/settings/TextMenu.vue')['default']
     TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
     TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
-    ToggleSwitch: typeof import('./../shared/ToggleSwitch.vue')['default']
-    Tree: typeof import('./../shared/Tree.vue')['default']
+    ToggleSwitch: typeof import('./../shared/ui/ToggleSwitch.vue')['default']
+    Tree: typeof import('./../shared/ui/Tree.vue')['default']
     VerticalArrowsIcon: typeof import('./../shared/icons/VerticalArrowsIcon.vue')['default']
   }
 }
diff --git a/src/app/helpers/images.ts b/src/app/helpers/images.ts
index a32ed3d..df88897 100644
--- a/src/app/helpers/images.ts
+++ b/src/app/helpers/images.ts
@@ -2,6 +2,12 @@ import type { IEntity } from '@/app/interfaces/environment';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 import type { IImage } from '@/app/interfaces/entities';
 import { useWebsocketStore } from '@/app/stores/websocket';
+import { useInterfaceStore } from '@/app/stores/interface';
+
+export const setDefaultPageBackground = () => {
+  const interfaceStore = useInterfaceStore();
+  interfaceStore.resetPageBackground();
+};
 
 export const addUrlsToImageEntities = (entities: IEntity[]) => {
   const filesWebsocketStore = useFilesWebsocketStore();
@@ -50,3 +56,74 @@ export const cropImage = async (newUrl: string, entity: IImage) => {
   };
   websocketStore.sendData(data);
 };
+
+export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
+  const elementsLabelsToRemove = [];
+  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
+  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
+  if (initialImageWidth <= 400 || initialImageHeight <= 400) {
+    elementsLabelsToRemove.push('x0.25');
+    if (
+      initialImageWidth <= 200 ||
+      initialImageHeight <= 200 ||
+      (initialImageWidth >= 1600 && entity.text_position)
+    ) {
+      elementsLabelsToRemove.push('x0.5');
+      if (
+        initialImageWidth <= 95 ||
+        initialImageHeight <= 95 ||
+        (initialImageWidth >= 1066 && entity.text_position)
+      ) {
+        elementsLabelsToRemove.push('x0.75');
+      }
+    }
+  }
+  if (
+    (initialImageWidth >= 800 && entity.text_position) ||
+    entity.image_width < initialImageWidth
+  ) {
+    elementsLabelsToRemove.push('x1');
+  }
+  return elementsLabelsToRemove;
+};
+
+export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
+  const elementsLabelsToRemove = [];
+  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
+  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
+  if (
+    (initialImageWidth >= 800 && entity.text_position) ||
+    entity.image_width > initialImageWidth
+  ) {
+    elementsLabelsToRemove.push('x1');
+  }
+  if (
+    initialImageWidth >= 960 ||
+    initialImageHeight >= 560 ||
+    (initialImageWidth >= 640 && entity.text_position)
+  ) {
+    elementsLabelsToRemove.push('x1.25');
+    if (
+      initialImageWidth >= 800 ||
+      initialImageHeight >= 467 ||
+      (initialImageWidth >= 533 && entity.text_position)
+    ) {
+      elementsLabelsToRemove.push('x1.5');
+      if (
+        initialImageWidth >= 685 ||
+        initialImageHeight >= 400 ||
+        (initialImageWidth >= 457 && entity.text_position)
+      ) {
+        elementsLabelsToRemove.push('x1.75');
+        if (
+          initialImageWidth >= 600 ||
+          initialImageHeight >= 350 ||
+          (initialImageWidth >= 400 && entity.text_position)
+        ) {
+          elementsLabelsToRemove.push('x2');
+        }
+      }
+    }
+  }
+  return elementsLabelsToRemove;
+};
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index d007a1e..052bb4b 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -1,16 +1,11 @@
 import { useInterfaceStore } from '@/app/stores/interface';
 import { useDataStore } from '@/app/stores/data';
 import { useWebsocketStore } from '@/app/stores/websocket';
-import type { IEntity } from '@/app/interfaces/environment';
+import type { IEntity, TTheme } from '@/app/interfaces/environment';
 import { checkIsImage } from '@/app/helpers/images';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
-import type { IImage } from '@/app/interfaces/entities';
 import cookies from '@/app/plugins/Cookie';
 
-export const setDefaultPageBackground = () => {
-  const interfaceStore = useInterfaceStore();
-  interfaceStore.resetPageBackground();
-};
 export const fetchForEntities = (page_uuid: string) => {
   const dataStore = useDataStore();
   const interfaceStore = useInterfaceStore();
@@ -86,73 +81,41 @@ export const changeEntitiesOrder = (entityUuid: string, direction: 'up' | 'down'
   websocketStore.sendData(data);
 };
 
-export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
-  const elementsLabelsToRemove = [];
-  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
-  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
-  if (initialImageWidth <= 400 || initialImageHeight <= 400) {
-    elementsLabelsToRemove.push('x0.25');
-    if (
-      initialImageWidth <= 200 ||
-      initialImageHeight <= 200 ||
-      (initialImageWidth >= 1600 && entity.text_position)
-    ) {
-      elementsLabelsToRemove.push('x0.5');
-      if (
-        initialImageWidth <= 95 ||
-        initialImageHeight <= 95 ||
-        (initialImageWidth >= 1066 && entity.text_position)
-      ) {
-        elementsLabelsToRemove.push('x0.75');
-      }
-    }
-  }
-  if (
-    (initialImageWidth >= 800 && entity.text_position) ||
-    entity.image_width < initialImageWidth
-  ) {
-    elementsLabelsToRemove.push('x1');
-  }
-  return elementsLabelsToRemove;
-};
-
-export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
-  const elementsLabelsToRemove = [];
-  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
-  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
-  if (
-    (initialImageWidth >= 800 && entity.text_position) ||
-    entity.image_width > initialImageWidth
-  ) {
-    elementsLabelsToRemove.push('x1');
-  }
-  if (
-    initialImageWidth >= 960 ||
-    initialImageHeight >= 560 ||
-    (initialImageWidth >= 640 && entity.text_position)
-  ) {
-    elementsLabelsToRemove.push('x1.25');
-    if (
-      initialImageWidth >= 800 ||
-      initialImageHeight >= 467 ||
-      (initialImageWidth >= 533 && entity.text_position)
-    ) {
-      elementsLabelsToRemove.push('x1.5');
-      if (
-        initialImageWidth >= 685 ||
-        initialImageHeight >= 400 ||
-        (initialImageWidth >= 457 && entity.text_position)
-      ) {
-        elementsLabelsToRemove.push('x1.75');
-        if (
-          initialImageWidth >= 600 ||
-          initialImageHeight >= 350 ||
-          (initialImageWidth >= 400 && entity.text_position)
-        ) {
-          elementsLabelsToRemove.push('x2');
-        }
-      }
-    }
+export const convertThemeToColorWhiteDefault = (theme: string) => {
+  if (!theme) return '#0ea5e9';
+  switch (theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+    case 'black':
+      return '#000000';
   }
-  return elementsLabelsToRemove;
+  return '#ffffff';
 };
diff --git a/src/modules/MenuHeader.vue b/src/components/MenuHeader.vue
similarity index 100%
rename from src/modules/MenuHeader.vue
rename to src/components/MenuHeader.vue
diff --git a/src/components/entities/image/ImageSizeMenu.vue b/src/components/entities/image/ImageSizeMenu.vue
index 7a42aef..e6a0858 100644
--- a/src/components/entities/image/ImageSizeMenu.vue
+++ b/src/components/entities/image/ImageSizeMenu.vue
@@ -3,7 +3,7 @@ import type { IImage } from '@/app/interfaces/entities';
 import {
   getImageSpeedDialSizeBiggerLabelsToRemove,
   getImageSpeedDialSizeSmallerLabelsToRemove
-} from '@/app/helpers';
+} from '@/app/helpers/images';
 
 interface Props {
   entityData: IImage;
diff --git a/src/components/entities/settings/TextMenu.vue b/src/components/entities/settings/TextMenu.vue
index 1b054d4..aa6e41c 100644
--- a/src/components/entities/settings/TextMenu.vue
+++ b/src/components/entities/settings/TextMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { deleteEntity, editEntity } from '@/app/helpers';
+import { convertThemeToColorWhiteDefault, deleteEntity, editEntity } from '@/app/helpers';
 import type { IParagraph } from '@/app/interfaces/entities';
 import { useVModel } from '@vueuse/core';
 import type { TTheme } from '@/app/interfaces/environment';
@@ -39,13 +39,13 @@ const editParagraphWidth = (widthMode: 'full' | 'half') => {
   entityData.value.paragraph_size = widthMode;
   editEntity({ ...entityData.value, paragraph_size: widthMode });
 };
-const themeColor: TTheme = cookies.get('favorite_color');
+const themeColor = convertThemeToColorWhiteDefault(cookies.get('favorite_color'));
 </script>
 
 <template>
   <div
     :style="`background-color: ${themeColor}`"
-    class="absolute left-2 top-0 transition-all select-none size-12 p-2 flex justify-center items-center rounded-full hover:brightness-75 cursor-pointer"
+    class="speedDial absolute left-2 top-0 transition-all select-none size-12 p-2 flex justify-center items-center rounded-full hover:brightness-75 cursor-pointer"
     @click.prevent="isModal = true"
   >
     <SettingsIcon color="white" size="25" />
diff --git a/src/modules/BaseSidebarMenu.vue b/src/modules/BaseSidebarMenu.vue
index dd58ce5..00bd61c 100644
--- a/src/modules/BaseSidebarMenu.vue
+++ b/src/modules/BaseSidebarMenu.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useDataStore } from '@/app/stores/data';
-import Tree from '@/shared/Tree.vue';
 import { useAuthorizationStore } from '@/app/stores/authorization';
 import HomeIcon from '@/shared/icons/HomeIcon.vue';
 
diff --git a/src/modules/PageHeader.vue b/src/modules/PageHeader.vue
index 7b5a0bf..b0e4956 100644
--- a/src/modules/PageHeader.vue
+++ b/src/modules/PageHeader.vue
@@ -2,6 +2,7 @@
 import { useVModel } from '@vueuse/core';
 import cookies from '@/app/plugins/Cookie';
 import type { TTheme } from '@/app/interfaces/environment';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
 
 interface Props {
   title: string;
@@ -10,7 +11,7 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits(['update:isEditMode']);
 const isEditMode = useVModel(props, 'isEditMode', emit);
-const themeColor: TTheme = cookies.get('favorite_color');
+const themeColor = cookies.get('favorite_color');
 </script>
 
 <template>
diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue
index 8f15594..5731130 100644
--- a/src/pages/[uuid]/SheetPage.vue
+++ b/src/pages/[uuid]/SheetPage.vue
@@ -5,8 +5,9 @@ import { useAuthorizationStore } from '@/app/stores/authorization';
 import { useWebsocketStore } from '@/app/stores/websocket';
 import type { IEntity } from '@/app/interfaces/environment';
 import type { IImageMainInfo } from '@/app/interfaces';
-import { createEntity, fetchForEntities, setDefaultPageBackground } from '@/app/helpers';
+import { createEntity, fetchForEntities } from '@/app/helpers';
 import cookies from '@/app/plugins/Cookie';
+import { setDefaultPageBackground } from '@/app/helpers/images';
 
 const dataStore = useDataStore();
 const interfaceStore = useInterfaceStore();
diff --git a/src/shared/Button.vue b/src/shared/ui/Button.vue
similarity index 73%
rename from src/shared/Button.vue
rename to src/shared/ui/Button.vue
index 904c8fb..59a831a 100644
--- a/src/shared/Button.vue
+++ b/src/shared/ui/Button.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed } from 'vue';
 
 interface Props {
-  label?: string
-  iconPos?: 'left' | 'top' | 'right' | 'bottom'
-  textStyle?: 'bold' | 'italic'
-  border?: 'white' | 'black'
+  label?: string;
+  iconPos?: 'left' | 'top' | 'right' | 'bottom';
+  textStyle?: 'bold' | 'italic';
+  border?: 'white' | 'black';
   theme?:
     | 'white'
     | 'slate'
@@ -22,52 +22,52 @@ interface Props {
     | 'indigo'
     | 'rose'
     | 'red'
-    | 'black'
+    | 'black';
 }
-const props = defineProps<Props>()
+const props = defineProps<Props>();
 const colorTheme = computed(() => {
-  if (!props?.theme) return '#0ea5e9'
+  if (!props?.theme) return '#0ea5e9';
   switch (props?.theme) {
     case 'white':
-      return '#ffffff'
+      return '#ffffff';
     case 'slate':
-      return '#64748b'
+      return '#64748b';
     case 'blue':
-      return '#3b82f6'
+      return '#3b82f6';
     case 'sky':
-      return '#0ea5e9'
+      return '#0ea5e9';
     case 'teal':
-      return '#14b8a6'
+      return '#14b8a6';
     case 'lime':
-      return '#84cc16'
+      return '#84cc16';
     case 'green':
-      return '#22c55e'
+      return '#22c55e';
     case 'yellow':
-      return '#eab308'
+      return '#eab308';
     case 'orange':
-      return '#f97316'
+      return '#f97316';
     case 'pink':
-      return '#ec4899'
+      return '#ec4899';
     case 'fuchsia':
-      return '#d946ef'
+      return '#d946ef';
     case 'purple':
-      return '#a855f7'
+      return '#a855f7';
     case 'indigo':
-      return '#6366f1'
+      return '#6366f1';
     case 'rose':
-      return '#f43f5e'
+      return '#f43f5e';
     case 'red':
-      return '#ef4444'
+      return '#ef4444';
     case 'black':
-      return '#000000'
+      return '#000000';
   }
-  return '#ffffff'
-})
+  return '#ffffff';
+});
 const textColor = computed(() => {
-  if (!props.theme) return '#ffffff'
-  if (props.theme === 'white') return '#000000'
-  return '#ffffff'
-})
+  if (!props.theme) return '#ffffff';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
 </script>
 
 <template>
diff --git a/src/shared/Divider.vue b/src/shared/ui/Divider.vue
similarity index 100%
rename from src/shared/Divider.vue
rename to src/shared/ui/Divider.vue
diff --git a/src/shared/Drawer.vue b/src/shared/ui/Drawer.vue
similarity index 100%
rename from src/shared/Drawer.vue
rename to src/shared/ui/Drawer.vue
diff --git a/src/shared/Modal.vue b/src/shared/ui/Modal.vue
similarity index 100%
rename from src/shared/Modal.vue
rename to src/shared/ui/Modal.vue
diff --git a/src/shared/ToggleSwitch.vue b/src/shared/ui/ToggleSwitch.vue
similarity index 100%
rename from src/shared/ToggleSwitch.vue
rename to src/shared/ui/ToggleSwitch.vue
diff --git a/src/shared/Tree.vue b/src/shared/ui/Tree.vue
similarity index 100%
rename from src/shared/Tree.vue
rename to src/shared/ui/Tree.vue
-- 
GitLab


From c049cc441008e80b9126e630cc25b8e9648c687b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Tue, 17 Sep 2024 10:38:30 +0500
Subject: [PATCH 7/7] finished with migrate to own UI-library (part of them)
 and refactor

---
 src/app/assets/main.css                       |  17 ++
 src/app/components.d.ts                       |  14 +-
 src/app/helpers/index.ts                      |   4 +-
 src/components/CreateEntityMenu.vue           |  66 ++++----
 src/components/PageMenuButton.vue             |   6 +-
 .../settings/EntityPositionSettings.vue       |  48 +++++-
 .../{ImageMenu.vue => ImageSettings.vue}      |   0
 .../{TextMenu.vue => TextSettings.vue}        |  13 +-
 .../entities/text/TextStateMenu.vue           |  28 +---
 ...SidebarMenu.vue => SidebarMenuContent.vue} |  27 +--
 .../SidebarMenuHeader.vue}                    |   0
 src/modules/entities/DividerItem.vue          |   2 +-
 src/modules/entities/EntitiesList.vue         |   8 +-
 src/modules/entities/ImageItem.vue            |   2 +-
 src/modules/entities/TextItem.vue             |  23 ++-
 src/output.css                                |  53 ++----
 src/pages/[uuid]/SheetPage.vue                |   4 +-
 src/shared/MenuDial.vue                       | 106 ------------
 src/shared/icons/HamburgerIcon.vue            |  43 +++++
 src/shared/icons/HamburgerMenu.vue            |  26 ---
 src/shared/icons/HorizontalLineIcon.vue       |  23 +++
 src/shared/icons/ImageIcon.vue                |  44 +++++
 src/shared/icons/ParagraphIcon.vue            |  23 +++
 src/shared/icons/PlusIcon.vue                 |  27 +++
 src/shared/icons/TableIcon.vue                |  25 +++
 src/shared/icons/TrashIcon.vue                |  27 +++
 src/shared/ui/Button.vue                      |   6 +-
 src/shared/ui/Drawer.vue                      |   4 +-
 src/shared/ui/MenuDial.vue                    | 155 ++++++++++++++++++
 src/shared/ui/Modal.vue                       |  10 +-
 src/shared/ui/ToggleSwitch.vue                |   4 +-
 src/shared/ui/Tree.vue                        |  49 ++++--
 32 files changed, 593 insertions(+), 294 deletions(-)
 rename src/components/entities/settings/{ImageMenu.vue => ImageSettings.vue} (100%)
 rename src/components/entities/settings/{TextMenu.vue => TextSettings.vue} (88%)
 rename src/modules/{BaseSidebarMenu.vue => SidebarMenuContent.vue} (76%)
 rename src/{components/MenuHeader.vue => modules/SidebarMenuHeader.vue} (100%)
 delete mode 100644 src/shared/MenuDial.vue
 create mode 100644 src/shared/icons/HamburgerIcon.vue
 delete mode 100644 src/shared/icons/HamburgerMenu.vue
 create mode 100644 src/shared/icons/HorizontalLineIcon.vue
 create mode 100644 src/shared/icons/ImageIcon.vue
 create mode 100644 src/shared/icons/ParagraphIcon.vue
 create mode 100644 src/shared/icons/PlusIcon.vue
 create mode 100644 src/shared/icons/TableIcon.vue
 create mode 100644 src/shared/icons/TrashIcon.vue
 create mode 100644 src/shared/ui/MenuDial.vue

diff --git a/src/app/assets/main.css b/src/app/assets/main.css
index e1a9b3e..700c0c5 100644
--- a/src/app/assets/main.css
+++ b/src/app/assets/main.css
@@ -266,3 +266,20 @@ input[type=file]::-webkit-file-upload-button {
 ::-webkit-scrollbar-thumb:hover {
   background: #0033ff;
 }
+.bounce-enter-active {
+  animation: bounce-in 0.5s;
+}
+.bounce-leave-active {
+  animation: bounce-in 0.5s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 59a1b26..4b32cae 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -27,34 +27,44 @@ declare module 'vue' {
     EntityPositionSettings: typeof import('./../components/entities/settings/EntityPositionSettings.vue')['default']
     EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
     ExitIcon: typeof import('./../shared/icons/ExitIcon.vue')['default']
-    HamburgerMenu: typeof import('./../shared/icons/HamburgerMenu.vue')['default']
+    HamburgerIcon: typeof import('./../shared/icons/HamburgerIcon.vue')['default']
     HomeIcon: typeof import('./../shared/icons/HomeIcon.vue')['default']
+    HorizontalLineIcon: typeof import('./../shared/icons/HorizontalLineIcon.vue')['default']
+    ImageIcon: typeof import('./../shared/icons/ImageIcon.vue')['default']
     ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
     ImageMenu: typeof import('./../components/entities/settings/ImageMenu.vue')['default']
     ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default']
+    ImageSettings: typeof import('./../components/entities/settings/ImageSettings.vue')['default']
     ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default']
     ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
+    MenuDial: typeof import('./../shared/ui/MenuDial.vue')['default']
     MenuHeader: typeof import('./../components/MenuHeader.vue')['default']
     Modal: typeof import('./../shared/ui/Modal.vue')['default']
     NavigationIcon: typeof import('./../shared/icons/NavigationIcon.vue')['default']
     PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
     PageHeader: typeof import('./../modules/PageHeader.vue')['default']
     PageMenuButton: typeof import('./../components/PageMenuButton.vue')['default']
+    ParagraphIcon: typeof import('./../shared/icons/ParagraphIcon.vue')['default']
+    PlusIcon: typeof import('./../shared/icons/PlusIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SettingsIcon: typeof import('./../shared/icons/SettingsIcon.vue')['default']
     SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
+    SidebarMenuContent: typeof import('./../modules/SidebarMenuContent.vue')['default']
+    SidebarMenuHeader: typeof import('./../modules/SidebarMenuHeader.vue')['default']
     SignIn: typeof import('./../pages/authorization/signIn.vue')['default']
     SignUp: typeof import('./../pages/authorization/signUp.vue')['default']
     SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']
+    TableIcon: typeof import('./../shared/icons/TableIcon.vue')['default']
     TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
     TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
     TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
-    TextMenu: typeof import('./../components/entities/settings/TextMenu.vue')['default']
     TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
+    TextSettings: typeof import('./../components/entities/settings/TextSettings.vue')['default']
     TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
     ToggleSwitch: typeof import('./../shared/ui/ToggleSwitch.vue')['default']
+    TrashIcon: typeof import('./../shared/icons/TrashIcon.vue')['default']
     Tree: typeof import('./../shared/ui/Tree.vue')['default']
     VerticalArrowsIcon: typeof import('./../shared/icons/VerticalArrowsIcon.vue')['default']
   }
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index 052bb4b..e626cbb 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -81,8 +81,8 @@ export const changeEntitiesOrder = (entityUuid: string, direction: 'up' | 'down'
   websocketStore.sendData(data);
 };
 
-export const convertThemeToColorWhiteDefault = (theme: string) => {
-  if (!theme) return '#0ea5e9';
+export const convertThemeToColorWhiteDefault = (theme: string | undefined) => {
+  if (!theme) return '#ffffff';
   switch (theme) {
     case 'white':
       return '#ffffff';
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index c52ea6e..a96c3f6 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -3,6 +3,7 @@ import { useFileDialog, useWindowSize } from '@vueuse/core';
 import { useAuthorizationStore } from '@/app/stores/authorization';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 import { useDataStore } from '@/app/stores/data';
+import cookies from '@/app/plugins/Cookie';
 
 const emit = defineEmits(['createEntity']);
 
@@ -12,6 +13,9 @@ const { open: uploadFile, onChange } = useFileDialog({
 });
 const authorizationStore = useAuthorizationStore();
 const dataStore = useDataStore();
+
+const themeColor: string = cookies.get('favorite_color');
+const isMenu = ref(false);
 const userNickName = computed(() => authorizationStore.userNickName);
 const entitiesCount = computed(() => dataStore.entities.length);
 
@@ -58,8 +62,9 @@ onChange((files) => {
 const speedDialItems = ref([
   {
     label: 'Divider',
-    icon: 'pi pi-pause',
-    command: () => {
+    textStyle: 'bold',
+    theme: 'blue',
+    onClick: () => {
       emit('createEntity', {
         entity_type: 'divider',
         entity_order: entitiesCount.value + 1,
@@ -70,8 +75,9 @@ const speedDialItems = ref([
   },
   {
     label: 'Paragraph',
-    icon: 'pi pi-pencil',
-    command: () => {
+    textStyle: 'bold',
+    theme: 'green',
+    onClick: () => {
       emit('createEntity', {
         entity_type: 'paragraph',
         entity_order: entitiesCount.value + 1,
@@ -84,13 +90,15 @@ const speedDialItems = ref([
   },
   {
     label: 'Image',
-    icon: 'pi pi-image',
-    command: () => uploadFile()
+    textStyle: 'bold',
+    theme: 'orange',
+    onClick: () => uploadFile()
   },
   {
     label: 'Table',
-    icon: 'pi pi-table',
-    command: () => {
+    textStyle: 'bold',
+    theme: 'red',
+    onClick: () => {
       emit('createEntity', {
         entity_type: 'table',
         entity_order: entitiesCount.value + 1,
@@ -115,36 +123,20 @@ const speedDialItems = ref([
 </script>
 
 <template>
-  <SpeedDial
-    :model="speedDialItems"
-    direction="right"
-    :button-props="{ severity: 'primary', rounded: true }"
-    style="position: absolute; left: 5%; top: 0"
-  >
-    <template #item="{ item, toggleCallback }">
-      <div
-        class="flex flex-col items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer"
-        @click="toggleCallback"
-      >
-        <span v-show="item.label !== 'Divider'" :class="item.icon" />
-        <svg
-          v-show="item.label === 'Divider'"
-          fill="#fff"
-          width="20px"
-          height="20px"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3.293,20.707a1,1,0,0,1,0-1.414l16-16a1,1,0,1,1,1.414,1.414l-16,16A1,1,0,0,1,3.293,20.707Z"
-          />
-        </svg>
-        <span>
-          {{ item.label }}
-        </span>
-      </div>
+  <MenuDial v-model:isActive="isMenu" :items="speedDialItems" size="extraLarge" :theme="themeColor">
+    <template #1IconAfter>
+      <HorizontalLineIcon color="white" size="25" />
+    </template>
+    <template #2IconAfter>
+      <ParagraphIcon color="white" size="25" />
+    </template>
+    <template #3IconAfter>
+      <ImageIcon color="white" size="25" />
+    </template>
+    <template #4IconAfter>
+      <TableIcon color="white" size="30" />
     </template>
-  </SpeedDial>
+  </MenuDial>
 </template>
 
 <style scoped></style>
diff --git a/src/components/PageMenuButton.vue b/src/components/PageMenuButton.vue
index 8cbf136..bd289f8 100644
--- a/src/components/PageMenuButton.vue
+++ b/src/components/PageMenuButton.vue
@@ -5,11 +5,11 @@ const emit = defineEmits(['openMenu']);
 <template>
   <div class="fixed top-0 left-0 z-50">
     <button
-      class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md"
+      class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md flex flex-col items-center justify-center gap-1.5"
       @click.prevent="emit('openMenu')"
     >
-      Menu
-      <HamburgerMenu color="white" size="40" />
+      <span>Menu</span>
+      <HamburgerIcon color="white" size="30" />
     </button>
   </div>
 </template>
diff --git a/src/components/entities/settings/EntityPositionSettings.vue b/src/components/entities/settings/EntityPositionSettings.vue
index 6177ca0..4bf2eb3 100644
--- a/src/components/entities/settings/EntityPositionSettings.vue
+++ b/src/components/entities/settings/EntityPositionSettings.vue
@@ -1,7 +1,51 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { changeEntitiesOrder } from '@/app/helpers';
+import cookies from '@/app/plugins/Cookie';
+
+interface Props {
+  entityUuid: string;
+  entityIndex: number;
+  entitiesLength: number;
+}
+const props = defineProps<Props>();
+
+const isMenu = ref(false);
+const themeColor: string = cookies.get('favorite_color');
+const menuItems = computed(() => {
+  const state = [];
+  if (props.entityIndex !== 0) {
+    state.push({
+      label: 'Up',
+      theme: 'black',
+      onClick: () => changeEntitiesOrder(props.entityUuid, 'up')
+    });
+  }
+  if (props.entityIndex !== props.entitiesLength - 1) {
+    state.push({
+      label: 'Down',
+      theme: 'black',
+      onClick: () => changeEntitiesOrder(props.entityUuid, 'down')
+    });
+  }
+  return state;
+});
+</script>
 
 <template>
-  <MenuDial />
+  <div class="settings absolute right-2 top-0 transition-all select-none">
+    <MenuDial
+      v-model:isActive="isMenu"
+      :items="menuItems"
+      :theme="themeColor"
+      size="extraLarge"
+      direction="left"
+      ><template #buttonIcon>
+        <VerticalArrowsIcon
+          :color="themeColor === 'white' ? 'black' : 'white'"
+          :size="30"
+        /> </template
+    ></MenuDial>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/components/entities/settings/ImageMenu.vue b/src/components/entities/settings/ImageSettings.vue
similarity index 100%
rename from src/components/entities/settings/ImageMenu.vue
rename to src/components/entities/settings/ImageSettings.vue
diff --git a/src/components/entities/settings/TextMenu.vue b/src/components/entities/settings/TextSettings.vue
similarity index 88%
rename from src/components/entities/settings/TextMenu.vue
rename to src/components/entities/settings/TextSettings.vue
index aa6e41c..9984511 100644
--- a/src/components/entities/settings/TextMenu.vue
+++ b/src/components/entities/settings/TextSettings.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { convertThemeToColorWhiteDefault, deleteEntity, editEntity } from '@/app/helpers';
-import type { IParagraph } from '@/app/interfaces/entities';
+import { convertThemeToColorWhiteDefault, editEntity } from '@/app/helpers';
 import { useVModel } from '@vueuse/core';
-import type { TTheme } from '@/app/interfaces/environment';
+import { useDataStore } from '@/app/stores/data';
+import type { IParagraph } from '@/app/interfaces/entities';
+import type { IEntity } from '@/app/interfaces/environment';
 import cookies from '@/app/plugins/Cookie';
 
 interface Props {
@@ -43,13 +44,13 @@ const themeColor = convertThemeToColorWhiteDefault(cookies.get('favorite_color')
 </script>
 
 <template>
-  <div
+  <button
     :style="`background-color: ${themeColor}`"
-    class="speedDial absolute left-2 top-0 transition-all select-none size-12 p-2 flex justify-center items-center rounded-full hover:brightness-75 cursor-pointer"
+    class="settings absolute left-2 top-0 transition-all select-none size-12 flex justify-center items-center rounded-full hover:brightness-75 cursor-pointer"
     @click.prevent="isModal = true"
   >
     <SettingsIcon color="white" size="25" />
-  </div>
+  </button>
   <Modal v-model:isVisible="isModal" theme="black"
     ><template #header>Edit paragraph</template>
     <div>
diff --git a/src/components/entities/text/TextStateMenu.vue b/src/components/entities/text/TextStateMenu.vue
index 343501a..961fad6 100644
--- a/src/components/entities/text/TextStateMenu.vue
+++ b/src/components/entities/text/TextStateMenu.vue
@@ -33,36 +33,12 @@ const speedDialState = computed(() => {
   });
   return state;
 });
+const isMenu = ref(false);
 </script>
 
 <template>
   <div class="relative z-40">
-    <SpeedDial :model="speedDialState" direction="right" pt:root:class="speedDialRoot size-12">
-      <template #button="{ toggleCallback }">
-        <button
-          class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
-          @click="toggleCallback"
-        >
-          <i class="pi pi-pen-to-square"></i>
-        </button>
-      </template>
-      <template #item="{ item, toggleCallback }">
-        <div
-          :class="[
-            'flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
-            {
-              'text-red-400 font-semibold': item.icon.includes('trash')
-            }
-          ]"
-          @click="toggleCallback"
-        >
-          <span :class="item.icon" />
-          <span class="text-center">
-            {{ item.label }}
-          </span>
-        </div>
-      </template>
-    </SpeedDial>
+    <MenuDial v-model:isActive="isMenu" :items="speedDialState" size="large"></MenuDial>
   </div>
 </template>
 
diff --git a/src/modules/BaseSidebarMenu.vue b/src/modules/SidebarMenuContent.vue
similarity index 76%
rename from src/modules/BaseSidebarMenu.vue
rename to src/modules/SidebarMenuContent.vue
index 00bd61c..50088ad 100644
--- a/src/modules/BaseSidebarMenu.vue
+++ b/src/modules/SidebarMenuContent.vue
@@ -51,18 +51,21 @@ onMounted(() => {
         <span v-else><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</span>
       </div>
       <Tree :expand="true" theme="black" :items="sheets">
-        <!--        <template #url="slotProps">-->
-        <!--          <a-->
-        <!--            :href="slotProps.node.data"-->
-        <!--            :class="[-->
-        <!--              'block',-->
-        <!--              {-->
-        <!--                'bg-sky-900 p-2 ml-0 -m-2 rounded-md': route.path === slotProps.node.data-->
-        <!--              }-->
-        <!--            ]"-->
-        <!--            >{{ slotProps.node.label }}</a-->
-        <!--          >-->
-        <!--        </template>-->
+        <template #1IconBefore>
+          <HamburgerIcon color="white" size="20" />
+        </template>
+        <template #1-2IconAfter>
+          <DottedIcon color="white" size="20" />
+        </template>
+        <template #1-1IconBefore>
+          <ParagraphIcon color="white" size="20" />
+        </template>
+        <template #1-1-2IconBefore>
+          <DottedIcon color="white" size="20" />
+        </template>
+        <template #1-2-1IconBefore>
+          <ImageIcon color="white" size="20" />
+        </template>
       </Tree>
     </nav>
   </div>
diff --git a/src/components/MenuHeader.vue b/src/modules/SidebarMenuHeader.vue
similarity index 100%
rename from src/components/MenuHeader.vue
rename to src/modules/SidebarMenuHeader.vue
diff --git a/src/modules/entities/DividerItem.vue b/src/modules/entities/DividerItem.vue
index d8adc5d..9ca6c0f 100644
--- a/src/modules/entities/DividerItem.vue
+++ b/src/modules/entities/DividerItem.vue
@@ -12,7 +12,7 @@ defineProps<Props>();
   <section class="entityContainer relative px-16 py-6">
     <Divider :type="entityData.divider_type" :height="entityData.divider_height" />
     <DividerSettings v-if="isEditMode" :entityData="entityData" />
-    <EntityPositionSettings />
+    <EntityPositionSettings :entityUuid="entityData.entity_uuid" />
   </section>
 </template>
 
diff --git a/src/modules/entities/EntitiesList.vue b/src/modules/entities/EntitiesList.vue
index a537c47..fca0fc1 100644
--- a/src/modules/entities/EntitiesList.vue
+++ b/src/modules/entities/EntitiesList.vue
@@ -20,9 +20,11 @@ const createEntity = (entity: IEntity) => {
     :entity="entitiesItem"
     :isEditMode="isEditMode"
   />
-  <div class="relative mt-2">
-    <CreateEntityMenu v-if="isEditMode" @createEntity="createEntity" />
-    <div v-else style="height: 68px"></div>
+  <div class="my-4" style="margin-left: 64px">
+    <Transition name="bounce">
+      <CreateEntityMenu v-if="isEditMode" @createEntity="createEntity" />
+    </Transition>
+    <div v-if="!isEditMode" style="height: 50px"></div>
   </div>
 </template>
 
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 3dce9b4..34303df 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -118,7 +118,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
         v-model:entityData="entityData"
         @openCropImageModal="openCropImageModal"
       />
-      <EntityPositionSettings />
+      <EntityPositionSettings :entityUuid="entityData.entity_uuid" />
     </div>
   </section>
 </template>
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index 3d51198..a01172c 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -2,6 +2,8 @@
 import { useElementSize, useTextareaAutosize } from '@vueuse/core';
 import type { IParagraph } from '@/app/interfaces/entities';
 import { editEntity } from '@/app/helpers';
+import { useDataStore } from '@/app/stores/data';
+import type { IEntity } from '@/app/interfaces/environment';
 
 interface Props {
   entityData: IParagraph;
@@ -10,6 +12,13 @@ interface Props {
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
 
+const dataStore = useDataStore();
+const entities = computed(() => dataStore.entities);
+const entityIndex = computed(() =>
+  entities.value.findIndex((entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid)
+);
+const entitiesLength = computed(() => entities.value.length);
+
 const editTitle = () => {
   editEntity({ ...entityData.value, title: entityData.value.title });
 };
@@ -18,7 +27,6 @@ const editText = () => {
 };
 
 const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
-const { height: textareaHeight } = useElementSize(textarea);
 </script>
 
 <template>
@@ -64,17 +72,22 @@ const { height: textareaHeight } = useElementSize(textarea);
           @input="triggerResize"
         />
       </div>
-      <TextMenu v-if="isEditMode" v-model:entityData="entityData" />
-      <EntityPositionSettings />
+      <TextSettings v-if="isEditMode" v-model:entityData="entityData" />
+      <EntityPositionSettings
+        v-if="isEditMode && entitiesLength > 1"
+        :entityUuid="entityData.entity_uuid"
+        :entityIndex="entityIndex"
+        :entitiesLength="entitiesLength"
+      />
     </div>
   </section>
 </template>
 
 <style>
-.entityContainer .speedDial {
+.entityContainer .settings {
   opacity: 0;
 }
-.entityContainer:hover .speedDial {
+.entityContainer:hover .settings {
   opacity: 100;
 }
 .entityContainer:hover .aggregateHigh {
diff --git a/src/output.css b/src/output.css
index 4c24ee2..1060844 100644
--- a/src/output.css
+++ b/src/output.css
@@ -628,6 +628,10 @@ video {
   left: 0.5rem;
 }
 
+.right-2 {
+  right: 0.5rem;
+}
+
 .right-6 {
   right: 1.5rem;
 }
@@ -652,6 +656,10 @@ video {
   top: 1.5rem;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
 .z-40 {
   z-index: 40;
 }
@@ -672,10 +680,6 @@ video {
   order: 3;
 }
 
-.-m-2 {
-  margin: -0.5rem;
-}
-
 .-my-2 {
   margin-top: -0.5rem;
   margin-bottom: -0.5rem;
@@ -686,6 +690,11 @@ video {
   margin-right: auto;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
@@ -710,10 +719,6 @@ video {
   margin-bottom: 2rem;
 }
 
-.ml-0 {
-  margin-left: 0px;
-}
-
 .ml-4 {
   margin-left: 1rem;
 }
@@ -734,10 +739,6 @@ video {
   margin-right: 1rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -786,10 +787,6 @@ video {
   height: 2rem;
 }
 
-.h-0 {
-  height: 0px;
-}
-
 .h-12 {
   height: 3rem;
 }
@@ -927,6 +924,10 @@ video {
   justify-content: space-between;
 }
 
+.gap-1\.5 {
+  gap: 0.375rem;
+}
+
 .gap-10 {
   gap: 2.5rem;
 }
@@ -1083,11 +1084,6 @@ video {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
-.bg-sky-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(12 74 110 / var(--tw-bg-opacity));
-}
-
 .bg-violet-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(139 92 246 / var(--tw-bg-opacity));
@@ -1259,11 +1255,6 @@ video {
   line-height: 1.5;
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1325,11 +1316,6 @@ video {
   cursor: pointer;
 }
 
-.hover\:bg-slate-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-slate-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
@@ -1343,9 +1329,4 @@ video {
 .hover\:brightness-75:hover {
   --tw-brightness: brightness(.75);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.hover\:brightness-125:hover {
-  --tw-brightness: brightness(1.25);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
\ No newline at end of file
diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue
index 32629c2..c1b6d0b 100644
--- a/src/pages/[uuid]/SheetPage.vue
+++ b/src/pages/[uuid]/SheetPage.vue
@@ -82,8 +82,8 @@ const openMenu = () => (isMenuVisible.value = true);
   <PageHeader v-model:isEditMode="isEditMode" :title="'Home page'" />
   <PageMenuButton @openMenu="openMenu" />
   <Drawer v-model:isVisible="isMenuVisible" theme="black">
-    <template #header><MenuHeader /></template>
-    <BaseSidebarMenu class="relative z-50" />
+    <template #header><SidebarMenuHeader /></template>
+    <SidebarMenuContent class="relative z-50" />
   </Drawer>
   <TelegramSection />
   <CropImageModal
diff --git a/src/shared/MenuDial.vue b/src/shared/MenuDial.vue
deleted file mode 100644
index f782875..0000000
--- a/src/shared/MenuDial.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core';
-import PlusIcon from '@/shared/icons/PlusIcon.vue';
-import { computed } from 'vue';
-
-interface Props {
-  isActive: boolean;
-  items: {
-    label: string;
-    color?: string;
-    onClick?: () => void;
-  }[];
-  size?: 'large' | 'extraLarge';
-  color?: string;
-}
-const props = defineProps<Props>();
-const emit = defineEmits(['update:isActive']);
-const isActive = useVModel(props, 'isActive', emit);
-
-const elementsSize = computed(() => {
-  if (!props?.size) return 30;
-  switch (props.size) {
-    case 'large':
-      return 40;
-    case 'extraLarge':
-      return 50;
-  }
-});
-</script>
-
-<template>
-  <section class="menuContainer">
-    <button
-      :style="`background-color: ${color ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${isActive ? 'rotate(45deg)' : ''};`"
-      class="menuButton"
-      @click.prevent="isActive = !isActive"
-    >
-      <slot name="button" />
-      <PlusIcon v-if="!$slots.button" :size="elementsSize - 10" />
-    </button>
-    <ul
-      :class="[
-        'menuList',
-        {
-          menuListOpened: isActive
-        }
-      ]"
-      :style="`transform: translateY(-${elementsSize / 2}px) translateX(${isActive ? elementsSize + 10 : 0}px)`"
-    >
-      <li
-        v-for="item of items"
-        :key="item.label"
-        :style="`background-color: ${item?.color ?? 'white'}; height: ${elementsSize}px`"
-        class="menuElement"
-        @click.prevent="item?.onClick"
-      >
-        {{ item.label }}
-      </li>
-    </ul>
-  </section>
-  {{ elementsSize }}
-</template>
-
-<style scoped>
-.menuContainer {
-  position: relative;
-}
-.menuButton {
-  position: relative;
-  border: 2px solid black;
-  z-index: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  transition: 0.2s ease-in-out;
-}
-.menuButton:hover {
-  filter: brightness(75%);
-}
-.menuList {
-  display: flex;
-  gap: 10px;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  opacity: 0;
-  transition: 0.2s ease-in-out;
-}
-.menuListOpened {
-  opacity: 1;
-}
-.menuElement {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 5px;
-  border-radius: 5px;
-  user-select: none;
-  cursor: pointer;
-  transition: 0.2s ease-in-out;
-}
-.menuElement:hover {
-  filter: brightness(75%);
-}
-</style>
diff --git a/src/shared/icons/HamburgerIcon.vue b/src/shared/icons/HamburgerIcon.vue
new file mode 100644
index 0000000..8563c80
--- /dev/null
+++ b/src/shared/icons/HamburgerIcon.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+  >
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+      sketch:type="MSPage"
+    >
+      <g
+        id="Icon-Set-Filled"
+        sketch:type="MSLayerGroup"
+        transform="translate(-212.000000, -888.000000)"
+        :fill="color ?? '#000000'"
+      >
+        <path
+          id="hamburger"
+          d="M230,904 L214,904 C212.896,904 212,904.896 212,906 C212,907.104 212.896,908 214,908 L230,908 C231.104,908 232,907.104 232,906 C232,904.896 231.104,904 230,904 L230,904 Z M230,896 L214,896 C212.896,896 212,896.896 212,898 C212,899.104 212.896,900 214,900 L230,900 C231.104,900 232,899.104 232,898 C232,896.896 231.104,896 230,896 L230,896 Z M214,892 L230,892 C231.104,892 232,891.104 232,890 C232,888.896 231.104,888 230,888 L214,888 C212.896,888 212,888.896 212,890 C212,891.104 212.896,892 214,892 L214,892 Z"
+          sketch:type="MSShapeGroup"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/HamburgerMenu.vue b/src/shared/icons/HamburgerMenu.vue
deleted file mode 100644
index bdbe96a..0000000
--- a/src/shared/icons/HamburgerMenu.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  color?: string;
-  size?: string | number;
-}
-defineProps<Props>();
-</script>
-
-<template>
-  <svg
-    :width="`${size ?? 40}px`"
-    :height="`${size ?? 40}px`"
-    viewBox="0 0 24 24"
-    :fill="color ?? 'none'"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355ZM18.75 16C18.75 16.4142 18.4142 16.75 18 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H18C18.4142 15.25 18.75 15.5858 18.75 16ZM18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H6C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75H18ZM18.75 8C18.75 8.41421 18.4142 8.75 18 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H18C18.4142 7.25 18.75 7.58579 18.75 8Z"
-      :fill="color ?? '#1C274C'"
-    />
-  </svg>
-</template>
-
-<style scoped></style>
diff --git a/src/shared/icons/HorizontalLineIcon.vue b/src/shared/icons/HorizontalLineIcon.vue
new file mode 100644
index 0000000..59773e5
--- /dev/null
+++ b/src/shared/icons/HorizontalLineIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :fill="color ?? '#000000'"
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.293,20.707a1,1,0,0,1,0-1.414l16-16a1,1,0,1,1,1.414,1.414l-16,16A1,1,0,0,1,3.293,20.707Z"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/ImageIcon.vue b/src/shared/icons/ImageIcon.vue
new file mode 100644
index 0000000..681e3b1
--- /dev/null
+++ b/src/shared/icons/ImageIcon.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+  >
+    <defs></defs>
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+      sketch:type="MSPage"
+    >
+      <g
+        id="Icon-Set"
+        sketch:type="MSLayerGroup"
+        transform="translate(-360.000000, -99.000000)"
+        :fill="color ?? '#000000'"
+      >
+        <path
+          id="image-picture"
+          d="M368,109 C366.896,109 366,108.104 366,107 C366,105.896 366.896,105 368,105 C369.104,105 370,105.896 370,107 C370,108.104 369.104,109 368,109 L368,109 Z M368,103 C365.791,103 364,104.791 364,107 C364,109.209 365.791,111 368,111 C370.209,111 372,109.209 372,107 C372,104.791 370.209,103 368,103 L368,103 Z M390,116.128 L384,110 L374.059,120.111 L370,116 L362,123.337 L362,103 C362,101.896 362.896,101 364,101 L388,101 C389.104,101 390,101.896 390,103 L390,116.128 L390,116.128 Z M390,127 C390,128.104 389.104,129 388,129 L382.832,129 L375.464,121.535 L384,112.999 L390,118.999 L390,127 L390,127 Z M364,129 C362.896,129 362,128.104 362,127 L362,126.061 L369.945,118.945 L380.001,129 L364,129 L364,129 Z M388,99 L364,99 C361.791,99 360,100.791 360,103 L360,127 C360,129.209 361.791,131 364,131 L388,131 C390.209,131 392,129.209 392,127 L392,103 C392,100.791 390.209,99 388,99 L388,99 Z"
+          sketch:type="MSShapeGroup"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/ParagraphIcon.vue b/src/shared/icons/ParagraphIcon.vue
new file mode 100644
index 0000000..8061cbe
--- /dev/null
+++ b/src/shared/icons/ParagraphIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :fill="color ?? '#000000'"
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2,12H5a1,1,0,0,0,0-2H4.635l.586-1.692H8.779L9.365,10H9a1,1,0,0,0,0,2h3a1,1,0,0,0,0-2h-.518L8.945,2.673A1,1,0,0,0,8,2H6a1,1,0,0,0-.945.673L2.518,10H2a1,1,0,0,0,0,2ZM6.712,4h.576l.8,2.308H5.913ZM23,4a1,1,0,0,1-1,1H15a1,1,0,0,1,0-2h7A1,1,0,0,1,23,4Zm0,6a1,1,0,0,1-1,1H15a1,1,0,0,1,0-2h7A1,1,0,0,1,23,10Zm0,5a1,1,0,0,1-1,1H2a1,1,0,0,1,0-2H22A1,1,0,0,1,23,15Zm0,6a1,1,0,0,1-1,1H2a1,1,0,0,1,0-2H22A1,1,0,0,1,23,21Z"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/PlusIcon.vue b/src/shared/icons/PlusIcon.vue
new file mode 100644
index 0000000..9afde0a
--- /dev/null
+++ b/src/shared/icons/PlusIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 12H18M12 6V18"
+      :stroke="color ?? '#000000'"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/TableIcon.vue b/src/shared/icons/TableIcon.vue
new file mode 100644
index 0000000..d010f47
--- /dev/null
+++ b/src/shared/icons/TableIcon.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 9.5H21M3 14.5H21M8 4.5V19.5M6.2 19.5H17.8C18.9201 19.5 19.4802 19.5 19.908 19.282C20.2843 19.0903 20.5903 18.7843 20.782 18.408C21 17.9802 21 17.4201 21 16.3V7.7C21 6.5799 21 6.01984 20.782 5.59202C20.5903 5.21569 20.2843 4.90973 19.908 4.71799C19.4802 4.5 18.9201 4.5 17.8 4.5H6.2C5.0799 4.5 4.51984 4.5 4.09202 4.71799C3.71569 4.90973 3.40973 5.21569 3.21799 5.59202C3 6.01984 3 6.57989 3 7.7V16.3C3 17.4201 3 17.9802 3.21799 18.408C3.40973 18.7843 3.71569 19.0903 4.09202 19.282C4.51984 19.5 5.07989 19.5 6.2 19.5Z"
+      :stroke="color ?? '#000000'"
+      stroke-width="2"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/TrashIcon.vue b/src/shared/icons/TrashIcon.vue
new file mode 100644
index 0000000..2a18eee
--- /dev/null
+++ b/src/shared/icons/TrashIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M14 10V17M10 10V17"
+      :stroke="color ?? '#000000'"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/ui/Button.vue b/src/shared/ui/Button.vue
index 59a831a..a0f76aa 100644
--- a/src/shared/ui/Button.vue
+++ b/src/shared/ui/Button.vue
@@ -25,7 +25,7 @@ interface Props {
     | 'black';
 }
 const props = defineProps<Props>();
-const colorTheme = computed(() => {
+const themeColor = computed(() => {
   if (!props?.theme) return '#0ea5e9';
   switch (props?.theme) {
     case 'white':
@@ -64,7 +64,7 @@ const colorTheme = computed(() => {
   return '#ffffff';
 });
 const textColor = computed(() => {
-  if (!props.theme) return '#ffffff';
+  if (!props.theme) return '#000000';
   if (props.theme === 'white') return '#000000';
   return '#ffffff';
 });
@@ -81,7 +81,7 @@ const textColor = computed(() => {
       }
     ]"
   >
-    <span :style="`background-color: ${colorTheme}`" class="background"></span>
+    <span :style="`background-color: ${themeColor}`" class="background"></span>
     <span
       :class="[
         'icon',
diff --git a/src/shared/ui/Drawer.vue b/src/shared/ui/Drawer.vue
index 50dfbf4..9a3bb52 100644
--- a/src/shared/ui/Drawer.vue
+++ b/src/shared/ui/Drawer.vue
@@ -23,7 +23,7 @@ interface Props {
     | 'black';
 }
 const props = defineProps<Props>();
-const colorTheme = computed(() => {
+const themeColor = computed(() => {
   if (!props?.theme) return '#0ea5e9';
   switch (props?.theme) {
     case 'white':
@@ -82,7 +82,7 @@ const isVisible = useVModel(props, 'isVisible', emit);
       @click.prevent="isVisible = false"
     ></section>
     <section
-      :style="`color: ${textColor}; background-color: ${colorTheme}`"
+      :style="`color: ${textColor}; background-color: ${themeColor}`"
       :class="[
         'drawer',
         {
diff --git a/src/shared/ui/MenuDial.vue b/src/shared/ui/MenuDial.vue
new file mode 100644
index 0000000..e7b45ba
--- /dev/null
+++ b/src/shared/ui/MenuDial.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import PlusIcon from '@/shared/icons/PlusIcon.vue';
+import { computed } from 'vue';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
+
+interface Props {
+  isActive: boolean;
+  items: {
+    label: string;
+    theme?: string;
+    textStyle?: 'bold' | 'italic';
+    onClick?: () => void;
+  }[];
+  size?: 'large' | 'extraLarge';
+  theme?: string;
+  direction?: 'left' | 'right' | 'up' | 'down';
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isActive']);
+const isActive = useVModel(props, 'isActive', emit);
+
+const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
+const textColor = computed(() => {
+  if (!props.theme) return '#000000';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
+const elementsSize = computed(() => {
+  if (!props?.size) return 30;
+  switch (props.size) {
+    case 'large':
+      return 40;
+    case 'extraLarge':
+      return 50;
+  }
+});
+const menuListStyles = computed(() => {
+  if (!props.direction)
+    return `transform: translateY(-${elementsSize.value / 2}px) translateX(${isActive.value ? elementsSize.value + 10 : 0}px)`;
+  switch (props.direction) {
+    case 'right':
+      return `transform: translateY(-${elementsSize.value / 2}px) translateX(${isActive.value ? elementsSize.value + 10 : 0}px)`;
+    case 'left':
+      return `flex-direction: row-reverse; transform: translateY(-${elementsSize.value / 2}px) ${isActive.value ? `translateX(calc(-100% - 10px))` : ''}`;
+    case 'up':
+      return `transform: translateY(-${isActive.value ? (0.5 + props.items.length) * elementsSize.value + 10 : elementsSize.value / 2}px)`;
+    case 'down':
+      return `transform: translateY(${isActive.value ? 20 : 0}px)`;
+  }
+});
+</script>
+
+<template>
+  <section class="menuContainer">
+    <button
+      :style="`background-color: ${themeColor ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${isActive ? 'rotate(135deg)' : ''};`"
+      class="menuButton"
+      @click.prevent="isActive = !isActive"
+    >
+      <slot name="buttonIcon" />
+      <PlusIcon v-if="!$slots.buttonIcon" :size="elementsSize - 10" :color="textColor" />
+    </button>
+    <ul
+      :class="[
+        'menuList',
+        {
+          menuListColumn: direction === 'up' || direction === 'down',
+          menuListOpened: isActive
+        }
+      ]"
+      :style="menuListStyles"
+    >
+      <li
+        v-for="(item, index) of items"
+        :key="item.label"
+        :style="`height: ${elementsSize}px; background-color: ${convertThemeToColorWhiteDefault(item.theme)};
+        color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'}; border-color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'}`"
+        class="menuElement"
+        @click.prevent="item?.onClick"
+      >
+        <slot :name="`${index + 1}IconBefore`" />
+        <p
+          style="padding: 5px"
+          :class="[
+            '',
+            {
+              bold: item.textStyle === 'bold',
+              italic: item.textStyle === 'italic'
+            }
+          ]"
+        >
+          {{ item.label }}
+        </p>
+        <slot :name="`${index + 1}IconAfter`" />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped>
+.menuContainer {
+  position: relative;
+}
+.menuButton {
+  position: relative;
+  border: 2px solid black;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  transition: 0.2s ease-in-out;
+}
+.menuButton:hover {
+  filter: brightness(75%);
+}
+.menuList {
+  display: flex;
+  pointer-events: none;
+  gap: 10px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  opacity: 0;
+  transition: 0.2s ease-in-out;
+}
+.menuListColumn {
+  flex-direction: column;
+}
+.menuListOpened {
+  pointer-events: auto;
+  opacity: 1;
+}
+.menuElement {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid white;
+  border-radius: 5px;
+  user-select: none;
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+}
+.menuElement:hover {
+  filter: brightness(75%);
+}
+.bold {
+  font-weight: bold;
+}
+.italic {
+  font-style: italic;
+}
+</style>
diff --git a/src/shared/ui/Modal.vue b/src/shared/ui/Modal.vue
index a72aa73..0ede5dd 100644
--- a/src/shared/ui/Modal.vue
+++ b/src/shared/ui/Modal.vue
@@ -23,8 +23,8 @@ interface Props {
     | 'black';
 }
 const props = defineProps<Props>();
-const colorTheme = computed(() => {
-  if (!props?.theme) return '#0ea5e9';
+const themeColor = computed(() => {
+  if (!props?.theme) return '#ffffff';
   switch (props?.theme) {
     case 'white':
       return '#ffffff';
@@ -59,7 +59,7 @@ const colorTheme = computed(() => {
     case 'black':
       return '#000000';
   }
-  return '#0ea5e9';
+  return '#ffffff';
 });
 const textColor = computed(() => {
   if (!props.theme) return '#000000';
@@ -81,7 +81,7 @@ const isVisible = useVModel(props, 'isVisible', emit);
       ]"
     ></section>
     <section
-      :style="`color: ${textColor}; background-color: ${colorTheme}`"
+      :style="`color: ${textColor}; background-color: ${themeColor}`"
       :class="[
         'modal',
         {
@@ -103,7 +103,7 @@ const isVisible = useVModel(props, 'isVisible', emit);
               fill-rule="evenodd"
               clip-rule="evenodd"
               d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
-              :fill="textColor ?? '#1C274C'"
+              :fill="textColor ?? '#ffffff'"
             />
           </svg>
         </div>
diff --git a/src/shared/ui/ToggleSwitch.vue b/src/shared/ui/ToggleSwitch.vue
index 86ba7f3..a2a8101 100644
--- a/src/shared/ui/ToggleSwitch.vue
+++ b/src/shared/ui/ToggleSwitch.vue
@@ -26,7 +26,7 @@ const props = defineProps<Props>();
 const emit = defineEmits(['update:isActive']);
 const isActive = useVModel(props, 'isActive', emit);
 
-const colorTheme = computed(() => {
+const themeColor = computed(() => {
   switch (props.theme) {
     case 'white':
       return '#ffffff';
@@ -102,7 +102,7 @@ const sizes = computed(() => {
     @click.prevent="isActive = !isActive"
   >
     <span
-      :style="`background-color: ${colorTheme ?? '#0ea5e9'}; border-radius: ${sizes.borderRadius}px;`"
+      :style="`background-color: ${themeColor ?? '#0ea5e9'}; border-radius: ${sizes.borderRadius}px;`"
       :class="[
         'activeBackground',
         {
diff --git a/src/shared/ui/Tree.vue b/src/shared/ui/Tree.vue
index cc4d736..2705c18 100644
--- a/src/shared/ui/Tree.vue
+++ b/src/shared/ui/Tree.vue
@@ -39,7 +39,7 @@ interface Props {
 }
 const props = defineProps<Props>();
 const items = computed(() => props.items);
-const colorTheme = computed(() => {
+const themeColor = computed(() => {
   if (!props?.theme) return '#ffffff';
   switch (props?.theme) {
     case 'white':
@@ -121,11 +121,11 @@ const toggleIsOpen = (item) =>
 
 <template>
   <ul
-    :style="`background-color: ${colorTheme ?? 'white'}; max-width: ${maxWidth ?? 300}px`"
+    :style="`background-color: ${themeColor ?? 'white'}; max-width: ${maxWidth ?? 300}px`"
     class="tree"
   >
     <li
-      v-for="item of items"
+      v-for="(item, index) of items"
       :key="item.text"
       :class="[
         'item flex',
@@ -183,9 +183,13 @@ const toggleIsOpen = (item) =>
           }
         ]"
       >
-        <a :href="item.link" class="text">{{ item.text }}</a>
+        <div class="textContainer">
+          <slot :name="`${index + 1}IconBefore`" />
+          <a :href="item.link" class="text">{{ item.text }}</a>
+          <slot :name="`${index + 1}IconAfter`" />
+        </div>
         <div class="children">
-          <div v-for="child of item.children" :key="child.text" class="flex item">
+          <div v-for="(child, indexChild) of item.children" :key="child.text" class="flex item">
             <svg
               v-if="child.children"
               :class="[
@@ -237,9 +241,17 @@ const toggleIsOpen = (item) =>
                 }
               ]"
             >
-              <a :href="child.link" class="text">{{ child.text }}</a>
+              <div class="textContainer">
+                <slot :name="`${index + 1}-${indexChild + 1}IconBefore`" />
+                <a :href="child.link" class="text">{{ child.text }}</a>
+                <slot :name="`${index + 1}-${indexChild + 1}IconAfter`" />
+              </div>
               <div class="children">
-                <div v-for="grandChild of child.children" :key="grandChild.text" class="flex item">
+                <div
+                  v-for="(grandChild, indexGrandChild) of child.children"
+                  :key="grandChild.text"
+                  class="flex item"
+                >
                   <div
                     :class="[
                       'content',
@@ -250,7 +262,15 @@ const toggleIsOpen = (item) =>
                       }
                     ]"
                   >
-                    <p :href="grandChild.link" class="text">{{ grandChild.text }}</p>
+                    <div class="textContainer">
+                      <slot
+                        :name="`${index + 1}-${indexChild + 1}-${indexGrandChild + 1}IconBefore`"
+                      />
+                      <p :href="grandChild.link" class="text">{{ grandChild.text }}</p>
+                      <slot
+                        :name="`${index + 1}-${indexChild + 1}-${indexGrandChild + 1}IconAfter`"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -275,15 +295,15 @@ const toggleIsOpen = (item) =>
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease;
-  background-color: v-bind(colorTheme);
+  background-color: v-bind(themeColor);
 }
 .text {
-  display: block;
+  display: inline-block;
   position: relative;
-  padding: 4px 0 4px 5px;
+  padding: 4px 0;
   z-index: 3;
   color: v-bind(textColor);
-  background-color: v-bind(colorTheme);
+  background-color: v-bind(themeColor);
   word-break: break-word;
 }
 .openButton {
@@ -312,6 +332,11 @@ const toggleIsOpen = (item) =>
   opacity: 1;
   max-height: 1000px;
 }
+.textContainer {
+  display: flex;
+  gap: 10px;
+  margin-left: 10px;
+}
 .flex {
   display: flex;
   align-items: start;
-- 
GitLab