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')
 				}

resources/js/store/modules/app.js

@@ -2,6 +2,7 @@ import i18n from '/resources/js/i18n/index'
 import axios from "axios";
 
 const defaultState = {
+    isVisibleNavigationBars: localStorage.getItem('is_navigation_bars') !== 'false',
     darkMode: localStorage.getItem('is_dark_mode') === 'true' || false,
     isVisibleSidebar: localStorage.getItem('file_info_visibility') === 'true' || false,
     itemViewType: localStorage.getItem('preview_type') || 'list',
@@ -990,6 +991,14 @@ const actions = {
         // Change preview
         commit('TOGGLE_DARK_MODE', visibility)
     },
+    toggleNavigationBars: ({commit, state}) => {
+
+        // Store dark mode into localStorage
+        localStorage.setItem('is_navigation_bars', ! state.isVisibleNavigationBars)
+
+        // Change preview
+        commit('TOGGLE_NAVIGATION_BARS')
+    },
     changePreviewType: ({commit, state}, preview) => {
 
         // Get preview type
@@ -1061,12 +1070,16 @@ const mutations = {
     TOGGLE_DARK_MODE(state, visibility) {
         state.darkMode = visibility
     },
+    TOGGLE_NAVIGATION_BARS(state) {
+        state.isVisibleNavigationBars = ! state.isVisibleNavigationBars
+    },
     STORE_REQUESTED_PLAN(state, plan) {
         state.requestedPlan = plan
     },
 }
 
 const getters = {
+    isVisibleNavigationBars: state => state.isVisibleNavigationBars,
     isVisibleSidebar: state => state.isVisibleSidebar,
     teamPermissions: state => state.teamPermissions,
     itemViewType: state => state.itemViewType,

resources/js/views/Admin.vue

@@ -94,7 +94,8 @@
         name: 'Admin',
         computed: {
             ...mapGetters([
-				'config'
+				'isVisibleNavigationBars',
+				'config',
 			]),
 			assetMenu() {
 				return {

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

@@ -1,5 +1,9 @@
 <template>
-	<ContentSidebar>
+	<ContentSidebar class="relative" v-if="isVisibleNavigationBars">
+		<div @click="toggleNavigationBars" class="inline-block absolute top-2.5 right-0 p-3 cursor-pointer transition-all duration-200 hover:opacity-70 opacity-0">
+			<chevrons-left-icon size="18"/>
+		</div>
+
 		<!--Empty storage warning-->
 <!--		<ContentGroup v-if="user && config.storageLimit && storage.used > 95">
 			<UpgradeSidebarBanner/>
@@ -96,7 +100,7 @@
 </template>
 
 <script>
-	import {FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon} from "vue-feather-icons";
+	import { ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon} from "vue-feather-icons";
 	import UpgradeSidebarBanner from '/resources/js/components/Others/UpgradeSidebarBanner'
 	import TreeMenuNavigator from '/resources/js/components/Others/TreeMenuNavigator'
 	import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
@@ -111,6 +115,7 @@ export default {
 		TreeMenuNavigator,
 		ContentSidebar,
 		ContentGroup,
+		ChevronsLeftIcon,
 		UploadCloudIcon,
 		UserCheckIcon,
 		FolderIcon,
@@ -122,6 +127,7 @@ export default {
 	},
 	computed: {
 		...mapGetters([
+			'isVisibleNavigationBars',
 			'clipboard',
 			'config',
 			'user',
@@ -143,6 +149,9 @@ export default {
 		}
 	},
 	methods: {
+		toggleNavigationBars() {
+			this.$store.dispatch('toggleNavigationBars')
+		},
 		resetData() {
 			this.$store.commit('SET_CURRENT_TEAM_FOLDER', null)
 			this.$store.commit('CLIPBOARD_CLEAR')