From 8ea2b3caf132162c055ac4cb5ea84fa87ca39241 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Tue, 17 Dec 2024 16:01:02 +0100
Subject: [PATCH] #42 Add styling for Inspirations submenu

---
 .../brief/add-images-modal/AddImagesModal.vue | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/project/brief/add-images-modal/AddImagesModal.vue b/src/components/project/brief/add-images-modal/AddImagesModal.vue
index b975d78..94ff5f1 100644
--- a/src/components/project/brief/add-images-modal/AddImagesModal.vue
+++ b/src/components/project/brief/add-images-modal/AddImagesModal.vue
@@ -16,7 +16,14 @@
             :class="{ active: activeTabId === tab.id }"
             @click="activeTabId = tab.id"
           >
-            {{ tab.name }}
+            <span>{{ tab.name }}</span>
+            <!--
+            <ul>
+              <li class="active"><span>Premières Lumières</span></li>
+              <li><span>Éclat Hivernal</span></li>
+              <li><span>Crépuscule Doré</span></li>
+            </ul>
+            -->
           </li>
         </ul>
       </nav>
@@ -93,21 +100,23 @@ const deleteIsOpen = false;
 #add-images [data-pc-section="content"] {
   height: calc(100% - 3.75rem);
 }
-#add-images nav li {
+#add-images nav li > span {
   position: relative;
-  height: var(--space-48);
+  display: inline-block;
+  min-height: var(--space-48);
   border-left: 1px solid var(--color-grey-400);
   padding: var(--space-12) var(--space-16);
   color: var(--color-grey-400);
   font-weight: 500;
   cursor: pointer;
+  width: 100%;
 }
-#add-images nav li:hover,
-#add-images nav li.active {
+#add-images nav li:hover > span,
+#add-images nav li.active > span {
   color: var(--color-grey-800);
   border-left-color: var(--color-grey-800);
 }
-#add-images nav li.active::before {
+#add-images nav > ul > li.active > span::before {
   content: "";
   width: 2px;
   position: absolute;
@@ -116,6 +125,19 @@ const deleteIsOpen = false;
   bottom: 0;
   background: var(--color-grey-800);
 }
+#add-images nav > ul > li:not(.active) ul {
+  display: none;
+}
+#add-images nav > ul ul > li > span {
+  min-height: var(--space-32);
+  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-32);
+  font-family: var(--font-serif);
+  font-size: var(--text-sm);
+}
+#add-images nav > ul ul > li.active > span {
+  border-left-width: 2px;
+}
+
 #add-images [data-pc-name="fileupload"] button {
   padding: 3rem;
   aspect-ratio: 1/1;