file view refactoring

package-lock.json

@@ -3555,7 +3555,7 @@
         },
         "defined": {
             "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+            "resolved": "https://registry.npm.taobao.org/defined/download/defined-1.0.0.tgz",
             "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
         },
         "del": {
@@ -6541,7 +6541,7 @@
         },
         "lodash.topath": {
             "version": "4.5.2",
-            "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
+            "resolved": "https://registry.npm.taobao.org/lodash.topath/download/lodash.topath-4.5.2.tgz",
             "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak="
         },
         "lodash.tostring": {
@@ -8179,7 +8179,7 @@
         },
         "postcss-functions": {
             "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+            "resolved": "https://registry.npm.taobao.org/postcss-functions/download/postcss-functions-3.0.0.tgz",
             "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
             "requires": {
                 "glob": "^7.1.2",
@@ -8787,7 +8787,7 @@
         },
         "pretty-hrtime": {
             "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+            "resolved": "https://registry.npm.taobao.org/pretty-hrtime/download/pretty-hrtime-1.0.3.tgz",
             "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
         },
         "private": {
@@ -10894,6 +10894,12 @@
                 }
             }
         },
+        "tailwindcss-debug-screens": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/tailwindcss-debug-screens/-/tailwindcss-debug-screens-2.2.0.tgz",
+            "integrity": "sha512-0WJj6mu2EC93a9Ac762TdPF5vIOdZEIpvP5yvTDP5r6kk6/5usMmMVUTGipT4qzCUGcgvuA+azmDl34k2fckhw==",
+            "dev": true
+        },
         "tapable": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",

package.json

@@ -15,6 +15,7 @@
         "laravel-mix": "^5.0.9",
         "resolve-url-loader": "^2.3.1",
         "sass-loader": "^8.0.2",
+        "tailwindcss-debug-screens": "^2.2.0",
         "vue-template-compiler": "^2.6.12"
     },
     "dependencies": {

resources/js/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="vuefilemanager" @click="unClick" v-cloak>
+    <div @click="unClick" v-cloak>
 
         <!--UI components-->
         <Alert />
@@ -154,21 +154,6 @@ export default {
     height: 100%;
 }
 
-#vuefilemanager {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-}
-
-@media only screen and (max-width: 690px) {
-
-    .is-scaled-down {
-        @include transform(scale(0.95));
-    }
-}
-
 // Dark mode support
 .dark {
 

resources/js/components/FilesView/DesktopToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="desktop-toolbar">
+    <div id="desktop-toolbar" class="md:block hidden">
         <div class="toolbar-wrapper">
 			<div @click="goBack" class="location">
 				<chevron-left-icon :class="{'is-active': isNotHomepage }" class="icon-back" size="17" />
@@ -360,12 +360,6 @@
 	}
 }
 
-@media only screen and (max-width: 960px) {
-	#desktop-toolbar {
-		display: none;
-	}
-}
-
 .dark {
 	.team-preview:hover {
 		background: $dark_mode_foreground;

resources/js/components/FilesView/FileActionsMobile.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="mobile-actions-wrapper">
+    <div class="sticky dark:bg-dark-background bg-white top-12 pb-3 px-4 z-10 whitespace-nowrap overflow-x-auto md:hidden block">
 
         <!--Show Buttons-->
         <div v-if="! isSelectMode" class="mobile-actions">
@@ -20,7 +20,7 @@
         </div>
 
         <!--Upload Progressbar-->
-        <UploadProgress />
+        <UploadProgress class="pt-3"/>
     </div>
 </template>
 
@@ -82,32 +82,4 @@
     .button-leave-active {
         position: absolute;
     }
-
-    #mobile-actions-wrapper {
-        display: none;
-        background: white;
-        position: sticky;
-        top: 35px;
-        z-index: 3;
-    }
-
-    .mobile-actions {
-        white-space: nowrap;
-        overflow-x: auto;
-        margin: 0 -15px;
-        padding: 10px 0 10px 15px;
-    }
-
-    @media only screen and (max-width: 960px) {
-
-        #mobile-actions-wrapper {
-            display: block;
-        }
-    }
-
-    .dark {
-        #mobile-actions-wrapper {
-            background: $dark_mode_background;
-        }
-    }
 </style>

resources/js/components/FilesView/FileBrowser.vue

@@ -1,7 +1,7 @@
 <template>
     <div
 		:class="{'is-offset': filesInQueueTotal > 0, 'is-dragging': isDragging }"
-		class="file-content"
+		class="file-content md:w-full md:overflow-y-auto md:h-full"
 		id="file-content-id"
 		@drop.stop.prevent="dropUpload($event)"
 		@keydown.delete="deleteItems"
@@ -9,20 +9,8 @@
 		@dragleave="dragLeave"
 		@dragover.prevent
 		tabindex="-1"
-	>
-        <div
-			:class="{'is-visible': isVisibleSidebar, 'mobile-multi-select': isMultiSelect}"
 		@click.self="filesContainerClick"
-			class="files-container"
-			ref="fileContainer"
 	>
-            <MobileToolbar />
-
-			<!--Mobile Actions-->
-            <FileActionsMobile>
-				<slot name="file-actions-mobile" />
-			</FileActionsMobile>
-
 		<!--Show empty page if no content-->
 		<EmptyFilePage>
 			<slot name="empty-file-page" />
@@ -69,18 +57,10 @@
 				/>
 			</transition-group>
 		</div>
-        </div>
-
-		<!--File Info Panel-->
-        <div :class="{'is-visible': isVisibleSidebar }" class="file-info-container">
-            <InfoSidebar />
-        </div>
     </div>
 </template>
 
 <script>
-    import FileActionsMobile from '/resources/js/components/FilesView/FileActionsMobile'
-	import MobileToolbar from '/resources/js/components/FilesView/MobileToolbar'
 	import EmptyFilePage from '/resources/js/components/FilesView/EmptyFilePage'
 	import EmptyMessage from '/resources/js/components/FilesView/EmptyMessage'
 	import FileItemList from '/resources/js/components/FilesView/FileItemList'
