From 752fc83bbe4e64eeb0b64be59806939f3fb60f54 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Wed, 23 Oct 2024 21:14:05 -0400
Subject: [PATCH] Improvement of the content creation menu

---
 src/views/contents/ContentEditorPage.vue | 56 ++++++++++++++----------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/views/contents/ContentEditorPage.vue b/src/views/contents/ContentEditorPage.vue
index 00f12cc..bd30b59 100644
--- a/src/views/contents/ContentEditorPage.vue
+++ b/src/views/contents/ContentEditorPage.vue
@@ -3,17 +3,14 @@ import { ref } from 'vue';
 import HTMLContentEditor from "@/views/contents/HTMLContentEditor.vue";
 import QuickyContentEditor from "@/views/contents/QuickyContentEditor.vue";
 
-
 const showQuickyEditor = ref(true);
 const showHtmlEditor = ref(false);
 
-
 const toggleQuickyEditor = () => {
   showQuickyEditor.value = true;
   showHtmlEditor.value = false;
 };
 
-
 const toggleHtmlEditor = () => {
   showHtmlEditor.value = true;
   showQuickyEditor.value = false;
@@ -21,41 +18,52 @@ const toggleHtmlEditor = () => {
 </script>
 
 <template>
-  <div class="editor-container">
-    <div class="editor-buttons">
-      <!-- Boutons -->
-      <button @click="toggleQuickyEditor">Quicky</button>
-      <button @click="toggleHtmlEditor">HTML</button>
-    </div>
+  <div class="editor-buttons flex flex-column items-center rounded-2xl mt-2">
+    <div class="mb-4 text-xl uppercase">Éditeurs de contenu</div>
+  
+    <div class="flex flex-row space-x-4">
+      
+      <v-btn
+          :variant="showQuickyEditor ? 'elevated' : 'plain'"
+          @click="toggleQuickyEditor"
+      >
+        Quicky
+      </v-btn>
 
-   
-    <div v-if="showQuickyEditor" class="mt-16"> 
-      <quicky-content-editor />
+      <v-btn
+          :variant="showHtmlEditor ? 'elevated' : 'plain'"
+          @click="toggleHtmlEditor"
+      >
+        Article
+      </v-btn>
     </div>
+  </div>
 
-    <div v-if="showHtmlEditor" class="mt-16"> 
-      <HTMLContentEditor />
+  <div class="flex flex-row">
+    <div>
+      <div v-if="showQuickyEditor" class="mt-16">
+        <quicky-content-editor />
+      </div>
+
+      <div v-if="showHtmlEditor" class="mt-16">
+        <HTMLContentEditor />
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.editor-container {
-  width: 1000px;
-  margin: 0 auto;
-}
-
 .editor-buttons {
+  display: flex;
+  justify-content: center;
   position: fixed;
   top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 2;
+  left: 245px; 
+  width: calc(100% - 250px); 
   background-color: white;
+  z-index: 2;
   padding: 1rem;
   border-bottom: 1px solid #ccc;
-  width: 100%;
-  text-align: center;
 }
 
 button {