From cad8c314220772a88ecaae08eb446a71f831ed7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Thu, 3 Feb 2022 18:19:10 +0100
Subject: [PATCH] UI improvements 2

---
 config/language-translations.php              |   2 +-
 resources/css/tailwind.css                    |   4 +
 .../js/components/Desktop/PopoverItem.vue     |   2 +-
 .../js/components/FilesView/ContextMenu.vue   |   2 +-
 .../components/FilesView/DesktopToolbar.vue   | 353 +++++-------------
 .../components/FilesView/FileFilterMobile.vue |   4 +-
 .../FilesView/FileSortingOptions.vue          |   4 +-
 .../js/components/FilesView/InfoSidebar.vue   |   8 +-
 .../js/components/FilesView/MobileToolbar.vue |  82 +---
 .../js/components/FilesView/NavigationBar.vue |  88 +++++
 resources/js/components/FilesView/Option.vue  |   4 +-
 .../js/components/FilesView/OptionGroup.vue   |  30 +-
 .../js/components/FilesView/OptionUpload.vue  |  63 +---
 .../js/components/FilesView/SearchBar.vue     |   6 +-
 .../js/components/FilesView/ToolbarButton.vue |   2 +-
 .../js/components/Spotlight/Spotlight.vue     |  22 +-
 .../Teams/Components/TeamFolderPreview.vue    |  21 +-
 .../Teams/CreateTeamFolderPopup.vue           |  34 +-
 resources/js/helpers/itemHelpers.js           |  43 ++-
 resources/js/views/FileView/Files.vue         |   5 +-
 resources/js/views/FileView/SharedWithMe.vue  |   4 +-
 resources/js/views/FileView/TeamFolders.vue   |   4 +-
 22 files changed, 316 insertions(+), 471 deletions(-)
 create mode 100644 resources/js/components/FilesView/NavigationBar.vue

diff --git a/config/language-translations.php b/config/language-translations.php
index 2020e2f0..198b78d7 100644
--- a/config/language-translations.php
+++ b/config/language-translations.php
@@ -749,7 +749,7 @@ return [
         'popup.share.password_description'                   => 'Protect your item by your custom password.',
         'sharelink.share_via_email'                          => 'Share Link on Emails',
         'sharelink.copy_embed'                               => 'Copy Web Insert Code',
-        'popup.move_into_team_disclaimer'                    => 'Your folder <b class="text-theme dark-text-theme">will be moved</b> into Team Folders.',
+        'popup.move_into_team_disclaimer'                    => 'Your folder <b class="text-theme dark-text-theme">will be moved</b> into Team Folders section.',
         'actions.upload_folder'                              => 'Upload Folder',
     ],
 ];
diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
index 9c6db922..e4e3f7b1 100644
--- a/resources/css/tailwind.css
+++ b/resources/css/tailwind.css
@@ -16,4 +16,8 @@
 
 .text-limit {
     @apply whitespace-nowrap text-ellipsis overflow-x-hidden block
+}
+
+.is-inactive {
+    @apply pointer-events-none opacity-40
 }
\ No newline at end of file
diff --git a/resources/js/components/Desktop/PopoverItem.vue b/resources/js/components/Desktop/PopoverItem.vue
index 3335eb5f..fc1e30b3 100644
--- a/resources/js/components/Desktop/PopoverItem.vue
+++ b/resources/js/components/Desktop/PopoverItem.vue
@@ -3,7 +3,7 @@
         <!--Overlay component-->
         <div
             @click.capture="hidePopover"
-            class="absolute top-12 z-20 w-60 overflow-hidden rounded-lg bg-white shadow-xl dark:bg-dark-foreground"
+            class="absolute top-12 z-20 w-60 overflow-hidden rounded-xl bg-white shadow-xl dark:bg-dark-foreground"
             :class="{ 'right-0': side === 'left', 'left-0': side === 'right' }"
         >
             <slot></slot>
diff --git a/resources/js/components/FilesView/ContextMenu.vue b/resources/js/components/FilesView/ContextMenu.vue
index f93f56ce..8925581d 100644
--- a/resources/js/components/FilesView/ContextMenu.vue
+++ b/resources/js/components/FilesView/ContextMenu.vue
@@ -3,7 +3,7 @@
         v-show="isVisible"
         :style="{ top: positionY + 'px', left: positionX + 'px' }"
         @click="closeAndResetContextMenu"
-        class="absolute z-20 w-60 overflow-hidden rounded-xl bg-white shadow-lg dark:bg-2x-dark-foreground"
+        class="absolute z-20 w-60 overflow-hidden rounded-xl bg-white shadow-lg dark:bg-2x-dark-foreground select-none"
         ref="contextmenu"
     >
         <div id="menu-list" class="w-full">
diff --git a/resources/js/components/FilesView/DesktopToolbar.vue b/resources/js/components/FilesView/DesktopToolbar.vue
index 00d5d5f2..09873a30 100644
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -1,106 +1,43 @@
 <template>
-    <div id="desktop-toolbar" class="hidden lg:block">
-        <div class="toolbar-wrapper">
-            <div @click="goBack" class="location">
-                <div v-if="!isVisibleNavigationBars" @click="toggleNavigationBars" class="mr-2">
-                    <menu-icon size="17" />
-                </div>
+    <div class="hidden lg:block">
+        <div class="flex items-center justify-between py-3">
+            <NavigationBar />
 
