From 4c0f16905b9e0c974166cbf7771fc74f88d9fa01 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 12 Apr 2023 10:27:32 +0200
Subject: [PATCH] fix: use the color bubble as handle if the project has a
 color

---
 src/components/home/ProjectsNavigationItem.vue | 8 ++++----
 src/styles/theme/navigation.scss               | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/home/ProjectsNavigationItem.vue b/src/components/home/ProjectsNavigationItem.vue
index 92d820265..5e521adbb 100644
--- a/src/components/home/ProjectsNavigationItem.vue
+++ b/src/components/home/ProjectsNavigationItem.vue
@@ -17,14 +17,14 @@
 				class="list-menu-link"
 				:class="{'router-link-exact-active': currentProject.id === project.id}"
 			>
-				<span class="icon menu-item-icon handle">
-					<icon icon="grip-lines"/>
-				</span>
 				<ColorBubble
 					v-if="project.hexColor !== ''"
 					:color="project.hexColor"
-					class="mr-1"
+					class="handle"
 				/>
+				<span class="icon menu-item-icon handle" v-else>
+					<icon icon="grip-lines"/>
+				</span>
 				<span class="list-menu-title">{{ getProjectTitle(project) }}</span>
 			</BaseButton>
 			<BaseButton
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 383bea575..f10c79809 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -10,6 +10,8 @@
     .color-bubble {
       height: 12px;
       flex: 0 0 12px;
+      opacity: 1;
+      margin: 0 .5rem 0 .25rem;
     }
   }