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

<template>
    <ContentSidebar v-if="(navigationTree && navigationTree.length >= 1) && isVisibleNavigationBars" class="relative lg:!grid">

		<!--Full screen button-->
        <div @click="$store.dispatch('toggleNavigationBars')" class="absolute top-2.5 right-0 inline-block cursor-pointer p-3 opacity-0 transition-all duration-200 hover:opacity-70">
            <chevrons-left-icon size="18" />
        </div>

		<div class="mb-auto">
			<!--Locations-->
			<ContentGroup :title="$t('Base')">
				<b @click="goHome" class="flex items-center py-2.5 cursor-pointer" :class="{'router-link-active': $route.params.id === sharedDetail.data.attributes.item_id}">
					<home-icon size="17" class="vue-feather icon-active mr-2.5" />
					<small class="text-active text-xs font-bold">
						{{ $t('Home') }}
					</small>
				</b>
			</ContentGroup>

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

		<ContentGroup class="mt-auto">
			<router-link v-if="! config.isAuthenticated" :to="{name: 'SignIn'}" class="flex items-center cursor-pointer group py-2.5">
                <div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
                    <user-icon size="14" class="vue-feather group-hover-text-theme" />
                </div>
				<b class="text-xs group-hover-text-theme">
					Sign In or Create Account
				</b>
            </router-link>
			<div @click="$store.dispatch('toggleThemeMode')" :title="$t('dark_mode_toggle')" class="flex items-center cursor-pointer group py-2.5">
                <div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
                    <sun-icon v-if="isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
                    <moon-icon v-if="!isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
                </div>
				<b class="text-xs group-hover-text-theme">
					Set {{ isDarkMode ? 'Light' : 'Dark' }} Mode
				</b>
            </div>
		</ContentGroup>

    </ContentSidebar>
</template>

<script>
import { UserIcon, SunIcon, MoonIcon, ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
import ContentGroup from '../../../components/Sidebar/ContentGroup'
import { events } from '../../../bus'
import { mapGetters } from 'vuex'

export default {
    name: 'NavigationSharePanel',
    components: {
        TreeMenuNavigator,
        ContentSidebar,
        ContentGroup,
		UserIcon,
		SunIcon,
		MoonIcon,
        UploadCloudIcon,
		ChevronsLeftIcon,
        UserCheckIcon,
        FolderIcon,
        Trash2Icon,
        UsersIcon,
        HomeIcon,
        LinkIcon,
        XIcon,
    },
    computed: {
        ...mapGetters(['sharedDetail', 'navigation', 'clipboard', 'config', 'user', 'isVisibleNavigationBars', 'isDarkMode']),
        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,
                },
            })
        },
    },
    created() {
        // Listen for dragstart folder items
        events.$on('dragstart', (item) => (this.draggedItem = item))
    },
}
</script>