-                <chevron-left-icon
-                    :class="{
-                        '-translate-x-3 opacity-0': !currentFolder,
-                        'translate-x-0 opacity-100': currentFolder,
-                    }"
-                    class="icon-back transform transition-all duration-200"
-                    size="17"
-                />
+            <div class="flex items-center">
+                <!--Create button-->
+                <PopoverWrapper>
+                    <ToolbarButton
+                        @click.stop.native="showCreateMenu"
+                        source="cloud-plus"
+                        :action="$t('actions.create')"
+                    />
+                    <PopoverItem name="desktop-create" side="left">
+                        <OptionGroup :title="$t('Upload')" :class="{'is-inactive': canUploadInView || isTeamFolderHomepage || isSharedWithMeHomepage}">
+                            <OptionUpload :title="$t('actions.upload')" type="file" />
+                            <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
+                        </OptionGroup>
+                        <OptionGroup :title="$t('Create')">
+                            <Option
+                                @click.stop.native="$createFolder"
+                                :class="{ 'is-inactive': canCreateFolder || isTeamFolderHomepage || isSharedWithMeHomepage }"
+                                :title="$t('actions.create_folder')"
+                                icon="folder-plus"
+                            />
+                            <Option
+                                @click.stop.native="$createTeamFolder"
+								:class="{ 'is-inactive': canCreateTeamFolder || isSharedWithMeHomepage }"
+                                :title="$t('Create Team Folder')"
+                                icon="users"
+                            />
+                        </OptionGroup>
+                    </PopoverItem>
+                </PopoverWrapper>
 
-                <span :class="{ '-translate-x-4': !currentFolder }" class="location-title transform transition-all duration-200">
-                    {{ $getCurrentLocationName() }}
-                </span>
-
-                <span
-                    :class="{
-                        '-translate-x-4 opacity-0': !currentFolder,
-                        'translate-x-0 opacity-100': currentFolder,
-                    }"
-                    @click.stop="folderActions"
-                    class="location-more group transform transition-all duration-200"
-                    id="folder-actions"
-                >
-                    <more-horizontal-icon size="14" class="icon-more group-hover-text-theme" />
-                </span>
-            </div>
-
-            <ToolbarWrapper>
                 <!--Search bar-->
-                <ToolbarGroup class="ml-0">
-                    <SearchBar class="hidden lg:block" />
-                </ToolbarGroup>
-
-                <!--Create button for all pages except SharedWithMe-->
-                <ToolbarGroup v-if="$checkPermission(['master', 'editor']) && !$isThisRoute($route, ['SharedWithMe'])">
-                    <span class="block lg:hidden">
-                        <ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" />
-                    </span>
-
-                    <PopoverWrapper>
-                        <ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :action="$t('actions.create')" />
-
-                        <PopoverItem name="desktop-create" side="left">
-                            <OptionGroup :class="{ 'is-inactive': canUploadInView }">
-                                <OptionUpload :title="$t('actions.upload')" type="file" />
-                                <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
-                            </OptionGroup>
-                            <OptionGroup>
-                                <Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" />
-                                <Option
-                                    @click.stop.native="$createFolder"
-                                    :class="{
-                                        'is-inactive': canCreateFolderInView || isTeamFolderHomepage,
-                                    }"
-                                    :title="$t('actions.create_folder')"
-                                    icon="folder-plus"
-                                />
-                            </OptionGroup>
-                        </PopoverItem>
-                    </PopoverWrapper>
-                </ToolbarGroup>
-
-                <!--Create button for shared with me page-->
-                <ToolbarGroup v-if="$isThisRoute($route, ['SharedWithMe'])">
-                    <span class="block lg:hidden">
-                        <ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" />
-                    </span>
-
-                    <PopoverWrapper>
-                        <ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :class="{ 'is-inactive': !canEdit }" :action="$t('actions.create')" />
-
-                        <PopoverItem name="desktop-create" side="left">
-                            <OptionGroup>
-                                <OptionUpload
-                                    :class="{
-                                        'is-inactive': canUploadInView || isSharedWithMeHomepage,
-                                    }"
-                                    :title="$t('actions.upload')"
-                                />
-                            </OptionGroup>
-                            <OptionGroup>
-                                <Option
-                                    @click.stop.native="$createFolder"
-                                    :class="{
-                                        'is-inactive': canCreateFolderInView || isSharedWithMeHomepage,
-                                    }"
-                                    :title="$t('actions.create_folder')"
-                                    icon="folder-plus"
-                                />
-                            </OptionGroup>
-                        </PopoverItem>
-                    </PopoverWrapper>
-                </ToolbarGroup>
+                <SearchBar class="ml-5 hidden lg:block xl:ml-8" />
 
                 <!--File Controls-->
-                <ToolbarGroup v-if="$checkPermission(['master', 'editor']) || ($isMobile() && $isThisRoute($route, ['SharedWithMe', 'TeamFolders']))">
+                <div class="ml-5 flex items-center xl:ml-8">
                     <!--Team Heads-->
                     <PopoverWrapper v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])">
                         <TeamMembersButton
@@ -112,24 +49,36 @@
                         <PopoverItem name="team-folder" side="left">
                             <TeamFolderPreview />
 
-                            <OptionGroup v-if="$isThisRoute($route, ['TeamFolders'])">
-                                <Option @click.native="$updateTeamFolder(teamFolder)" :title="$t('Edit Members')" icon="rename" />
-                                <Option @click.native="$dissolveTeamFolder(teamFolder)" :title="$t('Dissolve Team')" icon="trash" />
+                            <OptionGroup v-if="$isThisRoute($route, ['TeamFolders'])" :title="$t('Options')">
+                                <Option
+                                    @click.native="$updateTeamFolder(teamFolder)"
+                                    :title="$t('Edit Members')"
+                                    icon="rename"
+                                />
+                                <Option
+                                    @click.native="$dissolveTeamFolder(teamFolder)"
+                                    :title="$t('Dissolve Team')"
+                                    icon="trash"
+                                />
                             </OptionGroup>
 
-                            <OptionGroup v-if="$isThisRoute($route, ['SharedWithMe'])">
-                                <Option @click.native="$detachMeFromTeamFolder(teamFolder)" :title="$t('Leave the Team Folder')" icon="user-minus" />
+                            <OptionGroup v-if="$isThisRoute($route, ['SharedWithMe'])" :title="$t('Options')">
+                                <Option
+                                    @click.native="$detachMeFromTeamFolder(teamFolder)"
+                                    :title="$t('Leave the Team Folder')"
+                                    icon="user-minus"
+                                />
                             </OptionGroup>
                         </PopoverItem>
                     </PopoverWrapper>
 
