full screen mode

resources/js/components/FilesView/DesktopToolbar.vue

@@ -2,6 +2,10 @@
     <div id="desktop-toolbar" class="lg:block hidden">
         <div class="toolbar-wrapper">
 			<div @click="goBack" class="location">
+				<div v-if="! isVisibleNavigationBars" @click="toggleNavigationBars" class="mr-2">
+					<menu-icon size="17" />
+				</div>
+
 				<chevron-left-icon :class="{'opacity-0 -translate-x-3': ! currentFolder, 'opacity-100 translate-x-0': currentFolder }" class="icon-back transform transition-all duration-200" size="17" />
 
 				<span :class="{'-translate-x-4': ! currentFolder}" class="location-title transform transition-all duration-200">
@@ -122,7 +126,7 @@
 	import TeamMembersButton from "../Teams/Components/TeamMembersButton"
 	import PopoverItem from '/resources/js/components/Desktop/PopoverItem'
 	import TeamFolderPreview from "../Teams/Components/TeamFolderPreview"
-	import {ChevronLeftIcon, MoreHorizontalIcon} from 'vue-feather-icons'
+	import {MenuIcon, ChevronLeftIcon, MoreHorizontalIcon} from 'vue-feather-icons'
 	import SearchBar from '/resources/js/components/FilesView/SearchBar'
 	import Option from '/resources/js/components/FilesView/Option'
 	import {events} from '/resources/js/bus'
@@ -145,10 +149,12 @@
 			OptionGroup,
 			PopoverItem,
 			SearchBar,
+			MenuIcon,
 			Option,
 		},
 		computed: {
 			...mapGetters([
+				'isVisibleNavigationBars',
 				'currentTeamFolder',
 				'currentFolder',
 				'sharedDetail',
@@ -242,6 +248,9 @@
 			}
 		},
 		methods: {
+			toggleNavigationBars() {
+				this.$store.dispatch('toggleNavigationBars')
+			},
 			goBack() {
 				if (this.isNotHomepage) this.$router.back()
 			},

resources/js/components/Others/MobileNavigation.vue

@@ -10,7 +10,7 @@
 					{{ $t('Your current estimated usage:') }}
 				</span>
 				<span class="text-sm font-bold text-theme">
-					$22,93
+					{{ user.data.meta.usages.costEstimate }}
 				</span>
 			</div>
 		</div>

resources/js/components/Sidebar/SidebarNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="menu-bar pt-7 select-none dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden">
+    <nav v-if="isVisibleNavigationBars" class="menu-bar pt-7 select-none dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden">
 
 		<!--Navigation-->
 		<div v-if="user" class="mb-auto text-center">
@@ -85,6 +85,7 @@
 		},
 		computed: {
 			...mapGetters([
+				'isVisibleNavigationBars',
 				'isDarkMode',
 				'config',
 				'user',

resources/js/components/Spotlight/Spotlight.vue

@@ -96,6 +96,7 @@
 							<box-icon v-if="result.action.value === 'Dashboard'" size="18" class="vue-feather text-theme"/>
 							<hard-drive-icon v-if="result.action.value === 'Storage'" size="18" class="vue-feather text-theme"/>
 							<moon-icon v-if="result.action.value === 'dark-mode'" size="18" class="vue-feather text-theme"/>
+							<maximize2-icon v-if="result.action.value === 'full-screen-mode'" size="18" class="vue-feather text-theme"/>
 							<power-icon v-if="result.action.value === 'log-out'" size="18" class="vue-feather text-theme"/>
 							<trash-icon v-if="result.action.value === 'empty-trash'" size="18" class="vue-feather text-theme"/>
 
@@ -186,6 +187,7 @@
 
 <script>
 import {
+	Maximize2Icon,
 	ArrowDownIcon,
 	ArrowUpIcon,
 	BoxIcon,
@@ -225,6 +227,7 @@ export default {
 	components: {
 		CategoryName,
 		FilterSuggestion,
+		Maximize2Icon,
 		TrashIcon,
 		MoonIcon,
 		PowerIcon,
@@ -430,6 +433,13 @@ export default {
 						value: 'dark-mode',
 					},
 				},
+				{
+					title: this.$t('Toggle Full-Screen Mode'),
+					action: {
+						type: 'function',
+						value: 'full-screen-mode',
+					},
+				},
 				{
 					title: this.$t('Log Out'),
 					action: {
@@ -560,6 +570,10 @@ export default {
 					this.$store.dispatch('toggleDarkMode', !this.isDarkMode)
 				}
 
+				if (arg.action.value === 'full-screen-mode') {
+					this.$store.dispatch('toggleNavigationBars')
+				}
+
 				if (arg.action.value === 'log-out') {
 					this.$store.dispatch('logOut')
 				}