diff --git a/src/app/assets/icons/close-circle.svg b/src/app/assets/icons/close-circle.svg
index 6d3a6e82172c31bbf1ca632d352dd38196366822..22022e72d3428b011d28f843fd9d46e37add8a54 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 b7736c78700718a292db44a8f0684192d644af85..0c447b6829ef87ad527104b8815efb0aab4e2af7 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 79085411a39c2224a87fa013dafc30e8d99f8c5c..9d8258e0ea4b1ca7b2b397e73c61584bf069f6cc 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 0abd79679ffbcf2ef738afa120fb189ffdfbb6bb..f468b7fa11391eaaac9496658e7857ee2d21cc43 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 6d30c22730be2cc3eac5aadd8ac6335d983d48d2..ea60bfd0633ba7bb8abce53a970a0f6c191030e8 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 c12fa1566aaf8e83ff7443de7e2352f7c5c7f451..34f2f4aa9298b4416fccd1790a98f3d11cdddc27 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 0000000000000000000000000000000000000000..6177ca0ebd2d3f89c77398c4f881565debcdf28f
--- /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 0000000000000000000000000000000000000000..1b054d4aa0cb3096c5432d451c7b3dcc058a129f
--- /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 b46b63e28355c12cf15e29d49ae05c8d6f3d724a..dd58ce5a0b58ad6788ab05a7b37a3428be7a134b 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 0f7b65bca3ae6ea0a29bced2f1de91592566b494..1e4c5eb1d3536b35b4925adf25a7f3a81b3b0ad8 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 d47b7016453562ead5985323985b91092380d2e4..b2e8700bb93f794ed5b1a7a7fdb9a60a87d37a2b 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 c7c0be0c813dc3f1dcbd481de8ce27d2e616560f..d120564e8c4a0aa3b14889ffae1344f73ff4f10a 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 967c7adf36dfa05e734aa7c448a60bd4f90389d4..7b5a0bfb590ec842437e97562a35b2320903ee7a 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 cd1ee2a6fda3dcdb07f430cc754680236d89b6cc..d8adc5d2b5ddd47807f8f4edc4d9f139ec7fc965 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 1d5fb07c2a3621795e9287a8cfd061727b9a1257..3dce9b472aec00012d8419825fb1ea4733f91e2c 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 d14a5a9a432921a3304f9c4585e60b87d392246f..3d511980c59062d053067ddbb9cb5bf198b4c1a0 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 91eaf4c1b9d7b42ea1002d027fdfb03a623e266e..0000000000000000000000000000000000000000
--- 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 a5cbb16faa500abb9dfb4432b129ba1b47ee7c32..4c24ee2a45527177b191aa47d89d9081ae24b24e 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 2470a5983c123313a56b07f34af9f9ca88989964..8f155941f7485f6b1a81669423265f1eaafc45a1 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 7d8f93e68ab9cbc5f1ac50f31c3da883e4324719..0000000000000000000000000000000000000000
--- 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 d9a1b2db12161ac6830a76f850ff9b5d00335b6a..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..904c8fb648bd1a8aad46ad9ee6e01afdb934a529
--- /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 0000000000000000000000000000000000000000..50dfbf48849771ea6308d3962d5b10eaf206b96c
--- /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 0000000000000000000000000000000000000000..a72aa736bf69874c94ffd0cf26991066b687bcd4
--- /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 e2b89cf96e136845077faec452b391f0af1fadf8..86ba7f32d91fc76265660c62e6d1cbabb675876f 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 0000000000000000000000000000000000000000..cc4d7366528380cf83957e4083430c4de72c0eba
--- /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 688ad161817ba36a1610617e066ac802881cf579..e28872399a232d3bf0f10a542b95045e47abeec3 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 0000000000000000000000000000000000000000..ffff72984528cf7be0f3f748cae8bc91acdef15b
--- /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 bc675603c95a7d08acb7fffe3d103d5462799799..bdbe96ab7f306a652a869e5107483214acfea6af 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 0000000000000000000000000000000000000000..50dabe08072897065fbb22dcbfe786fb10862f56
--- /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 0000000000000000000000000000000000000000..fcd6ccf0166ddab8d9244c90bfc387c25c2bcb71
--- /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 0000000000000000000000000000000000000000..41b9327a7b62ede67f308e29576928c7bc5d636b
--- /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 0000000000000000000000000000000000000000..07ca726ed579caa03366f7e28e5b3732804c21a1
--- /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>