aboutsummaryrefslogtreecommitdiffstats
path: root/components/editor/Sidebar.vue
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2024-03-12 17:48:23 +0000
committerLeonardo Bishop <me@leonardobishop.com>2024-03-12 17:48:23 +0000
commitaddf95bc7e1e694cd9ba7797c8b0847bfecaf54c (patch)
tree422e96cb24eb3b3ec9d4c96de555b8fa14239c59 /components/editor/Sidebar.vue
parent8664ad155c89d47affd94f8b0385ebf39841f1f8 (diff)
Add nuxt prefixes back to component file names
Diffstat (limited to 'components/editor/Sidebar.vue')
-rw-r--r--components/editor/Sidebar.vue103
1 files changed, 0 insertions, 103 deletions
diff --git a/components/editor/Sidebar.vue b/components/editor/Sidebar.vue
deleted file mode 100644
index 992dd86..0000000
--- a/components/editor/Sidebar.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script setup lang="ts">
-import { useSessionStore } from '@/stores/session';
-import { storeToRefs } from 'pinia';
-
-const sessionStore = useSessionStore();
-
-const { session } = storeToRefs(sessionStore);
-
-const currentType = ref('quests' as 'quests' | 'items');
-
-const setSelectedType = (type: 'quests' | 'items') => {
- currentType.value = type;
-}
-</script>
-
-<template>
- <div id="sidebar-container">
- <div id="selector">
- <span class="option" @click="setSelectedType('quests')" :class="{ selected: currentType === 'quests' }">
- <span>
- <font-awesome-icon :icon="['far', 'compass']" />
- Quests
- </span>
- </span>
- <span class="option" @click="setSelectedType('items')" :class="{ selected: currentType === 'items' }">
- <span>
- <font-awesome-icon :icon="['fas', 'cube']" />
- Items
- </span>
- </span>
- </div>
- <div id="quests" v-if="currentType === 'quests'">
- <EditorSidebarCategory v-for="category in session.categories" :key="category.id" :category="category" />
- <EditorSidebarQuest
- v-for="quest in session.quests.filter((q) => (!session.categories.some((c) => c.id === q.options.category)))"
- :key="quest.id" :quest="quest" />
- </div>
- <div id="configuration-container">
- <EditorSidebarMainConfiguration />
- </div>
- </div>
-</template>
-
-<style scoped>
-#sidebar-container {
- width: 20rem;
- border-right: 1px solid var(--color-border);
- height: calc(100vh - 73px);
- max-height: calc(100vh - 73px);
- background-color: var(--color-background);
- user-select: none;
- position: relative;
- z-index: 0;
- box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
-
- #selector {
- display: flex;
- height: 30px;
- align-items: center;
- cursor: pointer;
-
- .option {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- transition: background-color 0.3s;
-
- &.selected {
- background-color: var(--color-background);
-
- span {
- font-weight: 700;
- }
- }
-
- &:not(.selected) {
- background-color: var(--color-background-mute);
- color: var(--color-text-mute);
- transition: color 0.3s;
-
- &:hover {
- color: var(--color-text)
- }
- }
- }
- }
-
- #quests {
- max-height: calc(100vh - 73px - 46px - 30px);
- overflow-y: auto;
- }
-
- #configuration-container {
- height: 46px;
- border-top: 1px solid var(--color-border);
- position: absolute;
- bottom: 0;
- width: 100%
- }
-}
-</style> \ No newline at end of file