-                    <!--Item actions-->
-                    <span v-if="!$isMobile()" class="whitespace-nowrap">
+                    <!--Action buttons-->
+                    <div v-if="!$isMobile()" class="flex items-center">
                         <ToolbarButton
                             v-if="canShowConvertToTeamFolder"
                             @click.native="$convertAsTeamFolder(clipboard[0])"
                             :class="{
-                                'is-inactive': !canCreateTeamFolderInView,
+                                'is-inactive': !canCreateTeamFolder,
                             }"
                             source="user-plus"
                             :action="$t('actions.convert_into_team_folder')"
@@ -137,11 +86,12 @@
                         <ToolbarButton
                             v-if="!$isThisRoute($route, ['SharedWithMe', 'Public'])"
                             @click.native="$shareFileOrFolder(clipboard[0])"
-                            :class="{ 'is-inactive': canShareInView }"
+                            :class="{
+                                'is-inactive': canShareInView,
+                            }"
                             source="share"
                             :action="$t('actions.share')"
                         />
-
                         <ToolbarButton
                             @click.native="$moveFileOrFolder(clipboard[0])"
                             :class="{
@@ -158,20 +108,28 @@
                             source="trash"
                             :action="$t('actions.delete')"
                         />
-                    </span>
-                </ToolbarGroup>
+                    </div>
+                </div>
 
                 <!--View Controls-->
-                <ToolbarGroup>
+                <div class="ml-5 flex items-center xl:ml-8">
                     <PopoverWrapper>
-                        <ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
+                        <ToolbarButton
+                            @click.stop.native="showSortingMenu"
+                            source="preview-sorting"
+                            :action="$t('actions.sorting_view')"
+                        />
                         <PopoverItem name="desktop-sorting" side="left">
                             <FileSortingOptions />
                         </PopoverItem>
                     </PopoverWrapper>
-                    <ToolbarButton @click.native="$store.dispatch('fileInfoToggle')" :action="$t('actions.info_panel')" source="info" />
-                </ToolbarGroup>
-            </ToolbarWrapper>
+                    <ToolbarButton
+                        @click.native="$store.dispatch('fileInfoToggle')"
+                        :action="$t('actions.info_panel')"
+                        source="info"
+                    />
+                </div>
+            </div>
         </div>
 
         <UploadProgress />
@@ -179,48 +137,51 @@
 </template>
 
 <script>
-import FileSortingOptions from './FileSortingOptions'
-import UploadProgress from './UploadProgress'
+import TeamMembersButton from '../Teams/Components/TeamMembersButton'
+import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
 import PopoverWrapper from '../Desktop/PopoverWrapper'
-import ToolbarWrapper from '../Desktop/ToolbarWrapper'
+import FileSortingOptions from './FileSortingOptions'
+import PopoverItem from '../Desktop/PopoverItem'
+import UploadProgress from './UploadProgress'
+import NavigationBar from './NavigationBar'
 import ToolbarButton from './ToolbarButton'
 import OptionUpload from './OptionUpload'
-import ToolbarGroup from '../Desktop/ToolbarGroup'
 import OptionGroup from './OptionGroup'
-import TeamMembersButton from '../Teams/Components/TeamMembersButton'
-import PopoverItem from '../Desktop/PopoverItem'
-import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
-import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
 import SearchBar from './SearchBar'
