feat(navigation): show favorite projects on top

src/components/home/ProjectsNavigation.vue

@@ -8,12 +8,13 @@
 		handle=".handle"
 		tag="ul"
 		item-key="id"
+		:disabled="!allowDrag"
 		:component-data="{
 			type: 'transition-group',
 			name: !drag ? 'flip-list' : null,
 			class: [
 				'menu-list can-be-hidden',
-				{ 'dragging-disabled': false }
+				{ 'dragging-disabled': !allowDrag }
 			]
 		}"
 	>
@@ -67,6 +68,7 @@
 				<ProjectsNavigation
 					v-if="!collapsedProjects[p.id]"
 					v-model="p.childProjects"
+					:allow-drag="true"
 				/>
 			</li>
 		</template>
@@ -92,6 +94,7 @@ import {useProjectStore} from '@/stores/projects'
 
 const props = defineProps<{
 	modelValue: IProject[],
+	allowDrag: boolean,
 }>()
 const emit = defineEmits(['update:modelValue'])
 

src/components/home/navigation.vue

@@ -48,8 +48,12 @@
 			</ul>
 		</nav>
 
+		<nav class="menu" v-if="favoriteProjects">
+			<ProjectsNavigation v-model="favoriteProjects" :allow-drag="false"/>
+		</nav>
+
 		<nav class="menu">
-			<ProjectsNavigation v-model="projects"/>
+			<ProjectsNavigation v-model="projects" :allow-drag="true"/>
 		</nav>
 
 		<PoweredByLink/>
@@ -78,6 +82,13 @@ onBeforeMount(async () => {
 const projects = computed(() => Object.values(projectStore.projects)
 	.filter(p => p.parentProjectId === 0 && !p.isArchived)
 	.sort((a, b) => a.position < b.position ? -1 : 1))
+const favoriteProjects = computed(() => Object.values(projectStore.projects)
+	.filter(p => !p.isArchived && p.isFavorite)
+	.map(p => ({
+		...p,
+		childProjects: [],
+	}))
+	.sort((a, b) => a.position < b.position ? -1 : 1))
 </script>
 
 <style lang="scss" scoped>