fix: use the color bubble as handle if the project has a color

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

src/styles/theme/navigation.scss

@@ -10,6 +10,8 @@
     .color-bubble {
       height: 12px;
       flex: 0 0 12px;
+      opacity: 1;
+      margin: 0 .5rem 0 .25rem;
     }
   }