-import Option from './Option'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
+import Option from './Option'
 
 export default {
     name: 'DesktopToolbar',
     components: {
-        TeamMembersButton,
         FileSortingOptions,
-        MoreHorizontalIcon,
+        TeamMembersButton,
         TeamFolderPreview,
-        ChevronLeftIcon,
-        ToolbarWrapper,
         UploadProgress,
         PopoverWrapper,
+        NavigationBar,
         ToolbarButton,
         OptionUpload,
-        ToolbarGroup,
         OptionGroup,
         PopoverItem,
         SearchBar,
-        MenuIcon,
         Option,
     },
     computed: {
-        ...mapGetters(['isVisibleNavigationBars', 'currentTeamFolder', 'currentFolder', 'sharedDetail', 'clipboard', 'user']),
+        ...mapGetters([
+            'isVisibleNavigationBars',
+            'currentTeamFolder',
+            'currentFolder',
+            'sharedDetail',
+            'clipboard',
+            'user',
+        ]),
         canEdit() {
             if (this.currentTeamFolder && this.user && this.clipboard[0]) {
-                let member = this.currentTeamFolder.data.relationships.members.data.find((member) => member.data.id === this.user.data.id)
+                let member = this.currentTeamFolder.data.relationships.members.data.find(
+                    (member) => member.data.id === this.user.data.id
+                )
 
                 return member.data.attributes.permission === 'can-edit'
             }
@@ -230,20 +191,13 @@ export default {
         teamFolder() {
             return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
         },
-        isNotHomepage() {
-            if (this.$isThisRoute(this.$route, ['Public'])) {
-                return this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id
-            }
-
-            return this.$route.params.id
-        },
         isTeamFolderHomepage() {
             return this.$isThisRoute(this.$route, ['TeamFolders']) && !this.$route.params.id
         },
         isSharedWithMeHomepage() {
             return this.$isThisRoute(this.$route, ['SharedWithMe']) && !this.$route.params.id
         },
-        canCreateFolderInView() {
+        canCreateFolder() {
             return !this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe'])
         },
         canShowConvertToTeamFolder() {
@@ -264,19 +218,15 @@ export default {
             let routes = ['TeamFolders', 'RecentUploads', 'MySharedItems', 'Public', 'Files']
             return !this.$isThisRoute(this.$route, routes) || this.clipboard.length > 1 || this.clipboard.length === 0
         },
-        canCreateTeamFolderInView() {
-            let routes = ['MySharedItems', 'Files']
-
-            return this.$isThisRoute(this.$route, routes) && this.clipboard.length === 1 && this.clipboard[0].data.type === 'folder'
+        canCreateTeamFolder() {
+            return (
+                this.$isThisRoute(this.$route, ['MySharedItems', 'Files']) &&
+                this.clipboard.length === 1 &&
+                this.clipboard[0].data.type === 'folder'
+            )
         },
     },
     methods: {
-        toggleNavigationBars() {
-            this.$store.dispatch('toggleNavigationBars')
-        },
-        goBack() {
-            if (this.isNotHomepage) this.$router.back()
-        },
         showTeamFolderMenu() {
             if (this.teamFolder) events.$emit('popover:open', 'team-folder')
         },
@@ -292,108 +242,3 @@ export default {
     },
 }
 </script>
-
-<style scoped lang="scss">
-@import 'resources/sass/vuefilemanager/_variables';
-@import 'resources/sass/vuefilemanager/_mixins';
-
-.is-inactive {
-    opacity: 0.25;
-    pointer-events: none;
-}
-
-.toolbar-wrapper {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    z-index: 2;
-}
-
-.location {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-
-    .icon-back {
-        @include transition(150ms);
-        pointer-events: none;
-        margin-right: 6px;
-        shrink: 0;
-    }
-
-    .location-title {
-        @include font-size(15);
-        line-height: 1;
-        font-weight: 700;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        color: $text;
-    }
-
-    .location-more {
-        margin-left: 6px;
-        padding: 1px 4px;
-        line-height: 0;
-        border-radius: 3px;
-
-        svg circle {
-            @include transition(150ms);
-        }
-
-        &:hover {
-            background: $light_background;
-
-            svg circle {
-                color: inherit;
-            }
-        }
-    }
-}
-
-.toolbar-position {
-    text-align: center;
-
-    span {
-        @include font-size(17);
-        font-weight: 600;
-    }
-}
-
-@media only screen and (max-width: 1024px) {
-    .location {
-        .location-title {
-            max-width: 120px;
-        }
-    }
-
-    .toolbar-tools {
-        .button {
-            margin-left: 0;
-            height: 40px;
-            width: 40px;
-        }
-    }
-}
-
-.dark {
-    .toolbar .directory-name {
-        color: $dark_mode_text_primary;
-    }
-
-    .location {
-        .location-title {
-            color: $dark_mode_text_primary;
-        }
-
-        .location-more {
-            &:hover {
-                background: $dark_mode_foreground;
-            }
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/FilesView/FileFilterMobile.vue b/resources/js/components/FilesView/FileFilterMobile.vue
index d6bcc0d9..c87f82e9 100644
--- a/resources/js/components/FilesView/FileFilterMobile.vue
+++ b/resources/js/components/FilesView/FileFilterMobile.vue
@@ -1,13 +1,13 @@
 <template>
     <MenuMobile name="file-filter">
         <MenuMobileGroup>
-            <OptionGroup>
+            <OptionGroup :title="$t('Base')">
                 <Option @click.native="goToFiles" :title="$t('sidebar.home')" icon="hard-drive" :is-active="$isThisRoute($route, 'Files')" :is-hover-disabled="true" />
                 <Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisRoute($route, 'RecentUploads')" :is-hover-disabled="true" />
                 <Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisRoute($route, 'MySharedItems')" :is-hover-disabled="true" />
                 <Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisRoute($route, 'Trash')" :is-hover-disabled="true" />
             </OptionGroup>
-            <OptionGroup>
+            <OptionGroup :title="$t('Collaboration')">
                 <Option @click.native="goToTeamFolders" :title="$t('Team Folders')" icon="users" :is-active="$isThisRoute($route, 'TeamFolders')" :is-hover-disabled="true" />
                 <Option
                     @click.native="goToSharedWithMe"
diff --git a/resources/js/components/FilesView/FileSortingOptions.vue b/resources/js/components/FilesView/FileSortingOptions.vue
index eb50c3f5..bd5c641e 100644
--- a/resources/js/components/FilesView/FileSortingOptions.vue
+++ b/resources/js/components/FilesView/FileSortingOptions.vue
@@ -1,10 +1,10 @@
 <template>
     <div>
-        <OptionGroup>
+        <OptionGroup :title="$t('View')">
             <Option v-if="isList" @click.native="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
             <Option v-if="isGrid" @click.native="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
         </OptionGroup>
-        <OptionGroup>
+        <OptionGroup :title="$t('Sorting')">
             <Option @click.native.stop="sort('created_at')" :arrow="arrowForCreatedAtField" :title="$t('preview_sorting.sort_date')" icon="calendar" />
             <Option @click.native.stop="sort('name')" :arrow="arrowForNameField" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
         </OptionGroup>
diff --git a/resources/js/components/FilesView/InfoSidebar.vue b/resources/js/components/FilesView/InfoSidebar.vue
index 316b139f..cea6aaf8 100644
--- a/resources/js/components/FilesView/InfoSidebar.vue
+++ b/resources/js/components/FilesView/InfoSidebar.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="hidden h-screen 2xl:w-[360px] w-[320px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 lg:block">
+    <div class="hidden h-screen 2xl:w-[360px] w-[320px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block">
         <!--Is empty clipboard-->
         <div v-if="isEmpty" class="flex h-full items-center justify-center">
             <div class="text-center">
-                <eye-off-icon size="28" class="vue-feather mb-3 inline-block text-gray-400" />
-                <small class="block text-sm text-gray-400">
+                <eye-off-icon size="22" class="vue-feather mb-3 inline-block text-gray-500" />
+                <small class="block text-xs text-gray-500">
                     {{ $t('messages.nothing_to_preview') }}
                 </small>
             </div>
@@ -60,7 +60,7 @@
             <ListInfoItem v-if="canShowAuthor" :title="$t('Author')">
                 <div class="mt-1.5 flex items-center">
                     <MemberAvatar :size="32" :member="singleFile.data.relationships.owner" />
-                    <span class="font-sm ml-3 block font-bold">
+                    <span class="text-sm ml-3 block font-bold">
                         {{ singleFile.data.relationships.owner.data.attributes.name }}
                     </span>
                 </div>
diff --git a/resources/js/components/FilesView/MobileToolbar.vue b/resources/js/components/FilesView/MobileToolbar.vue
index 5a1b2aa5..b545f73b 100644
--- a/resources/js/components/FilesView/MobileToolbar.vue
+++ b/resources/js/components/FilesView/MobileToolbar.vue
@@ -1,43 +1,24 @@
 <template>
-    <div class="sticky top-0 z-20 block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden">
-        <!-- Go back-->
-        <div @click="goBack" class="go-back-button flex items-center text-left">
-            <chevron-left-icon
-                size="17"
-                :class="{
-                    '-translate-x-3 opacity-0': !isLoadedFolder,
-                    'translate-x-0 opacity-100': isLoadedFolder,
-                }"
-                class="mr-2 -ml-1 transform cursor-pointer align-middle transition-all duration-200"
-            />
-
-            <!--Folder Title-->
-            <div
-                :class="{ '-translate-x-4': !isLoadedFolder }"
-                class="inline-block transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 lg:text-base"
-                style="max-width: 200px"
-            >
-                {{ $getCurrentLocationName() }}
-            </div>
-
-            <span
-                @click.stop="showItemActions"
-                :class="{
-                    '-translate-x-4 opacity-0': !currentFolder,
-                    'translate-x-0 opacity-100': currentFolder,
-                }"
-                class="ml-3 transform rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground"
-            >
-                <more-horizontal-icon size="14" />
-            </span>
-        </div>
+    <div
+        class="sticky top-0 z-20 block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
+    >
+        <NavigationBar />
 
         <div class="relative flex items-center">
-            <TeamMembersButton v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])" size="28" @click.stop.native="$showMobileMenu('team-menu')" class="absolute right-9" />
+            <TeamMembersButton
+                v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])"
+                size="28"
+                @click.stop.native="$showMobileMenu('team-menu')"
+                class="absolute right-9"
+            />
 
             <!--More Actions-->
             <div class="relative">
-                <div v-if="$checkPermission('master')" @click="showMobileNavigation" class="absolute right-0 -mr-2 -translate-y-2/4 transform p-4">
+                <div
+                    v-if="$checkPermission('master')"
+                    @click="showMobileNavigation"
+                    class="absolute right-0 -mr-2 -translate-y-2/4 transform p-4"
+                >
                     <menu-icon size="17" />
                 </div>
             </div>
@@ -48,49 +29,22 @@
 <script>
 import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
 import TeamMembersButton from '../Teams/Components/TeamMembersButton'
-import ToolbarButton from './ToolbarButton'
-import SearchBar from './SearchBar'
-import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
-import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { MenuIcon } from 'vue-feather-icons'
+import NavigationBar from './NavigationBar'
 
 export default {
     name: 'MobileToolBar',
     components: {
+        NavigationBar,
         TeamMembersPreview,
-        MoreHorizontalIcon,
         TeamMembersButton,
-        ChevronLeftIcon,
-        ToolbarButton,
-        SearchBar,
         MenuIcon,
     },
-    computed: {
-        ...mapGetters(['currentTeamFolder', 'isVisibleSidebar', 'currentFolder', 'itemViewType', 'clipboard']),
-        isLoadedFolder() {
-            return this.$route.params.id
-        },
-    },
     methods: {
-        showItemActions() {
-            this.$store.commit('CLIPBOARD_CLEAR')
-            this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFolder)
-
-            this.$showMobileMenu('file-menu')
-            events.$emit('mobile-context-menu:show', this.currentFolder)
-        },
         showMobileNavigation() {
             this.$showMobileMenu('user-navigation')
             this.$store.commit('DISABLE_MULTISELECT_MODE')
         },
-        goBack() {
-            if (this.isLoadedFolder) this.$router.back()
-        },
-    },
-    created() {
-        events.$on('show:content', () => {
-            if (this.isSidebarMenu) this.isSidebarMenu = false
-        })
     },
 }
 </script>
diff --git a/resources/js/components/FilesView/NavigationBar.vue b/resources/js/components/FilesView/NavigationBar.vue
new file mode 100644
index 00000000..17c3592d
--- /dev/null
+++ b/resources/js/components/FilesView/NavigationBar.vue
@@ -0,0 +1,88 @@
+<template>
+    <div @click="goBack" class="flex items-center text-left select-none relative">
+
+		<!--Menu icon-->
+        <div v-if="!isVisibleNavigationBars" @click="toggleNavigationBars" class="-mt-0.5 mr-2 p-2 cursor-pointer lg:block hidden">
+            <menu-icon size="17" />
+        </div>
+
+        <chevron-left-icon
+            size="17"
+            :class="{
+                '-translate-x-3 opacity-0': !isLoadedFolder,
+                'translate-x-0 opacity-100': isLoadedFolder,
+            }"
+            class="lg:-mt-0.5 mr-2 -ml-1 cursor-pointer align-middle transition-all duration-200"
+        />
+
+        <!--Folder Title-->
+        <b
+            :class="{ '-translate-x-4': !isLoadedFolder }"
+            class="inline-block transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 max-w-[200px]"
+        >
+            {{ $getCurrentLocationName() }}
+        </b>
+
+        <div
+            @click.stop="showItemActions"
+            :class="{
+                '-translate-x-4 opacity-0': !currentFolder,
+                'translate-x-0 opacity-100': currentFolder,
+            }"
+            class="ml-3 transform rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground cursor-pointer"
+			id="folder-actions"
+        >
+            <more-horizontal-icon size="14" />
+        </div>
+    </div>
+</template>
+<script>
+import {mapGetters} from "vuex";
+import {events} from "../../bus";
+import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
+
+export default {
+    name: 'NavigationBar',
+	components: {
+		MoreHorizontalIcon,
+		ChevronLeftIcon,
+		MenuIcon,
+	},
+	computed: {
+		...mapGetters([
+			'isVisibleNavigationBars',
+			'currentFolder',
+			'sharedDetail',
+		]),
+		isNotHomepage() {
+			if (this.$isThisRoute(this.$route, ['Public'])) {
+				return this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id
+			}
+
+			return this.$route.params.id
+		},
+		isLoadedFolder() {
+			return this.$route.params.id
+		},
+	},
+	methods: {
+		goBack() {
+			if (this.isNotHomepage) this.$router.back()
+		},
+		showItemActions() {
+			if (window.innerWidth > 1024) {
+				events.$emit('context-menu:current-folder', this.currentFolder)
+			} else {
+				this.$store.commit('CLIPBOARD_CLEAR')
+				this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFolder)
+
+				this.$showMobileMenu('file-menu')
+				events.$emit('mobile-context-menu:show', this.currentFolder)
+			}
+		},
+		toggleNavigationBars() {
+			this.$store.dispatch('toggleNavigationBars')
+		},
+	}
+}
+</script>
diff --git a/resources/js/components/FilesView/Option.vue b/resources/js/components/FilesView/Option.vue
index 3d80b538..c8ce1809 100644
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/FilesView/Option.vue
@@ -1,9 +1,7 @@
 <template>
     <li
         class="flex items-center justify-between py-4 px-5 lg:py-3 2xl:py-4"
