vuefilemanager/resources/js/views/FileView/Components/NavigationSharePanel.vue

<template>
	<ContentSidebar v-if="navigationTree && navigationTree.length >= 1">
		<!--Locations-->
		<ContentGroup :title="$t('sidebar.locations_title')">
			<div class="menu-list-wrapper vertical">
				<a class="menu-list-item link" @click="goHome">
					<div class="icon">
						<home-icon size="17"/>
					</div>
					<div class="label">
						{{ $t('Home') }}
					</div>
				</a>
			</div>
		</ContentGroup>

		<!--Navigator-->
		<ContentGroup :title="$t('sidebar.navigator_title')" class="navigator">
			<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in navigationTree" :key="folder.id" />
		</ContentGroup>
	</ContentSidebar>
</template>

<script>
	import {FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon} from "vue-feather-icons";
	import UpgradeSidebarBanner from '/resources/js/components/Others/UpgradeSidebarBanner'
	import TreeMenuNavigator from '/resources/js/components/Others/TreeMenuNavigator'
	import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
	import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
	import {events} from "../../../bus";
	import {mapGetters} from "vuex";

export default {
	name: "NavigationSharePanel",
	components: {
		UpgradeSidebarBanner,
		TreeMenuNavigator,
		ContentSidebar,
		ContentGroup,
		UploadCloudIcon,
		UserCheckIcon,
		FolderIcon,
		Trash2Icon,
		UsersIcon,
		HomeIcon,
		LinkIcon,
		XIcon,
	},
	computed: {
		...mapGetters([
			'sharedDetail',
			'navigation',
			'clipboard',
			'config',
			'user',
		]),
		favourites() {
			return this.user.data.relationships.favourites.data.attributes.folders
		},
		storage() {
			return this.$store.getters.user.data.attributes.storage
		},
		tree() {
			return this.user.data.attributes.folders
		},
		navigationTree() {
			return this.navigation ? this.navigation[0].folders : undefined
		},
	},
	data() {
		return {
			draggedItem: undefined,
			area: false,
		}
	},
	methods: {
		goHome() {
			this.$router.replace({
				name: 'Public',
				params: {
					token: this.sharedDetail.data.attributes.token,
					id: this.sharedDetail.data.attributes.item_id
				}
			})
		},
		dragLeave() {
			this.area = false
		},
		dragEnter() {
			if (this.draggedItem && this.draggedItem.type !== 'folder') return

			if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return

			this.area = true
		},
		dragFinish() {
			this.area = false

			events.$emit('drop')

			// Check if dragged item is folder
			if (this.draggedItem && this.draggedItem.type !== 'folder') return

			// Check if folder exist in favourites
			if (this.favourites.find(folder => folder.id === this.draggedItem.id)) return

			// Prevent to move folders to self
			if (this.clipboard.length > 0 && this.clipboard.find(item => item.type !== 'folder')) return

			//Add to favourites non selected folder
			if (!this.clipboard.includes(this.draggedItem)) {
				this.$store.dispatch('addToFavourites', this.draggedItem)
			}

			//Add to favourites selected folders
			if (this.clipboard.includes(this.draggedItem)) {
				this.$store.dispatch('addToFavourites', null)
			}
		},
	},
	created() {
		// Listen for dragstart folder items
		events.$on('dragstart', item => this.draggedItem = item)

		// Get folder tree
		this.$store.dispatch('getFolderTree')
	}
}
</script>

<style lang="scss" scoped>

	.empty-note {

		&.navigator {
			padding: 5px 25px 10px;
		}

		&.favourites {
			padding: 5px 23px 10px;
		}
	}

	.navigator {
		width: 100%;
		overflow-x: auto;
	}

	@media only screen and (max-width: 1024px) {

		.empty-note {

			&.navigator {
				padding: 5px 20px 10px;
			}

			&.favourites {
				padding: 5px 18px 10px;
			}
		}
	}

	// Transition
	.folder-item-move {
		transition: all 300s ease;
	}

	.folder-item-enter-active {
		transition: all 300ms ease;
	}

	.folder-item-leave-active {
		transition: all 300ms;
	}

	.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
	{
		opacity: 0;
		transform: translateX(30px);
	}

	.folder-item-leave-active {
		position: absolute;
	}
</style>