UI Fixes part II.

resources/js/App.vue

@@ -11,8 +11,10 @@
         <!--Show warning bar when user functionality is restricted-->
         <RestrictionWarningBar />
 
-        <!--App view-->
-        <router-view v-if="isLoaded" />
+		<div :class="{'lg:flex lg:h-screen lg:overflow-hidden w-full': isSidebarNavigation}">
+			<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 />