@@ -88,14 +68,11 @@
 	import InfoSidebar from '/resources/js/components/FilesView/InfoSidebar'
 	import {mapGetters} from 'vuex'
 	import {events} from '/resources/js/bus'
-	import {debounce} from "lodash";
 
 	export default {
 		name: 'FileBrowser',
 		components: {
-			FileActionsMobile,
 			EmptyFilePage,
-			MobileToolbar,
 			FileItemList,
 			FileItemGrid,
 			EmptyMessage,
@@ -231,7 +208,7 @@
 
 				// Scroll top
 				let container = document.getElementsByClassName(
-					'files-container'
+					'file-content'
 				)[0]
 
 				if (container)
@@ -264,11 +241,6 @@
 
 	}
 
-	.mobile-multi-select {
-		bottom: 50px !important;
-		top: 0px;
-	}
-
 	.button-upload {
 		display: block;
 		text-align: center;
@@ -282,7 +254,6 @@
 	}
 
 	.file-content {
-		display: flex;
 
 		&.is-dragging {
 			@include transform(scale(0.99));
@@ -290,16 +261,6 @@
 	}
 
 	.files-container {
-		overflow-x: hidden;
-		overflow-y: auto;
-		flex: 0 0 100%;
-		@include transition(150ms);
-		position: relative;
-		scroll-behavior: smooth;
-
-		&.is-visible {
-			flex: 0 1 100%;
-		}
 
 		.file-list {
 
@@ -311,12 +272,6 @@
 		}
 	}
 
-	.file-info-container {
-		flex: 0 0 300px;
-		padding-left: 20px;
-		overflow: auto;
-	}
-
 	// Transition
 	.file-move {
 		transition: transform 0.6s;
@@ -336,60 +291,16 @@
 		transform: translateX(-20px);
 	}
 
-	@media only screen and (min-width: 960px) {
-
-		.file-content {
-			position: absolute;
-			top: 72px;
-			left: 15px;
-			right: 15px;
-			bottom: 0;
-			@include transition;
-			overflow-y: auto;
-			overflow-x: hidden;
-
-			&.is-offset {
-				margin-top: 50px;
-			}
-		}
-	}
-
 	@media only screen and (max-width: 960px) {
 
-		.file-info-container {
-			display: none;
-		}
-
 		.mobile-search {
 			display: block;
 		}
-		.file-content {
-			position: absolute;
-			top: 0px;
-			left: 15px;
-			right: 15px;
-			bottom: 0;
-			@include transition;
-			overflow-y: auto;
-			overflow-x: hidden;
-
-			&.is-offset {
-				margin-top: 50px;
-			}
-		}
 	}
 
 	@media only screen and (max-width: 690px) {
 
 		.files-container {
-			padding-left: 15px;
-			padding-right: 15px;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			position: fixed;
-			overflow-y: auto;
 
 			.file-list {
 
@@ -399,25 +310,8 @@
 			}
 		}
 
-		.file-content {
-			position: absolute;
-			top: 0;
-			left: 0px;
-			right: 0px;
-			bottom: 0;
-			@include transition;
-
-			&.is-offset {
-				margin-top: 50px;
-			}
-		}
-
 		.mobile-search {
 			margin-bottom: 0;
 		}
-
-		.file-info-container {
-			display: none;
-		}
 	}
 </style>

resources/js/components/FilesView/InfoSidebar.vue

@@ -182,8 +182,7 @@
 <style scoped lang="scss">
 
 	.info-wrapper {
-		padding-bottom: 20px;
+		padding-bottom: 50px;
-		height: 100%;
 	}
 
 	.info-headline {

resources/js/components/FilesView/MobileToolbar.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="mobile-toolbar">
+    <div class="sticky top-0 dark:bg-dark-background bg-white flex text-center py-4 px-4 w-full justify-between items-center z-10 md:hidden block">
 
         <!-- Go back-->
-		<div @click="goBack" class="go-back-button">
+		<div @click="goBack" class="go-back-button flex text-left items-center">
             <chevron-left-icon size="17" class="icon-back" :class="{'is-visible': isLoadedFolder }" />
 
 			<!--Folder Title-->
@@ -13,7 +13,7 @@
 
         <!--More Actions-->
         <div class="more-actions-button">
-            <div v-if="$checkPermission('master')" @click="showMobileNavigation" class="tap-area">
+            <div v-if="$checkPermission('master')" @click="showMobileNavigation" class="tap-area px-1.5">
                 <menu-icon size="17" />
             </div>
         </div>
@@ -66,25 +66,7 @@
     @import '/resources/sass/vuefilemanager/_variables';
     @import '/resources/sass/vuefilemanager/_mixins';
 
-    .mobile-toolbar {
-        background: white;
-        text-align: center;
-        display: none;
-        padding: 10px 0;
-        position: sticky;
-        top: 0;
-        z-index: 6;
-
-        > div {
-            width: 100%;
-            flex-grow: 1;
-            align-self: center;
-            white-space: nowrap;
-        }
-
 	.go-back-button {
-			text-align: left;
-			flex: 1;
 
 		.icon-back {
 			pointer-events: none;
@@ -116,36 +98,18 @@
 	}
 
 	.more-actions-button {
-            flex: 1;
-            text-align: right;
 		position: relative;
 
 		.tap-area {
-                display: inline-block;
-                padding: 10px;
-                position: absolute;
-                right: -10px;
-                top: -20px;
 
 			path, line, polyline, rect, circle {
 				stroke: $text;
 			}
 		}
 	}
-    }
-
-    @media only screen and (max-width: 960px) {
-
-        .mobile-toolbar {
-            display: flex;
-        }
-    }
 
     .dark {
 
-        .mobile-toolbar {
-            background: $dark_mode_background;
-
 		.directory-name {
 			color: $dark_mode_text_primary;
 		}
@@ -157,5 +121,4 @@
 			}
 		}
     }
-    }
 </style>

resources/js/components/FilesView/Option.vue

@@ -1,5 +1,5 @@
 <template>
-    <li class="menu-option group" :class="{'hover-disabled': isHoverDisabled}">
+    <li class="menu-option group flex items-center" :class="{'hover-disabled': isHoverDisabled}">
         <div class="icon-left group-hover-text-theme">
             <calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
             <grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
@@ -41,9 +41,9 @@
             {{ title }}
         </div>
         <div v-if="arrow" class="icon-right group-hover-text-theme">
-            <chevron-right-icon v-if="arrow === 'right'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <chevron-right-icon v-if="arrow === 'right'" size="17" class="group-hover-text-theme inline-block" :class="{'text-theme': isActive}"/>
-            <arrow-up-icon v-if="arrow === 'up'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <arrow-up-icon v-if="arrow === 'up'" size="17" class="group-hover-text-theme inline-block" :class="{'text-theme': isActive}"/>
-            <arrow-down-icon v-if="arrow === 'down'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <arrow-down-icon v-if="arrow === 'down'" size="17" class="group-hover-text-theme inline-block" :class="{'text-theme': isActive}"/>
         </div>
     </li>
 </template>
@@ -150,18 +150,12 @@ import {
     cursor: pointer;
     width: 100%;
     color: $text;
-    display: flex;
-    align-items: center;
 
     .icon-right {
         vertical-align: middle;
         text-align: right;
         width: 100%;
 
-        svg {
-            @include transform(translateY(3px));
-        }
-
         polyline, line {
             color: inherit;
         }

resources/js/components/FilesView/UploadProgress.vue

@@ -4,7 +4,7 @@
             <div class="progress-title">
 
                 <!--Is processing-->
-				<span v-if="isProcessingFile">
+				<span v-if="isProcessingFile" class="flex items-center justify-center">
                     <refresh-cw-icon size="12" class="sync-alt text-theme" />
                     {{ $t('uploading.processing_file') }}
                 </span>
@@ -89,7 +89,6 @@
 
     .upload-progress {
         width: 100%;
-        padding-bottom: 10px;
         position: relative;
         z-index: 1;
 
@@ -98,7 +97,7 @@
 
             .cancel-icon {
                 cursor: pointer;
-                padding: 0 13px;
+                padding: 0 7px 0 13px;
 
                 &:hover {
 
@@ -119,16 +118,6 @@
         }
     }
 
-    @media only screen and (max-width: 690px) {
-
-        .upload-progress {
-
-            .progress-wrapper .cancel-icon {
-                padding: 0 9px;
-            }
-        }
-    }
-
     .dark {
         .progress-bar {
             background: $dark_mode_foreground;

resources/js/components/Others/EmptyPageContent.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="empty-page-content">
         <div class="content">
-            <div class="icon">
+            <div class="icon inline-block">
-                <file-icon v-if="icon === 'file'" size="38"></file-icon>
+                <file-icon v-if="icon === 'file'" size="38" />
-                <file-text-icon v-if="icon === 'file-text'" size="38"></file-text-icon>
+                <file-text-icon v-if="icon === 'file-text'" size="38" />
-                <settings-icon v-if="icon === 'settings'" size="38"></settings-icon>
+                <settings-icon v-if="icon === 'settings'" size="38" />
             </div>
             <div class="header">
                 <h1 class="title">{{ title }}</h1>

resources/js/components/Sidebar/ContentSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <section class="content-sidebar" id="content-sidebar">
+    <section class="content-sidebar flex-none xl:w-56 w-52 sm:block hidden overflow-y-auto pt-6 select-none" id="content-sidebar">
         <slot></slot>
     </section>
 </template>
@@ -15,30 +15,10 @@
     @import '/resources/sass/vuefilemanager/_mixins';
 
     .content-sidebar {
-        //background: linear-gradient(0deg, rgba(246, 245, 241, 0.4) 0%, rgba(243, 244, 246, 0.4) 100%);
         background: rgba($light_background, 0.6);
-        user-select: none;
-        padding-top: 25px;
-        overflow-y: auto;
-        flex: 0 0 225px;
     }
 
-    @media only screen and (max-width: 1024px) {
+    .dark .content-sidebar {
-        .content-sidebar {
-            flex: 0 0 205px;
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-        .content-sidebar {
-            display: none;
-        }
-    }
-
-    .dark {
-
-        .content-sidebar {
 		background: rgba($dark_mode_foreground, 0.2);
     }
-    }
 </style>

resources/js/components/Sidebar/SidebarNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="menu-bar">
+    <nav class="menu-bar flex-none xl:w-20 w-16 sm:grid hidden">
         <div class="icon-navigation menu" v-if="user">
 
             <router-link :to="{name: 'Profile'}" class="icon-navigation-item user">
@@ -104,8 +104,6 @@
         background: $light_background;
         user-select: none;
         padding-top: 25px;
-        display: grid;
-        flex: 0 0 72px;
     }
 
     .icon-navigation {
@@ -190,9 +188,6 @@
     }
 
     @media only screen and (max-width: 1024px) {
-        .menu-bar {
-            flex: 0 0 60px;
-        }
 
         .icon-navigation {
 
@@ -206,12 +201,6 @@
         }
     }
 
-    @media only screen and (max-width: 690px) {
-        .menu-bar {
-            display: none;
-        }
-    }
-
     .dark {
 
 		.dark-switcher {

resources/js/components/Teams/EditTeamFolderPopup.vue

@@ -181,6 +181,8 @@
 				})
 
 				this.$nextTick(() => {
+
+					if (this.$refs.email)
 						this.$refs.email.focus()
 				})
 			})

resources/js/views/Admin.vue

@@ -1,5 +1,5 @@
 <template>
-    <section id="viewport">
+    <div class="sm:flex md:h-screen md:overflow-hidden">
 		<!--On Top of App Components-->
         <FilePreview />
 		<Spotlight />
@@ -88,7 +88,7 @@
         </ContentSidebar>
 
         <router-view/>
-    </section>
+    </div>
 </template>
 
 <script>

resources/js/views/Auth/Headline.vue

@@ -10,7 +10,7 @@
 		</div>
 
 		<h1>{{ title }}</h1>
-		<h2>{{ description }}:</h2>
+		<h2>{{ description }}</h2>
 	</div>
 </template>
 <script>

resources/js/views/FileView/Files.vue

@@ -79,8 +79,7 @@
 			</template>
 		</ContextMenu>
 
-		<FileBrowser>
+		<FileActionsMobile>
-			<template v-slot:file-actions-mobile>
 			<MobileActionButton @click.native="$openSpotlight" icon="search">
 				{{ $t('actions.search') }}
 			</MobileActionButton>
@@ -96,7 +95,9 @@
 			<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
 				{{ $t('preview_sorting.preview_sorting_button') }}
 			</MobileActionButton>
-			</template>
+		</FileActionsMobile>
+
+		<FileBrowser>
 
 			<template v-slot:empty-file-page>
 				<h1 class="title">
@@ -114,6 +115,7 @@
 </template>
 
 <script>
+	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -132,6 +134,7 @@
 	export default {
 		name: 'Files',
 		components: {
+			FileActionsMobile,
 			MobileActionButtonUpload,
 			MobileMultiSelectToolbar,
 			MobileActionButton,

resources/js/views/FileView/MySharedItems.vue

@@ -48,8 +48,7 @@
 			</OptionGroup>
 		</MobileContextMenu>
 
-		<FileBrowser>
+		<FileActionsMobile>
-			<template v-slot:file-actions-mobile>
 			<MobileActionButton @click.native="$openSpotlight" icon="search">
 				{{ $t('actions.search')}}
 			</MobileActionButton>
@@ -62,8 +61,9 @@
 			<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
 				{{ $t('preview_sorting.preview_sorting_button') }}
 			</MobileActionButton>
-			</template>
+		</FileActionsMobile>
 
+		<FileBrowser>
 			<template v-slot:empty-file-page>
 				<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
 			</template>
@@ -77,6 +77,7 @@
 </template>
 
 <script>
+	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
@@ -101,6 +102,7 @@
 			FileBrowser,
 			ContextMenu,
 			Option,
+			FileActionsMobile,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/Public.vue

@@ -71,8 +71,7 @@
 			</template>
 		</ContextMenu>
 
-		<FileBrowser>
+		<FileActionsMobile>
-			<template v-slot:file-actions-mobile>
 			<template v-if="$checkPermission('editor')">
 				<MobileActionButton @click.native="$openSpotlight" icon="search">
 					{{ $t('actions.search') }}
@@ -98,8 +97,9 @@
 					{{ $t('preview_sorting.preview_sorting_button') }}
 				</MobileActionButton>
 			</template>
-			</template>
+		</FileActionsMobile>
 
+		<FileBrowser>
 			<template v-slot:empty-file-page>
 				<template v-if="$checkPermission('editor')">
 					<h1 class="title">
@@ -123,6 +123,7 @@
 </template>
 
 <script>
+	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
 	import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
@@ -151,6 +152,7 @@
 			FileBrowser,
 			ContextMenu,
 			Option,
+			FileActionsMobile,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/RecentUploads.vue

@@ -39,8 +39,7 @@
 			</OptionGroup>
 		</MobileContextMenu>
 
-		<FileBrowser>
+		<FileActionsMobile>
-			<template v-slot:file-actions-mobile>
 			<MobileActionButton @click.native="$openSpotlight" icon="search">
 				{{ $t('actions.search')}}
 			</MobileActionButton>
@@ -56,8 +55,9 @@
 			<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
 				{{ $t('preview_sorting.preview_sorting_button') }}
 			</MobileActionButton>
-			</template>
+		</FileActionsMobile>
 
+		<FileBrowser>
 			<template v-slot:empty-file-page>
 				<h1 class="title">
 					{{ $t('empty_page.title') }}
@@ -79,6 +79,7 @@
 </template>
 
 <script>
+	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
@@ -105,6 +106,7 @@
 			FileBrowser,
 			ContextMenu,
 			Option,
+			FileActionsMobile,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/SharedWithMe.vue

@@ -57,8 +57,7 @@
 			</template>
 		</ContextMenu>
 
-		<FileBrowser>
+		<FileActionsMobile>
-			<template v-slot:file-actions-mobile>
 			<MobileActionButton @click.native="$openSpotlight" icon="search">
 				{{ $t('actions.search') }}
 			</MobileActionButton>
@@ -74,8 +73,9 @@
 			<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
 				{{ $t('preview_sorting.preview_sorting_button') }}
 			</MobileActionButton>
-			</template>
+		</FileActionsMobile>
 
+		<FileBrowser>
 			<template v-slot:empty-file-page>
 
 				<!--Homepage-->
@@ -113,6 +113,7 @@
 </template>
 
 <script>
+	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -147,6 +148,7 @@
 			ContextMenu,
 			ButtonBase,
 			Option,
+			FileActionsMobile,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/TeamFolders.vue

@@ -80,8 +80,7 @@
 			</template>
 		</ContextMenu>
 
-		<FileBrowser>
+		<FileActionsMobile>
-			<template v-slot:file-actions-mobile>
 			<MobileActionButton @click.native="$openSpotlight" icon="search">
 				{{ $t('actions.search') }}
 			</MobileActionButton>
@@ -97,8 +96,9 @@
 			<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
 				{{ $t('preview_sorting.preview_sorting_button') }}
 			</MobileActionButton>
-			</template>
+		</FileActionsMobile>
 
+		<FileBrowser>
 			<template v-slot:empty-file-page>
 
 				<template v-if="isTeamFolderHomepage">
@@ -130,6 +130,7 @@
 </template>
 
 <script>
+	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -164,6 +165,7 @@
 			ContextMenu,
 			ButtonBase,
 			Option,
+			FileActionsMobile,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/Trash.vue

@@ -42,8 +42,7 @@
             </OptionGroup>
 		</MobileContextMenu>
 
-		<FileBrowser>
+		<FileActionsMobile>
-			<template v-slot:file-actions-mobile>
 			<MobileActionButton @click.native="$openSpotlight" icon="search">
 				{{ $t('actions.search')}}
 			</MobileActionButton>
@@ -59,8 +58,9 @@
 			 <MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
 				{{ $t('preview_sorting.preview_sorting_button') }}
 			</MobileActionButton>
-			</template>
+		</FileActionsMobile>
 
+		<FileBrowser>
 			<template v-slot:empty-file-page>
 				<h1 class="title">{{ $t('empty_page.title') }}</h1>
 			</template>
@@ -74,6 +74,7 @@
 </template>
 
 <script>
+	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
@@ -98,6 +99,7 @@
 			FileBrowser,
 			ContextMenu,
 			Option,
+			FileActionsMobile,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/Platform.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="application-wrapper">
+    <div class="sm:flex md:h-screen md:overflow-hidden">
 
         <!--On Top of App Components-->
         <FilePreview />
@@ -33,9 +33,30 @@
         <SidebarNavigation />
 		<PanelNavigationFiles />
 
-		<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="file-view">
+		<div
-			<DesktopToolbar/>
+			@contextmenu.prevent.capture="contextMenu($event, undefined)"
-			<router-view :key="$route.fullPath" />
+			class="md:grid md:content-start sm:flex-grow sm:px-3.5 transition-transform duration-200"
+			:class="{'transform scale-97 origin-center': isScaledDown}"
+		>
+			<DesktopToolbar />
+
+			<MobileToolbar />
+
+			<!--File list & info sidebar-->
+			<div class="flex space-x-6 md:overflow-hidden md:h-full">
+
+				<router-view
+					id="file-view"
+					:class="{'2xl:w-5/6 md:w-4/6 w-full': isVisibleSidebar, 'w-full': ! isVisibleSidebar}"
+					class="relative"
+					:key="$route.fullPath"
+				/>
+
+				<InfoSidebar
+					v-if="isVisibleSidebar"
+					class="2xl:w-72 w-2/6 overflow-y-auto overflow-x-hidden h-screen md:block hidden"
+				/>
+			</div>
 		</div>
     </div>
 </template>
@@ -50,16 +71,19 @@
 	import ShareCreatePopup from '/resources/js/components/Others/ShareCreatePopup'
 	import DesktopToolbar from '/resources/js/components/FilesView/DesktopToolbar'
 	import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup"
-	import EditTeamFolderPopup from "../components/Teams/EditTeamFolderPopup"
 	import ConfirmPopup from '/resources/js/components/Others/Popup/ConfirmPopup'
 	import RenameItemPopup from '/resources/js/components/Others/RenameItemPopup'
+	import PanelNavigationFiles from "./FileView/Components/PanelNavigationFiles"
+	import MobileToolbar from '/resources/js/components/FilesView/MobileToolbar'
 	import ShareEditPopup from '/resources/js/components/Others/ShareEditPopup'
-    import MoveItemPopup from '/resources/js/components/Others/MoveItemPopup'
 	import FilePreview from '/resources/js/components/FilePreview/FilePreview'
+	import MoveItemPopup from '/resources/js/components/Others/MoveItemPopup'
+	import EditTeamFolderPopup from "../components/Teams/EditTeamFolderPopup"
 	import Spotlight from '/resources/js/components/Spotlight/Spotlight'
 	import DragUI from '/resources/js/components/FilesView/DragUI'
-	import PanelNavigationFiles from "./FileView/Components/PanelNavigationFiles"
+	import InfoSidebar from "../components/FilesView/InfoSidebar"
 	import {events} from '/resources/js/bus'
+	import {mapGetters} from "vuex"
 
 	export default {
 		name: 'Platform',
@@ -78,11 +102,18 @@
 			ShareEditPopup,
 			DesktopToolbar,
 			MoveItemPopup,
+			MobileToolbar,
 			ConfirmPopup,
+			InfoSidebar,
 			FilePreview,
 			Spotlight,
 			DragUI,
 		},
+		computed: {
+			...mapGetters([
+				'isVisibleSidebar'
+			])
+		},
 		data() {
 			return {
 				isScaledDown: false
@@ -100,28 +131,3 @@
 		}
 	}
 </script>
-
-<style lang="scss">
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-	#file-view {
-		font-family: 'Nunito', sans-serif;
-		font-size: 16px;
-		width: 100%;
-		height: 100%;
-		position: relative;
-		min-width: 320px;
-		overflow-x: hidden;
-		padding-left: 15px;
-		padding-right: 15px;
-		overflow-y: hidden;
-		@include transition(120ms);
-	}
-
-    @media only screen and (max-width: 690px) {
-
-        .is-scaled-down {
-            @include transform(scale(0.95));
-        }
-    }
-</style>

resources/js/views/Profile.vue

@@ -1,9 +1,16 @@
 <template>
-    <section id="viewport">
+    <div class="sm:flex md:h-screen md:overflow-hidden">
 		<!--On Top of App Components-->
         <FilePreview />
 		<Spotlight />
 
+		<!--2FA popups-->
+		<TwoFactorRecoveryCodesPopup />
+		<TwoFactorSetupPopup />
+
+		<!--Access Token Popup-->
+		<CreatePersonaTokenPopup />
+
 		<SidebarNavigation />
         <PanelNavigationUser />
 
@@ -61,14 +68,7 @@
                 <Spinner></Spinner>
             </div>
         </div>
-
+    </div>
-		<!--2FA popups-->
-		<TwoFactorRecoveryCodesPopup />
-		<TwoFactorSetupPopup />
-
-		<!--Access Token Popup-->
-		<CreatePersonaTokenPopup />
-    </section>
 </template>
 
 <script>

resources/js/views/SetupWizard/AppSetup.vue

@@ -3,11 +3,13 @@
 
         <!--Database Credentials-->
         <AuthContent name="database-credentials" :visible="true">
-            <div class="content-headline">
+			<Headline
-                <settings-icon size="40" class="title-icon text-theme" />
+				class="container mx-auto max-w-screen-sm"
-                <h1>Setup Wizard</h1>
+				title="Setup Wizard"
-                <h2>Set up your application appearance, analytics, etc.</h2>
+				description="Set up your application appearance, analytics, etc."
-            </div>
+			>
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
 
             <ValidationObserver @submit.prevent="appSetupSubmit" ref="appSetup" v-slot="{ invalid }" tag="form"
                                 class="form block-form">
@@ -145,6 +147,7 @@
     import AuthContent from '/resources/js/components/Auth/AuthContent'
     import AuthButton from '/resources/js/components/Auth/AuthButton'
     import {SettingsIcon} from 'vue-feather-icons'
+	import Headline from "../Auth/Headline"
     import {required} from 'vee-validate/dist/rules'
     import {mapGetters} from 'vuex'
     import axios from 'axios'
@@ -164,6 +167,7 @@
             FormLabel,
             required,
             InfoBox,
+			Headline,
         },
         data() {
             return {

resources/js/views/SetupWizard/BillingsDetail.vue

@@ -3,12 +3,13 @@
 
         <!--Database Credentials-->
         <AuthContent name="database-credentials" :visible="true">
-            <div class="content-headline">
+			<Headline
-                <settings-icon size="40" class="title-icon text-theme"/>
+				class="container mx-auto max-w-screen-sm"
-                <h1>Setup Wizard</h1>
+				title="Setup Wizard"
-                <h2>Set up your billing information.</h2>
+				description="Set up your billing information."
-            </div>
+			>
-
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
             <ValidationObserver @submit.prevent="billingInformationSubmit" ref="billingInformation" v-slot="{ invalid }"
                                 tag="form" class="form block-form">
                 <FormLabel>Company Information</FormLabel>
@@ -114,6 +115,7 @@
     import AuthContent from '/resources/js/components/Auth/AuthContent'
     import AuthButton from '/resources/js/components/Auth/AuthButton'
     import {SettingsIcon} from 'vue-feather-icons'
+	import Headline from "../Auth/Headline"
     import {required} from 'vee-validate/dist/rules'
     import {mapGetters} from 'vuex'
     import axios from 'axios'
@@ -131,6 +133,7 @@
             FormLabel,
             required,
             InfoBox,
+			Headline,
         },
         computed: {
             ...mapGetters(['countries']),

resources/js/views/SetupWizard/Database.vue

@@ -3,11 +3,13 @@
 
         <!--Database Credentials-->
         <AuthContent name="database-credentials" :visible="true">
-            <div class="content-headline">
+			<Headline
-                <settings-icon size="40" class="title-icon text-theme"/>
+				class="container mx-auto max-w-screen-sm"
-                <h1>Setup Wizard</h1>
+				title="Setup Wizard"
-                <h2>Set up your database connection to install application database.</h2>
+				description="Set up your database connection to install application database."
-            </div>
+			>
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
 
             <ValidationObserver @submit.prevent="databaseCredentialsSubmit" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form block-form">
                 <FormLabel>Database Credentials</FormLabel>
@@ -94,6 +96,7 @@
     import AuthButton from '/resources/js/components/Auth/AuthButton'
     import { SettingsIcon } from 'vue-feather-icons'
     import {required} from 'vee-validate/dist/rules'
+	import Headline from "../Auth/Headline"
     import {mapGetters} from 'vuex'
     import axios from 'axios'
 
@@ -110,6 +113,7 @@
             FormLabel,
             required,
             InfoBox,
+			Headline,
         },
         computed: {
             submitButtonText() {

resources/js/views/SetupWizard/EnvironmentSetup.vue

@@ -3,12 +3,13 @@
 
         <!--Database Credentials-->
         <AuthContent name="database-credentials" :visible="true">
-            <div class="content-headline">
+			<Headline
-                <settings-icon size="40" class="title-icon text-theme"/>
+				class="container mx-auto max-w-screen-sm"
-                <h1>Setup Wizard</h1>
+				title="Setup Wizard"
-                <h2>Set up your storage driver and email client.</h2>
+				description="Set up your storage driver and email client."
-            </div>
+			>
-
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
             <ValidationObserver @submit.prevent="EnvironmentSetupSubmit" ref="environmentSetup" v-slot="{ invalid }" tag="form" class="form block-form">
                 <InfoBox>
                     <p>If you don’t know which storage driver set, keep selected <b>'Local Driver'</b>. For more info, where
@@ -141,6 +142,7 @@ import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
 import AuthContent from '/resources/js/components/Auth/AuthContent'
 import AuthButton from '/resources/js/components/Auth/AuthButton'
 import {SettingsIcon} from 'vue-feather-icons'
+import Headline from "../Auth/Headline"
 import {required} from 'vee-validate/dist/rules'
 import {mapGetters} from 'vuex'
 import axios from 'axios'
@@ -158,6 +160,7 @@ export default {
         FormLabel,
         required,
         InfoBox,
+		Headline,
     },
     watch: {
         'storage.driver': function () {

resources/js/views/SetupWizard/InstallationDisclaimer.vue

@@ -3,12 +3,13 @@
 
         <!--Database Credentials-->
         <AuthContent name="database-credentials" :visible="true">
-            <div class="content-headline">
+			<Headline
-                <settings-icon size="40" class="title-icon text-theme"/>
+				class="container mx-auto max-w-screen-sm"
-                <h1>Setup Wizard</h1>
+				title="Setup Wizard"
-                <h2>Database was installed successfully. Let's set up application, Make sure you have these informations before continue:</h2>
+				description="Database was installed successfully. Let's set up application, Make sure you have these informations before continue:"
-            </div>
+			>
-
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
             <div id="loader" v-if="isLoading">
                 <Spinner></Spinner>
             </div>
@@ -77,6 +78,7 @@
     import Spinner from '/resources/js/components/FilesView/Spinner'
     import { SettingsIcon } from 'vue-feather-icons'
     import {required} from 'vee-validate/dist/rules'
+	import Headline from "../Auth/Headline"
     import {mapGetters} from 'vuex'
     import axios from 'axios'
 
@@ -94,6 +96,7 @@
             required,
             Spinner,
             InfoBox,
+			Headline,
         },
         data() {
             return {

resources/js/views/SetupWizard/PurchaseCode.vue

@@ -4,11 +4,13 @@
         <!--Licence Verify-->
         <AuthContent name="licence-verify" :visible="true">
 
-            <div class="content-headline">
+			<Headline
-                <settings-icon size="40" class="title-icon text-theme"/>
+				class="container mx-auto max-w-screen-sm"
-                <h1>Setup Wizard</h1>
+				title="Setup Wizard"
-                <h2>Please set your purchase code before continue to set up your application.</h2>
+				description="Please set your purchase code before continue to set up your application."
-            </div>
+			>
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
 
             <ValidationObserver @submit.prevent="verifyPurchaseCode" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form inline-form">
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Purchase Code" rules="required" v-slot="{ errors }">
@@ -38,6 +40,7 @@
     import AuthButton from '/resources/js/components/Auth/AuthButton'
     import { SettingsIcon } from 'vue-feather-icons'
     import {required} from 'vee-validate/dist/rules'
+	import Headline from "../Auth/Headline"
     import {mapGetters} from 'vuex'
     import axios from 'axios'
 
@@ -52,6 +55,7 @@
             AuthButton,
             required,
             InfoBox,
+			Headline,
         },
         data() {
             return {

resources/js/views/SetupWizard/StatusCheck.vue

@@ -3,11 +3,14 @@
 
         <!--Database Credentials-->
         <AuthContent name="database-credentials" :visible="true">
-            <div class="content-headline">
+
-                <settings-icon size="40" class="title-icon text-theme" />
+			<Headline
-                <h1>Server Check</h1>
+				class="container mx-auto max-w-screen-sm"
-                <h2>At first, we have to check if all modules and setup is ready for running VueFileManager.</h2>
+				title="Server Check"
-            </div>
+				description="At first, we have to check if all modules and setup is ready for running VueFileManager"
+			>
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
 
             <div class="form block-form">
 
@@ -107,6 +110,7 @@
 	import AuthButton from '/resources/js/components/Auth/AuthButton'
 	import {SettingsIcon} from 'vue-feather-icons'
 	import {required} from 'vee-validate/dist/rules'
+	import Headline from "../Auth/Headline"
 	import {mapGetters} from 'vuex'
 	import axios from 'axios'
 	import {
@@ -128,6 +132,7 @@
 			required,
 			InfoBox,
 			CheckIcon,
+			Headline,
 			XIcon,
 		},
 		computed: {

resources/js/views/SetupWizard/StripeCredentials.vue

@@ -3,11 +3,14 @@
 
         <!--Database Credentials-->
         <AuthContent name="database-credentials" :visible="true">
-            <div class="content-headline">
+
-                <settings-icon size="40" class="title-icon text-theme"/>
+			<Headline
-                <h1>Setup Wizard</h1>
+				class="container mx-auto max-w-screen-sm"
-                <h2>Set up your database credentials.</h2>
+				title="Setup Wizard"
-            </div>
+				description="Set up your database credentials."
+			>
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
 
             <ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="form block-form">
                 <InfoBox>
@@ -86,8 +89,9 @@
     import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
     import AuthContent from '/resources/js/components/Auth/AuthContent'
     import AuthButton from '/resources/js/components/Auth/AuthButton'
-    import {SettingsIcon} from 'vue-feather-icons'
     import {required} from 'vee-validate/dist/rules'
+    import {SettingsIcon} from 'vue-feather-icons'
+	import Headline from "../Auth/Headline"
     import {mapGetters} from 'vuex'
     import axios from 'axios'
 
@@ -104,6 +108,7 @@
             FormLabel,
             required,
             InfoBox,
+			Headline,
         },
         computed: {
             ...mapGetters(['config', 'currencyList']),

resources/js/views/SetupWizard/SubscriptionPlans.vue

@@ -3,11 +3,14 @@
 
         <!--Database Credentials-->
         <AuthContent name="database-credentials" :visible="true">
-            <div class="content-headline">
+
-                <settings-icon size="40" class="title-icon text-theme"/>
+			<Headline
-                <h1>Setup Wizard</h1>
+				class="container mx-auto max-w-screen-sm"
-                <h2>Set up plans for your customers.</h2>
+				title="Setup Wizard"
-            </div>
+				description="Set up plans for your customers."
+			>
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
 
             <ValidationObserver @submit.prevent="subscriptionPlansSubmit" ref="subscriptionPlans" v-slot="{ invalid }"
                                 tag="form" class="form block-form">
@@ -99,6 +102,7 @@
     import {SettingsIcon} from 'vue-feather-icons'
     import {required} from 'vee-validate/dist/rules'
     import {XIcon} from 'vue-feather-icons'
+	import Headline from "../Auth/Headline"
     import {mapGetters} from 'vuex'
     import axios from 'axios'
 
@@ -117,6 +121,7 @@
             required,
             InfoBox,
             XIcon,
+			Headline,
         },
         computed: {
             submitButtonText() {

resources/js/views/SetupWizard/SubscriptionService.vue

@@ -4,11 +4,13 @@
         <!--Licence Verify-->
         <AuthContent name="subscription-service" :visible="true">
 
-            <div class="content-headline">
+			<Headline
-                <settings-icon size="40" class="title-icon text-theme"/>
+				class="container mx-auto max-w-screen-sm"
-                <h1>Setup Wizard</h1>
+				title="Setup Wizard"
-                <h2>You can charge users for storage space by monthly billing plans. Please, select your charging service or skip this step if you don't want charge users:</h2>
+				description="You can charge users for storage space by monthly billing plans. Please, select your charging service or skip this step if you don't want charge users:"
-            </div>
+			>
+                <settings-icon size="40" class="title-icon text-theme mx-auto" />
+			</Headline>
 
             <div class="services">
                 <router-link :to="{name: 'StripeCredentials'}" tag="div" class="service-card">
@@ -42,6 +44,7 @@
     import AuthButton from '/resources/js/components/Auth/AuthButton'
     import { SettingsIcon, ChevronRightIcon } from 'vue-feather-icons'
     import {required} from 'vee-validate/dist/rules'
+	import Headline from "../Auth/Headline"
     import {mapGetters} from 'vuex'
     import axios from 'axios'
 
@@ -56,6 +59,7 @@
             AuthContent,
             AuthButton,
             required,
+			Headline,
         },
         data() {
             return {

resources/js/views/Shared.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="application-wrapper">
+    <div class="sm:flex md:h-screen md:overflow-hidden">
 
         <!--Loading Spinner-->
         <Spinner v-if="isLoading" />
@@ -26,15 +26,37 @@
 
 		<NavigationSharePanel v-if="sharedDetail && $router.currentRoute.name === 'Public'"/>
 
-		<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="file-view">
+		<div
-			<DesktopToolbar/>
+			@contextmenu.prevent.capture="contextMenu($event, undefined)"
-        	<!--TODO: fix desktopbar on authentication screen-->
+			class="md:grid md:content-start sm:flex-grow sm:px-3.5 transition-transform duration-300"
-			<router-view :key="$route.fullPath" />
+			:class="{'transform scale-97 origin-center': isScaledDown}"
+		>
+			<DesktopToolbar />
+
+			<MobileToolbar />
+
+					<!--File list & info sidebar-->
+			<div class="flex space-x-6 md:overflow-hidden md:h-full">
+
+				<router-view
+					id="file-view"
+					:class="{'2xl:w-5/6 md:w-4/6 w-full': isVisibleSidebar, 'w-full': ! isVisibleSidebar}"
+					class="relative"
+					:key="$route.fullPath"
+				/>
+
+				<InfoSidebar
+					v-if="isVisibleSidebar"
+					class="2xl:w-72 w-2/6 overflow-y-auto overflow-x-hidden h-screen md:block hidden"
+				/>
+			</div>
 		</div>
     </div>
 </template>
 
 <script>
+	import MobileToolbar from '/resources/js/components/FilesView/MobileToolbar'
+	import InfoSidebar from "../components/FilesView/InfoSidebar";
     import MobileMultiSelectToolbar from '/resources/js/components/FilesView/MobileMultiSelectToolbar'
     import FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile'
     import CreateFolderPopup from '/resources/js/components/Others/CreateFolderPopup'
@@ -55,6 +77,8 @@
     export default {
         name: 'Shared',
         components: {
+			MobileToolbar,
+			InfoSidebar,
 			NavigationSharePanel,
             MobileMultiSelectToolbar,
             CreateFolderPopup,
@@ -72,6 +96,7 @@
         },
         computed: {
             ...mapGetters([
+                'isVisibleSidebar',
                 'sharedDetail',
                 'config',
             ])
@@ -122,28 +147,3 @@
         }
     }
 </script>
-
-<style lang="scss">
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-	#file-view {
-		font-family: 'Nunito', sans-serif;
-		font-size: 16px;
-		width: 100%;
-		height: 100%;
-		position: relative;
-		min-width: 320px;
-		overflow-x: hidden;
-		padding-left: 15px;
-		padding-right: 15px;
-		overflow-y: hidden;
-		@include transition(120ms);
-	}
-
-    @media only screen and (max-width: 690px) {
-
-        .is-scaled-down {
-            @include transform(scale(0.95));
-        }
-    }
-</style>

resources/sass/app.scss

@@ -11,16 +11,6 @@
   flex: 1;
 }
 
-#application-wrapper {
-  display: flex;
-  height: 100%;
-
-  #content {
-    position: relative;
-    width: 100%;
-  }
-}
-
 #single-page {
   overflow-x: hidden;
   width: 100%;

resources/views/index.blade.php

@@ -34,8 +34,9 @@
 
     @include('vuefilemanager.others.color-template')
 </head>
-<body>
+<body class="{{ is_dev() ? 'debug-screens' : '' }}">
-<div id="app"></div>
+
+    <div id="app"></div>
 
     <script>
         let config = {

resources/views/vuefilemanager/others/color-template.blade.php

@@ -99,6 +99,8 @@
         .StripeElement--focus {border-color: {{ $color }} !important;}
 
         {{-- Dark mode --}}
+        .dark .dark-text-theme {color: {{ $color }} !important;}
+
         .dark .text-theme {
             color: {{ $color }}
         }

tailwind.config.js

@@ -1,8 +1,14 @@
 module.exports = {
-  purge: [],
+  purge: { content: ['./resources/js/**/*.{js,jsx,ts,tsx,vue}',] },
   darkMode: 'class', // or 'media' or 'class'
   theme: {
+    debugScreens: {
+      position: ['bottom', 'right'],
+    },
     extend: {
+      scale: {
+        '97': '.97',
+      },
       borderWidth: {
         '3': '3px',
       },
@@ -12,11 +18,17 @@ module.exports = {
       }),
       fontSize: {
         tiny: ['11px', '16px'],
-      }
+      },
+      backgroundColor: theme => ({
+        'dark-background': '#151515',
+        'dark-foreground': '#1e2024',
+      }),
     },
   },
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('tailwindcss-debug-screens'),
+  ],
 }

webpack.mix.js

@@ -35,12 +35,12 @@ mix.js('resources/js/main.js', 'public/js')
             clientLogLevel: 'none'
         }
     })
-    /*.options({
+    .options({
         hmrOptions: {
-            host: '192.168.1.198',
+            host: '192.168.1.112',
             port: '8080'
         },
-    })*/
+    })
     .disableNotifications();
 
 if (mix.inProduction()) {