UI Fixes part II.

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
     "/js/main.js": "/js/main.js",
-    "/chunks/request.js": "/chunks/request.js?id=a5f743139d4e768b",
+    "/chunks/request.js": "/chunks/request.js?id=9c39d5d73f0ce3a6",
-    "/chunks/request-upload.js": "/chunks/request-upload.js?id=b06b5de5aa8923db",
+    "/chunks/request-upload.js": "/chunks/request-upload.js?id=76fbf8c3ee657f86",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=19a0784e59d768ec",
     "/chunks/status-check.js": "/chunks/status-check.js?id=d619c9a715d82eac",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=8ce2150648a811b5",
@@ -9,20 +9,20 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=7f6a9af36bfcd706",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=0df2494d2269a949",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=2d131d1d784c98b9",
-    "/chunks/shared.js": "/chunks/shared.js?id=808cd1441d45eb60",
+    "/chunks/shared.js": "/chunks/shared.js?id=4ef59188f5bda67e",
-    "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=1ab7e36802e75351",
+    "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=9e7d5205970fc567",
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=34e05a8b937a1436",
     "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=2b7cf12984397d27",
     "/chunks/not-found.js": "/chunks/not-found.js?id=36763aa314e00327",
     "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=a3906226272982b1",
-    "/chunks/admin.js": "/chunks/admin.js?id=8588ba3248a14ac2",
+    "/chunks/admin.js": "/chunks/admin.js?id=8b4182bb4a93d17f",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=0ba6b75f07f739e2",
     "/chunks/invoices.js": "/chunks/invoices.js?id=f89964a5a55ace45",
     "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=62582c26b6288d7d",
-    "/chunks/pages.js": "/chunks/pages.js?id=38c76f5552161514",
+    "/chunks/pages.js": "/chunks/pages.js?id=d7219aff1586ef7a",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=a329cda46342b4cf",
-    "/chunks/plans.js": "/chunks/plans.js?id=b5e1384c6e697927",
+    "/chunks/plans.js": "/chunks/plans.js?id=704f996bd6e6c651",
-    "/chunks/users.js": "/chunks/users.js?id=f41910a94ca4e36f",
+    "/chunks/users.js": "/chunks/users.js?id=f3c592b251f7d183",
     "/chunks/user-create.js": "/chunks/user-create.js?id=1f16a20ef51b3217",
     "/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=793e8f43eb5d9c13",
     "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=e33392f21fa044d9",
@@ -47,7 +47,7 @@
     "/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=80ab5897c46993b5",
     "/chunks/app-adsense.js": "/chunks/app-adsense.js?id=5ce9441ee0eadd98",
     "/chunks/app-server.js": "/chunks/app-server.js?id=8964b98aee4cca69",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=dfb26ea66227b657",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=c1b828a7724a7a5c",
     "/chunks/homepage.js": "/chunks/homepage.js?id=9894f8229fc1373e",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f8c67b2a376ff03e",
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=6812adfb9e719126",
@@ -57,18 +57,18 @@
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=849c274b322f055b",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=3c5ba5865e21da37",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=8654bf89e7d9685b",
-    "/chunks/settings.js": "/chunks/settings.js?id=64ea716b0b8823b0",
+    "/chunks/settings.js": "/chunks/settings.js?id=9bf16b34165e07e9",
     "/chunks/profile.js": "/chunks/profile.js?id=4ba370c98d374788",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=11e766eb42e485cf",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=90ba712f3728443b",
     "/chunks/billing.js": "/chunks/billing.js?id=f04fe6a3e9fb5c13",
-    "/chunks/platform.js": "/chunks/platform.js?id=83a3de51355e4327",
+    "/chunks/platform.js": "/chunks/platform.js?id=fa132be10e2d9e18",
-    "/chunks/files.js": "/chunks/files.js?id=4f124bd91e9a31fe",
+    "/chunks/files.js": "/chunks/files.js?id=45e14258e690b7c5",
-    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=956d635a35edd94a",
+    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=9984422e5e06edb6",
-    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=78cb8cde75196617",
+    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=a0d9ba5fc7604b12",
-    "/chunks/trash.js": "/chunks/trash.js?id=e828206647a94788",
+    "/chunks/trash.js": "/chunks/trash.js?id=369ee2320e5dd1d4",
-    "/chunks/team-folders.js": "/chunks/team-folders.js?id=0eb60fff4de7e4f4",
+    "/chunks/team-folders.js": "/chunks/team-folders.js?id=26c32a85a2ef63a3",
-    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=f3c7f65d81be4196",
+    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=7ee79dea390a475a",
     "/chunks/invitation.js": "/chunks/invitation.js?id=d9f64dbf0aad8554",
     "/css/tailwind.css": "/css/tailwind.css",
     "/css/app.css": "/css/app.css"

resources/js/App.vue

@@ -11,8 +11,10 @@
         <!--Show warning bar when user functionality is restricted-->
         <RestrictionWarningBar />
 
-        <!--App view-->
+		<div :class="{'lg:flex lg:h-screen lg:overflow-hidden w-full': isSidebarNavigation}">
-        <router-view v-if="isLoaded" />
+			<SidebarNavigation v-if="isSidebarNavigation" />
+			<router-view v-if="isLoaded" />
+		</div>
 
         <!--Background under popups-->
         <Vignette />
@@ -21,17 +23,19 @@
 
 <script>
 import ToasterWrapper from './components/Others/Notifications/ToasterNotifications'