-        :class="{
-            'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled,
-        }"
+        :class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled,}"
     >
         <div class="flex items-center">
             <div class="mr-4">
diff --git a/resources/js/components/FilesView/OptionGroup.vue b/resources/js/components/FilesView/OptionGroup.vue
index 3de1e3e3..ade957ce 100644
--- a/resources/js/components/FilesView/OptionGroup.vue
+++ b/resources/js/components/FilesView/OptionGroup.vue
@@ -1,23 +1,31 @@
 <template>
-    <ul class="option-group py-1">
-        <slot></slot>
-    </ul>
+	<div>
+		<b v-if="title" class="py-0.5 px-4 mt-2 block text-xs text-gray-500 dark-text-theme">
+			{{ title }}
+		</b>
+		<ul class="option-group py-1">
+			<slot></slot>
+		</ul>
+	</div>
 </template>
 
 <script>
 export default {
     name: 'OptionGroup',
+	props: [
+		'title'
+	]
 }
 </script>
 
 <style scoped lang="scss">
-.option-group {
-    &:first-child {
-        padding-top: 0 !important;
-    }
+	.option-group {
+		&:first-child {
+			padding-top: 0 !important;
+		}
 
-    &:last-child {
-        padding-bottom: 0 !important;
-    }
-}
+		&:last-child {
+			padding-bottom: 0 !important;
+		}
+	}
 </style>
