From aceef6edd8bd1663249e9d06fc1d4a063add4689 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Sun, 10 Mar 2024 17:17:01 +0000
Subject: Add more options to sidebar

---
 components/editor/SidebarMainConfiguration.vue | 57 ++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 components/editor/SidebarMainConfiguration.vue

(limited to 'components/editor/SidebarMainConfiguration.vue')

diff --git a/components/editor/SidebarMainConfiguration.vue b/components/editor/SidebarMainConfiguration.vue
new file mode 100644
index 0000000..c4727c6
--- /dev/null
+++ b/components/editor/SidebarMainConfiguration.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const route = useRoute();
+
+const setSelected = () => {
+  navigateTo({ path: '/config' })
+};
+
+const selected = computed(() => {
+  return route.path.startsWith('/config');
+});
+</script>
+
+<template>
+  <div id="container" :class="{ selected: selected }">
+    <span id="title" @click="setSelected">
+      <font-awesome-icon class="icon" :icon="['fas', 'wrench']" />
+      <span id="name">
+        Configuration
+      </span>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+#container {
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  transition: background-color 0.3s;
+  border-bottom: 1px solid var(--color-border-soft);
+  max-height: 45px;
+  overflow-y: hidden;
+
+  #title {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    gap: 1rem;
+    font-size: 1.1rem;
+
+    #name {
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+    }
+  }
+}
+
+.selected {
+  background-color: var(--color-primary-mute);
+}
+
+#container:hover {
+  background-color: var(--color-hover);
+}
+</style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2