+import RestrictionWarningBar from './components/Subscription/RestrictionWarningBar'
+import SidebarNavigation from "./components/Sidebar/SidebarNavigation"
 import CookieDisclaimer from './components/Others/CookieDisclaimer'
 import Spinner from './components/FilesView/Spinner'
 import Vignette from './components/Others/Vignette'
 import Alert from './components/FilesView/Alert'
-import RestrictionWarningBar from './components/Subscription/RestrictionWarningBar'
 import { mapGetters } from 'vuex'
 import { events } from './bus'
 
 export default {
     name: 'App',
     components: {
+		SidebarNavigation,
         RestrictionWarningBar,
         CookieDisclaimer,
         ToasterWrapper,
@@ -42,6 +46,7 @@ export default {
     data() {
         return {
             isLoaded: false,
+			isSidebarNavigation: undefined,
         }
     },
     computed: {
@@ -55,11 +60,15 @@ export default {
 			let section = this.$router.currentRoute.fullPath.split('/')[1]
 			const app = document.getElementsByTagName('body')[0]
 
+			// Set background color via theme setup
 			if (['admin', 'user'].includes(section)) {
 				app.classList.add('dark:bg-dark-background', 'bg-light-background')
 			} else {
 				app.classList.remove('dark:bg-dark-background', 'bg-light-background')
 			}
+
+			// Set sidebar navigation visibility
+			this.isSidebarNavigation = ['admin', 'user', 'platform'].includes(section)
 		}
     },
     methods: {

resources/js/views/Admin.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="md:h-screen md:overflow-hidden lg:flex">
+    <div class="md:h-screen md:overflow-hidden lg:flex w-full">
         <!--On Top of App Components-->
         <FilePreview />
         <Spotlight />
@@ -17,9 +17,6 @@
         <!-- Create language popup -->
         <CreateLanguage />
 
-        <!--Navigation Sidebar-->
-        <SidebarNavigation />
-
         <MobileNavigationToolbar />
 
         <ContentSidebar>
@@ -69,7 +66,6 @@ import MobileNavigation from '../components/Others/MobileNavigation'
 import ConfirmPopup from '../components/Others/Popup/ConfirmPopup'
 import ContentGroup from '../components/Sidebar/ContentGroup'
 import ContentSidebar from '../components/Sidebar/ContentSidebar'
-import SidebarNavigation from '../components/Sidebar/SidebarNavigation'
 import Spotlight from '../components/Spotlight/Spotlight'
 import MobileNavigationToolbar from '../components/Mobile/MobileNavigationToolbar'
 import {
@@ -197,7 +193,6 @@ export default {
         MobileNavigationToolbar,
         FilePreview,
         Spotlight,
-        SidebarNavigation,
         MobileNavigation,
         CreateLanguage,
         ContentSidebar,

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

@@ -6,7 +6,7 @@
         <!--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"
+            class="absolute top-2.5 right-0 inline-block cursor-pointer p-3 opacity-20 transition-all duration-200 hover:opacity-70"
         >
             <chevrons-left-icon size="18" />
         </div>

resources/js/views/Platform.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="lg:flex lg:h-screen lg:overflow-hidden">
+    <div class="lg:flex lg:h-screen lg:overflow-hidden w-full">
         <!--On Top of App Components-->
         <FilePreview />
         <Spotlight />
@@ -30,7 +30,6 @@
         <DragUI />
 
         <!--2 col Sidebars-->
-        <SidebarNavigation />
         <PanelNavigationFiles />
 
         <div

resources/js/views/Profile.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="md:h-screen md:overflow-hidden lg:flex">
+    <div class="md:h-screen md:overflow-hidden lg:flex w-full">
         <!--On Top of App Components-->
         <FilePreview />
         <Spotlight />
@@ -24,8 +24,6 @@
 		<ChangeSubscriptionPopup v-if="config.subscriptionType === 'fixed'" />
         <ChargePaymentPopup v-if="config.subscriptionType === 'metered'" />
 
-        <SidebarNavigation />
-
         <!--Navigations-->
         <MobileNavigation />
 
@@ -85,7 +83,6 @@ import TwoFactorRecoveryCodesPopup from '../components/Others/TwoFactorRecoveryC
 import CreatePersonalTokenPopup from '../components/Others/CreatePersonalTokenPopup'
 import TwoFactorQrSetupPopup from '../components/Others/TwoFactorQrSetupPopup'
 import AvatarInput from '../components/Others/Forms/AvatarInput'
-import SidebarNavigation from '../components/Sidebar/SidebarNavigation'
 import ColorLabel from '../components/Others/ColorLabel'
 import Spinner from '../components/FilesView/Spinner'
 import { mapGetters } from 'vuex'
@@ -114,7 +111,6 @@ export default {
         TwoFactorRecoveryCodesPopup,
         CreatePersonalTokenPopup,
         TwoFactorQrSetupPopup,
-        SidebarNavigation,
         AvatarInput,
         ColorLabel,
         Spinner,

resources/js/views/Shared.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="lg:flex lg:h-screen lg:overflow-hidden">
+    <div class="lg:flex lg:h-screen lg:overflow-hidden w-full">
         <!--File preview window-->
         <FilePreview />
         <Spotlight />

resources/js/views/UploadRequest.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="lg:flex lg:h-screen lg:overflow-hidden">
+    <div class="lg:flex lg:h-screen lg:overflow-hidden w-full">
         <!--On Top of App Components-->
         <FilePreview />
         <Spotlight />