From de3072794f333442064e0bff667600f5370625a9 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Thu, 23 Jan 2025 19:30:00 +0100
Subject: [PATCH] display leaf icon for menu items and projects when DTL is
 enable

close #103
---
 src/assets/css/src/0.2.variables.css          |  3 +++
 .../css/src/2.blocks.design-to-light.css      | 21 +++++++++++++++++++
 src/assets/css/src/2.blocks.project.css       |  2 ++
 src/components/Menu.vue                       |  5 +++++
 4 files changed, 31 insertions(+)

diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css
index e155f3a..e25844b 100755
--- a/src/assets/css/src/0.2.variables.css
+++ b/src/assets/css/src/0.2.variables.css
@@ -42,6 +42,9 @@
   --color-primary-hover: hsla(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 7%), 1); /* Focus - Accent */
   --color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
   --color-brand: var(--color-brand-100); /* Brand */
+  --color-dtl-15: hsla(127, 47%, 58%, 0.15);
+  --color-dtl-100: hsla(157, 100%, 29%, 1);
+  --color-dtl: var(--color-dtl-100);
   --color-background: var(--color-white);
   --color-text: var(--color-black);
   --color-focus-ring: var(--color-primary-50);
diff --git a/src/assets/css/src/2.blocks.design-to-light.css b/src/assets/css/src/2.blocks.design-to-light.css
index 88e4cf7..263dde6 100644
--- a/src/assets/css/src/2.blocks.design-to-light.css
+++ b/src/assets/css/src/2.blocks.design-to-light.css
@@ -1,5 +1,26 @@
 /* DESIGN TO LIGHT BLOCK */
 
+/* Menu */
+#menu [data-dtl="true"]::after,
+.project-item[data-dtl="true"] h3::after {
+  --icon-color: var(--color-dtl);
+  --icon-size: 1rem;
+  --icon: var(--icon-leaf);
+  content: "";
+  display: inline-block;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  background: var(--icon-color);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: var(--icon-size);
+  mask-image: var(--icon, var(--icon-circle));
+  margin-left: var(--space-8);
+}
+.project-item [data-dtl="true"]::after {
+  --icon-size: 1.25rem;
+}
+
 /* Button */
 #dtl-btn {
   position: fixed;
diff --git a/src/assets/css/src/2.blocks.project.css b/src/assets/css/src/2.blocks.project.css
index 49a824a..a477702 100644
--- a/src/assets/css/src/2.blocks.project.css
+++ b/src/assets/css/src/2.blocks.project.css
@@ -11,6 +11,8 @@
   min-width: 20rem;
 }
 .project-item h3 {
+  display: flex;
+  align-items: center;
   font-family: var(--font-serif);
   font-size: var(--text-lg);
   margin-bottom: var(--space-8);
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 43a503e..2c98683 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -71,6 +71,7 @@
                   : project.uri
               "
               :class="hasUnreadNotification(project) ? 'new' : undefined"
+              :data-dtl="project.isDTLEnabled ? 'true' : undefined"
               @click="collapse()"
               >{{ project.title }}</router-link
             >
@@ -344,6 +345,10 @@ button[aria-controls="menu"][aria-expanded="false"]
   margin-left: auto;
 }
 
+#menu a {
+  display: flex;
+  align-items: center;
+}
 #menu li a::before {
   content: "";
   position: absolute;