diff --git a/resources/js/components/FilesView/OptionUpload.vue b/resources/js/components/FilesView/OptionUpload.vue
index 22b38288..e799efda 100644
--- a/resources/js/components/FilesView/OptionUpload.vue
+++ b/resources/js/components/FilesView/OptionUpload.vue
@@ -1,14 +1,16 @@
 <template>
-    <label class="menu-option group">
-        <div class="icon-left group-hover-text-theme">
-            <upload-cloud-icon v-if="type === 'file'" size="17" class="group-hover-text-theme" />
-            <folder-upload-icon v-if="type === 'folder'" size="17" class="group-hover-text-theme" />
+    <label
+		class="flex items-center py-4 px-5 lg:py-3 2xl:py-4"
+		:class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': ! isHoverDisabled,}"
+	>
+        <div class="mr-4">
+            <upload-cloud-icon v-if="type === 'file'" size="17" class="vue-feather group-hover-text-theme" />
+            <folder-upload-icon v-if="type === 'folder'" size="17" class="vue-feather group-hover-text-theme" />
         </div>
-        <div class="text-label group-hover-text-theme">
+        <div class="group-hover-text-theme text-sm font-bold text-left">
             {{ title }}
 
             <input v-if="type === 'file'" @change="emmitFiles" v-show="false" id="file" type="file" name="files[]" multiple />
-
             <input v-if="type === 'folder'" @change="emmitFiles" v-show="false" id="folder" type="file" name="folders[]" webkitdirectory mozdirectory />
         </div>
     </label>
@@ -32,52 +34,3 @@ export default {
     },
 }
 </script>
