Popover refactored

resources/js/components/Desktop/PopoverItem.vue

@@ -0,0 +1,51 @@
+<template>
+	<div v-if="isVisible" class="popover-item">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+	import {events} from '@/bus'
+
+	export default {
+		name: 'PopoverItem',
+		props: [
+			'name'
+		],
+		data() {
+			return {
+				isVisible: false,
+			}
+		},
+		mounted() {
+			events.$on('popover:open', name => {
+				if (this.name === name) this.isVisible = !this.isVisible
+			})
+
+			events.$on('unClick', () => this.isVisible = false)
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "@assets/vuefilemanager/_variables";
+	@import "@assets/vuefilemanager/_mixins";
+
+	.popover-item {
+		min-width: 250px;
+		position: absolute;
+		z-index: 9;
+		box-shadow: $shadow;
+		background: white;
+		border-radius: 8px;
+		overflow: hidden;
+		right: 0;
+		top: 50px;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.popover-item {
+			background: $dark_mode_foreground;
+		}
+	}
+</style>

resources/js/components/Desktop/PopoverWrapper.vue

@@ -0,0 +1,18 @@
+<template>
+	<div class="popover-wrapper">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'PopoverWrapper',
+	}
+</script>
+
+<style scoped lang="scss">
+
+	.popover-wrapper {
+		position: relative;
+	}
+</style>

resources/js/components/Desktop/ToolbarGroup.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="toolbar-button-wrapper">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'ToolbarWrapper',
+	}
+</script>
+
+<style scoped lang="scss">
+
+	.toolbar-button-wrapper {
+		margin-left: 28px;
+		display: flex;
+		align-items: center;
+	}
+
+	@media only screen and (max-width: 1024px) {
+
+		.toolbar-button-wrapper {
+			margin-left: 25px;
+		}
+	}
+
+</style>

resources/js/components/Desktop/ToolbarWrapper.vue

@@ -0,0 +1,21 @@
+<template>
+	<div class="toolbar-tools">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'ToolbarWrapper',
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "@assets/vuefilemanager/_variables";
+	@import "@assets/vuefilemanager/_mixins";
+
+	.toolbar-tools {
+		text-align: right;
+		display: flex;;
+	}
+</style>