feat: replace color dot with handle icon on hover

src/components/home/ProjectsNavigationItem.vue

@@ -16,15 +16,22 @@
 				class="list-menu-link"
 				:class="{'router-link-exact-active': currentProject.id === project.id}"
 			>
-				<span class="collapse-project-button-placeholder" v-if="!canCollapse || childProjects?.length === 0"></span>
+				<span
-				<ColorBubble
+					v-if="!canCollapse || childProjects?.length === 0"
-					v-if="project.hexColor !== ''"
+					class="collapse-project-button-placeholder"
-					:color="project.hexColor"
+				></span>
-					class="handle"
+				<div class="color-bubble-handle-wrapper">
-				/>
+					<ColorBubble
-				<span class="icon menu-item-icon handle" v-else>
+						v-if="project.hexColor !== ''"
-					<icon icon="grip-lines"/>
+						:color="project.hexColor"
-				</span>
+					/>
+					<span
+						class="icon menu-item-icon handle lines-handle"
+						:class="{'has-color-bubble': project.hexColor !== ''}"
+					>
+						<icon icon="grip-lines"/>
+					</span>
+				</div>
 				<span class="list-menu-title">{{ getProjectTitle(project) }}</span>
 			</BaseButton>
 			<BaseButton
@@ -124,4 +131,26 @@ const canNestDeeper = computed(() => {
 .list-menu:hover > div > .favorite {
 	opacity: 1;
 }
+
+.list-menu:hover > div > a > .color-bubble-handle-wrapper > .color-bubble {
+	opacity: 0;
+}
+
+.color-bubble-handle-wrapper {
+	position: relative;
+	width: 1rem;
+	height: 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	margin-right: .25rem;
+
+	.color-bubble, .icon {
+		transition: all $transition;
+		position: absolute;
+		width: 12px;
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+}
 </style>