-
-<style scoped lang="scss">
-@import 'resources/sass/vuefilemanager/_variables';
-@import 'resources/sass/vuefilemanager/_mixins';
-
-.menu-option {
-    white-space: nowrap;
-    font-weight: 700;
-    @include font-size(14);
-    padding: 15px 20px;
-    cursor: pointer;
-    width: 100%;
-    color: $text;
-    display: flex;
-    align-items: center;
-
-    .icon-left {
-        margin-right: 20px;
-        line-height: 0;
-
-        path,
-        line,
-        polyline,
-        rect,
-        circle,
-        polygon {
-            color: inherit;
-        }
-    }
-
-    .text-label {
-        @include font-size(16);
-    }
-
-    &:hover {
-        background: $light_background;
-    }
-}
-
-.dark {
-    .menu-option {
-        color: $dark_mode_text_primary;
-
-        &:hover {
-            background: lighten($dark_mode_foreground, 2%);
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/FilesView/SearchBar.vue b/resources/js/components/FilesView/SearchBar.vue
index 16c78cee..5e1f8aef 100644
--- a/resources/js/components/FilesView/SearchBar.vue
+++ b/resources/js/components/FilesView/SearchBar.vue
@@ -1,13 +1,13 @@
 <template>
     <div @click="$openSpotlight()" class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground">
-        <div class="flex w-56 items-center justify-between px-5 py-2.5 text-left xl:w-72">
+        <div class="flex w-56 items-center justify-between px-4 py-2.5 text-left xl:w-64">
             <div class="flex items-center">
                 <search-icon size="18" class="vue-feather text-gray-400 dark:text-gray-600" />
-                <span class="pl-2.5 text-xs font-bold text-gray-400 dark:text-gray-600 xl:text-sm">
+                <span class="pl-2.5 text-xs font-bold text-gray-400 dark:text-gray-600">
                     {{ $t('inputs.placeholder_search_files') }}
                 </span>
             </div>
-            <span class="rounded border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-opacity-5 dark:text-gray-600 xl:text-sm">
+            <span class="rounded dark:border-slate-200 border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-opacity-5 dark:text-gray-600">
                 {{ metaKeyIcon }}+K
             </span>
         </div>
diff --git a/resources/js/components/FilesView/ToolbarButton.vue b/resources/js/components/FilesView/ToolbarButton.vue
index 42c5839a..7aa12167 100644
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/FilesView/ToolbarButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button class="group h-[42px] w-[42px] inline-flex items-center justify-center cursor-pointer rounded-lg hover:bg-light-background" :title="action">
+    <button class="group h-[42px] w-[42px] inline-flex items-center justify-center cursor-pointer rounded-lg dark:hover:bg-2x-dark-foreground hover:bg-light-background" :title="action">
         <corner-down-right-icon v-if="source === 'move'" size="19" class="vue-feather group-hover-text-theme" />
         <download-cloud-icon v-if="source === 'download'" size="19" class="vue-feather group-hover-text-theme" />
         <folder-plus-icon v-if="source === 'folder-plus'" size="19" class="vue-feather group-hover-text-theme" />
diff --git a/resources/js/components/Spotlight/Spotlight.vue b/resources/js/components/Spotlight/Spotlight.vue
index c36b2d5c..693b2a83 100644
--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -91,6 +91,7 @@
                             <trash-icon v-if="result.action.value === 'empty-trash'" size="18" class="vue-feather text-theme" />
                             <grid-icon v-if="result.action.value === 'toggle-grid-list'" size="18" class="vue-feather text-theme" />
                             <smile-icon v-if="result.action.value === 'toggle-emoji'" size="18" class="vue-feather text-theme" />
+                            <folder-plus-icon v-if="result.action.value === 'create-team-folder'" size="18" class="vue-feather text-theme" />
 
                             <b class="ml-3.5 text-sm font-bold">
                                 {{ result.title }}
@@ -171,6 +172,7 @@ import KeyboardHints from './KeyboardHints'
 import axios from 'axios'
 import { debounce } from 'lodash'
 import {
+	FolderPlusIcon,
     SmileIcon,
     BoxIcon,
     CreditCardIcon,
@@ -201,6 +203,7 @@ import { mapGetters } from 'vuex'
 export default {
     name: 'Spotlight',
     components: {
+		FolderPlusIcon,
         SmileIcon,
         KeyboardHints,
         CreditCardIcon,
@@ -380,6 +383,16 @@ export default {
                 },
             ]
 
+			let createList = [
+				{
+					title: this.$t('Create Team Folder'),
+					action: {
+						type: 'function',
+						value: 'create-team-folder',
+					},
+				},
+			]
+
             let functionList = [
                 {
                     title: this.$t('Toggle Grid/List View'),
@@ -452,11 +465,11 @@ export default {
                     })
                 }
 
-                return [].concat.apply([], [functionList, userSettings, fileLocations, adminLocations, adminActions])
+                return [].concat.apply([], [functionList, createList, userSettings, fileLocations, adminLocations, adminActions])
             }
 
             if (this.user.data.attributes.role === 'user') {
-                return [].concat.apply([], [functionList, userSettings, fileLocations])
+                return [].concat.apply([], [functionList, createList, userSettings, fileLocations])
             }
         },
         isAdmin() {
@@ -584,6 +597,10 @@ export default {
                 if (arg.action.value === 'empty-trash') {
                     this.$emptyTrashQuietly()
                 }
+
+                if (arg.action.value === 'create-team-folder') {
+                    this.$createTeamFolder()
+                }
             }
 
             this.exitSpotlight()
@@ -673,7 +690,6 @@ export default {
             this.results = []
             this.query = ''
             this.isVisible = false
-            events.$emit('popup:close')
         },
         onPageDown() {
             let results = this.results.length
diff --git a/resources/js/components/Teams/Components/TeamFolderPreview.vue b/resources/js/components/Teams/Components/TeamFolderPreview.vue
index ffa76729..596c61e6 100644
--- a/resources/js/components/Teams/Components/TeamFolderPreview.vue
+++ b/resources/js/components/Teams/Components/TeamFolderPreview.vue
@@ -1,10 +1,12 @@
 <template>
-    <div class="team-folder-preview py-3 px-5 text-left">
+    <div class="py-3 px-5 text-left">
         <div class="info">
             <b class="title text-sm">
                 {{ teamFolder.data.attributes.name }}
             </b>
-            <span class="subtitle mb-2 block text-tiny text-gray-600 dark:text-gray-500"> Created at {{ teamFolder.data.attributes.created_at }} </span>
+            <span class="subtitle mb-2 block text-tiny text-gray-600 dark:text-gray-500">
+                {{ $t('Created at') }} {{ teamFolder.data.attributes.created_at }}
+            </span>
             <TeamMembersPreview :folder="teamFolder" :avatar-size="32" class="members" />
         </div>
     </div>
@@ -27,18 +29,3 @@ export default {
     },
 }
 </script>
-
-<style lang="scss" scoped>
-@import 'resources/sass/vuefilemanager/_variables';
-@import 'resources/sass/vuefilemanager/_mixins';
-
-.team-folder-preview {
-    border-bottom: 1px solid $light_mode_border;
-}
-
-.dark {
-    .team-folder-preview {
-        border-color: $dark_mode_border_color;
-    }
-}
-</style>
diff --git a/resources/js/components/Teams/CreateTeamFolderPopup.vue b/resources/js/components/Teams/CreateTeamFolderPopup.vue
index 6a5441f8..7dc86ee1 100644
--- a/resources/js/components/Teams/CreateTeamFolderPopup.vue
+++ b/resources/js/components/Teams/CreateTeamFolderPopup.vue
@@ -50,19 +50,20 @@
 
                 <!--Member list-->
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Members" rules="required" v-slot="{ errors }">
-                    <label class="input-label">{{ $t('Your Members') }}:</label>
-                    <span v-if="errors[0]" class="error-message" style="margin-top: -5px">
-                        {{ $t('Please add at least one member.') }}
-                    </span>
+					<AppInputText :title="$t('Your Members')" :error="errors[0]" :is-last="true">
+						<span v-if="errors[0]" class="error-message" style="margin-top: -5px">
+							{{ $t('Please add at least one member.') }}
+						</span>
 
-                    <TeamList v-model="invitations" />
+						<TeamList v-model="invitations" />
 
-                    <p v-if="Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
-                        {{ $t('Please add at least one member into your Team Folder.') }}
-                    </p>
+						<p v-if="Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
+							{{ $t('Please add at least one member into your Team Folders.') }}
+						</p>
+                    </AppInputText>
                 </ValidationProvider>
 
-                <InfoBox v-if="!isNewFolderTeamCreation" style="margin-bottom: 0">
+                <InfoBox v-if="!isNewFolderTeamCreation" class="mt-2.5 !mb-0">
                     <p v-html="$t('popup.move_into_team_disclaimer')"></p>
                 </InfoBox>
             </ValidationObserver>
@@ -215,7 +216,7 @@ export default {
             this.email = undefined
         },
     },
-    mounted() {
+    created() {
         events.$on('popup:open', (args) => {
             if (args.name !== 'create-team-folder') return
 
@@ -226,7 +227,7 @@ export default {
 
                 if (this.item) this.$refs.email.focus()
 
-                if (!this.item) this.$refs.name.focus()
+                if (!this.item && this.$refs.name) this.$refs.name.focus()
             })
         })
 
@@ -238,17 +239,6 @@ export default {
                 this.invitations = []
             }, 150)
         })
-
-        console.log()
     },
 }
 </script>
-
-<style scoped lang="scss">
-@import 'resources/sass/vuefilemanager/_inapp-forms.scss';
-@import '../../../sass/vuefilemanager/forms';
-
-.item-thumbnail {
-    margin-bottom: 20px;
-}
-</style>
diff --git a/resources/js/helpers/itemHelpers.js b/resources/js/helpers/itemHelpers.js
index e8ee3da4..80320964 100644
--- a/resources/js/helpers/itemHelpers.js
+++ b/resources/js/helpers/itemHelpers.js
@@ -65,7 +65,8 @@ const itemHelpers = {
                 store.dispatch('downloadZip')
             }
         }
-        ;(Vue.prototype.$dissolveTeamFolder = function (folder) {
+
+        Vue.prototype.$dissolveTeamFolder = function (folder) {
             events.$emit('confirm:open', {
                 title: i18n.t('Are you sure you want to dissolve this team?'),
                 message: i18n.t('All team members will lose access to your files and existing folder will be moved into your "Files" section.'),
@@ -74,27 +75,29 @@ const itemHelpers = {
                     operation: 'dissolve-team-folder',
                 },
             })
-        }),
-            (Vue.prototype.$detachMeFromTeamFolder = function (folder) {
-                events.$emit('confirm:open', {
-                    title: i18n.t('Are you sure you want to leave this team folder?'),
-                    message: i18n.t("You will don't have access to the files and all your previously uploaded content will be part of this Team Folder you are leaving."),
-                    action: {
-                        id: folder.data.id,
-                        operation: 'leave-team-folder',
-                    },
-                })
-            }),
-            (Vue.prototype.$createTeamFolder = function () {
-                // Show alert message when create folder is disabled
-                if (!store.getters.user.data.meta.restrictions.canCreateTeamFolder) {
-                    Vue.prototype.$temporarilyDisabledFolderCreate()
+        }
 
-                    return
-                }
-
-                events.$emit('popup:open', { name: 'create-team-folder' })
+        Vue.prototype.$detachMeFromTeamFolder = function (folder) {
+            events.$emit('confirm:open', {
+                title: i18n.t('Are you sure you want to leave this team folder?'),
+                message: i18n.t("You will don't have access to the files and all your previously uploaded content will be part of this Team Folder you are leaving."),
+                action: {
+                    id: folder.data.id,
+                    operation: 'leave-team-folder',
+                },
             })
+        }
+
+        Vue.prototype.$createTeamFolder = function () {
+            // Show alert message when create folder is disabled
+            if (!store.getters.user.data.meta.restrictions.canCreateTeamFolder) {
+                Vue.prototype.$temporarilyDisabledFolderCreate()
+
+                return
+            }
+
+            events.$emit('popup:open', { name: 'create-team-folder' })
+        }
 
         Vue.prototype.$convertAsTeamFolder = function (entry) {
             events.$emit('popup:open', {
diff --git a/resources/js/views/FileView/Files.vue b/resources/js/views/FileView/Files.vue
index 71cf35d7..f7a306b8 100644
--- a/resources/js/views/FileView/Files.vue
+++ b/resources/js/views/FileView/Files.vue
@@ -8,7 +8,6 @@
                     icon="favourites"
                 />
             </OptionGroup>
-
             <OptionGroup v-if="item">
                 <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
                 <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
@@ -25,11 +24,11 @@
         </MobileContextMenu>
 
         <MobileCreateMenu>
-            <OptionGroup>
+            <OptionGroup :title="$t('Upload')">
                 <OptionUpload :class="{ 'is-inactive': !hasCapacity }" :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
                 <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
             </OptionGroup>
-            <OptionGroup>
+            <OptionGroup :title="$t('Create')">
                 <Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
                 <Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
             </OptionGroup>
diff --git a/resources/js/views/FileView/SharedWithMe.vue b/resources/js/views/FileView/SharedWithMe.vue
index 234f218f..78a12f54 100644
--- a/resources/js/views/FileView/SharedWithMe.vue
+++ b/resources/js/views/FileView/SharedWithMe.vue
@@ -12,11 +12,11 @@
         </MobileContextMenu>
 
         <MobileCreateMenu>
-            <OptionGroup>
+            <OptionGroup :title="$t('Upload')">
                 <OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
                 <OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
             </OptionGroup>
-            <OptionGroup>
+            <OptionGroup :title="$t('Create')">
                 <Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
             </OptionGroup>
         </MobileCreateMenu>
diff --git a/resources/js/views/FileView/TeamFolders.vue b/resources/js/views/FileView/TeamFolders.vue
index 000ccfe2..733abc6e 100644
--- a/resources/js/views/FileView/TeamFolders.vue
+++ b/resources/js/views/FileView/TeamFolders.vue
@@ -25,11 +25,11 @@
         </MobileContextMenu>
 
         <MobileCreateMenu>
-            <OptionGroup>
+            <OptionGroup :title="$t('Upload')">
                 <OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
                 <OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
             </OptionGroup>
-            <OptionGroup>
+            <OptionGroup :title="$t('Create')">
                 <Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
                 <Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
             </OptionGroup>