custom color theme part 2

resources/js/components/FilesView/FileItemGrid.vue

@@ -26,7 +26,7 @@
                 <img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name" />
 
                 <!--Else show only folder icon-->
-                <FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder" />
+                <FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder svg-color-theme" />
             </div>
 
             <!--Name-->
@@ -40,12 +40,12 @@
 
                     <!--Shared Icon-->
                     <div v-if="$checkPermission('master') && item.shared" class="item-shared">
-                        <link-icon size="12" class="shared-icon"></link-icon>
+                        <link-icon size="12" class="shared-icon text-theme" />
                     </div>
 
                     <!--Participant owner Icon-->
                     <div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
-                        <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
+                        <user-plus-icon size="12" class="shared-icon text-theme" />
                     </div>
 
                     <!--Filesize-->

resources/js/components/FilesView/Option.vue

@@ -1,20 +1,23 @@
 <template>
-    <li class="menu-option" :class="[icon === 'trash' ? 'danger' : '']">
-        <div class="icon">
-            <trash-2-icon v-if="icon === 'trash'" size="17"></trash-2-icon>
-            <life-buoy-icon v-if="icon === 'restore'" size="17"></life-buoy-icon>
-            <trash-icon v-if="icon === 'empty-trash'" size="17"></trash-icon>
-            <eye-icon v-if="icon ==='detail'" size="17"></eye-icon>
-            <download-cloud-icon v-if="icon === 'download'" size="17"></download-cloud-icon>
-            <edit2-icon v-if="icon === 'rename'" size="17"></edit2-icon>
-            <corner-down-right-icon v-if="icon === 'move-item'" size="17"></corner-down-right-icon>
-            <link-icon v-if="icon === 'share'" size="17"></link-icon>
-            <star-icon v-if="icon === 'favourites'" size="17"></star-icon>
-            <folder-plus-icon v-if="icon === 'create-folder'" size="17"></folder-plus-icon>
-            <smile-icon v-if="icon === 'no-options'" size="17"></smile-icon>
-            <paperclip-icon v-if="icon === 'zip-folder'" size="17"></paperclip-icon> 
+    <li class="menu-option group">
+        <div class="icon group-hover-text-theme">
+            <calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme"/>
+            <grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme"/>
+            <list-icon v-if="icon === 'list'" size="17" class="group-hover-text-theme"/>
+            <trash-2-icon v-if="icon === 'trash'" size="17" class="group-hover-text-theme"/>
+            <life-buoy-icon v-if="icon === 'restore'" size="17" class="group-hover-text-theme"/>
+            <trash-icon v-if="icon === 'empty-trash'" size="17" class="group-hover-text-theme"/>
+            <eye-icon v-if="icon ==='detail'" size="17" class="group-hover-text-theme"/>
+            <download-cloud-icon v-if="icon === 'download'" size="17" class="group-hover-text-theme"/>
+            <edit2-icon v-if="icon === 'rename'" size="17" class="group-hover-text-theme"/>
+            <corner-down-right-icon v-if="icon === 'move-item'" size="17" class="group-hover-text-theme"/>
+            <link-icon v-if="icon === 'share'" size="17" class="group-hover-text-theme"/>
+            <star-icon v-if="icon === 'favourites'" size="17" class="group-hover-text-theme"/>
+            <folder-plus-icon v-if="icon === 'create-folder'" size="17" class="group-hover-text-theme"/>
+            <smile-icon v-if="icon === 'no-options'" size="17" class="group-hover-text-theme"/>
+            <paperclip-icon v-if="icon === 'zip-folder'" size="17" class="group-hover-text-theme"/>
         </div>
-        <div class="text-label">
+        <div class="text-label group-hover-text-theme">
             {{ title }}
         </div>
     </li>
@@ -60,22 +63,6 @@ import {
 @import "@assets/vuefilemanager/_variables";
 @import "@assets/vuefilemanager/_mixins";
 
-.danger {
-    .text-label {
-        color: $danger !important;
-    }
-    .icon {
-        path,
-        line,
-        polyline,
-        rect,
-        circle,
-        polygon {
-            stroke: $danger !important;
-        }
-    }
-}
-
 .menu-option {
     white-space: nowrap;
     font-weight: 700;
@@ -90,6 +77,15 @@ import {
     .icon {
         margin-right: 20px;
         line-height: 0;
+
+        path,
+        line,
+        polyline,
+        rect,
+        circle,
+        polygon {
+            color: inherit;
+        }
     }
 
     .text-label {
@@ -98,19 +94,6 @@ import {
 
     &:hover {
         background: $light_background;
-
-        .text-label {
-            color: $theme;
-        }
-
-        path,
-        line,
-        polyline,
-        rect,
-        circle,
-        polygon {
-            stroke: $theme;
-        }
     }
 }
 @media (prefers-color-scheme: dark) {

resources/js/components/FilesView/OptionGroup.vue

@@ -15,19 +15,19 @@
 @import "@assets/vuefilemanager/_mixins";
 
 .menu-option-group {
-        padding: 5px 0;
-        border-bottom: 1px solid $light_mode_border;
+    padding: 5px 0;
+    border-bottom: 1px solid $light_mode_border;
 
-        &:first-child {
-            padding-top: 0;
-        }
-
-        &:last-child {
-            padding-bottom: 0;
-            border-bottom: none;
-        }
+    &:first-child {
+        padding-top: 0;
     }
 
+    &:last-child {
+        padding-bottom: 0;
+        border-bottom: none;
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     .menu-option-group {
         border-color: $dark_mode_border_color;

resources/js/components/FilesView/SearchBar.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="search-bar">
         <div class="icon" v-if="!isQuery">
-            <search-icon size="19"></search-icon>
+            <search-icon size="19" />
         </div>
         <div class="icon" v-if="isQuery" @click="resetQuery">
-            <x-icon class="pointer" size="19"></x-icon>
+            <x-icon class="pointer" size="19" />
         </div>
         <input
                 v-model="query"
-                class="query"
+                class="query focus-border-theme"
                 type="text"
                 name="query"
                 :placeholder="$t('inputs.placeholder_search_files')"
@@ -99,8 +99,7 @@
             }
 
             &:focus {
-                border: 1px solid $theme;
-                box-shadow: 0 0 7px rgba($theme, 0.3);
+                //box-shadow: 0 0 7px rgba($theme, 0.3);
             }
 
             &:focus + .icon {

resources/js/components/FilesView/SortingAndPreviewMenu.vue

@@ -1,6 +1,15 @@
 <template>
     <div class="menu-options" id="menu-list">
-        <ul class="menu-option-group">
+        <OptionGroup class="menu-option-group">
+            <Option v-if="isList" @click="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
+            <Option v-if="isGrid" @click="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
+        </OptionGroup>
+        <OptionGroup class="menu-option-group">
+            <Option @click.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
+            <Option @click.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
+        </OptionGroup>
+
+        <ul v-if="false" class="menu-option-group">
             <li v-if="isList" class="menu-option" @click="changePreview('grid')">
                 <div class="icon">
                     <grid-icon size="17"/>
@@ -18,7 +27,7 @@
                 </div>
             </li>
         </ul>
-        <ul class="menu-option-group">
+        <ul v-if="false" class="menu-option-group">
             <li class="menu-option" @click.stop="sort('created_at')">
                 <div class="icon">
                     <calendar-icon size="17"/>
@@ -47,6 +56,8 @@
 
 <script>
 
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import Option from '@/components/FilesView/Option'
 import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
 import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
 import { mapGetters } from 'vuex'
@@ -55,6 +66,8 @@ import { events } from '@/bus'
 export default {
     name: 'SortingAndPreviewMenu',
     components: {
+        OptionGroup,
+        Option,
         CalendarIcon,
         AlphabetIcon,
         ArrowUpIcon,

resources/js/components/FilesView/Spinner.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="loading-bar-spinner" class="spinner">
-        <div class="spinner-icon"></div>
+        <div class="spinner-icon border-top-theme border-left-theme"></div>
     </div>
 </template>
 
@@ -28,8 +28,8 @@
         width: 40px;
         height: 40px;
         border: solid 4px transparent;
-        border-top-color: $theme !important;
-        border-left-color: $theme !important;
+        //border-top-color: $theme !important;
+        //border-left-color: $theme !important;
         border-radius: 50%;
     }
 

resources/js/components/Others/ActionButton.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="action-button">
-        <x-icon size="12" class="icon" v-if="icon === 'x'"></x-icon>
-        <edit-2-icon size="12" class="icon" v-if="icon === 'pencil-alt'"></edit-2-icon>
+        <x-icon size="12" class="icon text-theme" v-if="icon === 'x'" />
+        <edit-2-icon size="12" class="icon text-theme" v-if="icon === 'pencil-alt'" />
         <span class="label">
             <slot></slot>
         </span>
@@ -40,7 +40,7 @@
             margin-right: 2px;
 
             path, circle, line {
-                stroke: $theme;
+                color: inherit;
             }
         }
     }

resources/js/components/Others/EmojiPicker.vue

@@ -3,7 +3,7 @@
         <label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
 
         <!-- Selected Emoji input -->
-        <div @click.stop="openList" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
+        <div @click.stop="openList" class="select-input-wrapper focus-border-theme" :class="{'active-menu' : selectOpen}">
 
             <!-- If is emoji selected -->
             <div class="select-input" v-if="selectedEmoji && selectedEmoji !== 'default'">
@@ -266,7 +266,6 @@ export default {
     .emoji-input {
         width: 100%;
         border-radius: 8px;
-        padding: 4px;
         margin-bottom: 20px;
         background: $light_background;
         border: none;
@@ -354,8 +353,7 @@ export default {
     }
 
     &.active-menu {
-        border-color: $theme;
-        box-shadow: 0 0 7px rgba($theme, 0.3);
+        //box-shadow: 0 0 7px rgba($theme, 0.3);
 
         .row-icon {
             transform: rotate(180deg);

resources/js/components/Others/Forms/ImageInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="dropzone" :class="{ 'is-error': error }">
         <div v-if="imagePreview" @click="resetImage" class="reset-image">
-            <x-icon size="14" class="close-icon"></x-icon>
+            <x-icon size="14" class="close-icon text-theme" />
         </div>
 
         <input
@@ -18,7 +18,7 @@
         />
 
         <div class="dropzone-message" v-show="! isData">
-            <image-icon size="28" class="icon-upload"></image-icon>
+            <image-icon size="28" class="icon-upload text-theme"></image-icon>
             <span class="dropzone-title">
                 {{ $t('input_image.title') }}
             </span>
@@ -146,7 +146,7 @@
 
             .icon-upload {
                 rect, circle, polyline {
-                    stroke: $theme
+                    color: inherit
                 }
             }
 
@@ -195,7 +195,7 @@
 
                 .icon-upload {
                     path, polyline, line {
-                        stroke: $theme;
+                        color: inherit;
                     }
                 }
 

resources/js/components/Others/Forms/MultiEmailInput.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="wrapper">
         <label class="input-label">{{ label }}:</label>
-        <div class="input-wrapper" :class="{'is-error' : isError}" @click="$refs.input.focus()">
+        <div class="input-wrapper focus-within-border-theme" :class="{'is-error' : isError}" @click="$refs.input.focus()">
             <div class="email-list">
-                <div class="email-tag" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
-                    <span>{{ email }}</span>
+                <div class="email-tag bg-theme-100" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
+                    <span class="text-theme">{{ email }}</span>
                     <x-icon @click="removeEmail(email)" class="icon" size="14"/>
                 </div>
                 <input @keydown.delete=removeLastEmail($event) @keyup="handleEmail()" v-model="email" :size="inputSize" class="email-input" :placeholder="placeHolder" autocomplete="new-password" ref="input"/>
@@ -123,8 +123,8 @@ export default {
     }
 
     &:focus-within {
-        border: 1px solid $theme;
-        box-shadow: 0 1px 5px rgba($theme, 0.3);
+        //border: 1px solid $theme;
+        //box-shadow: 0 1px 5px rgba($theme, 0.3);
     }
 
     .email-list {
@@ -140,7 +140,6 @@ export default {
         white-space: nowrap;
         display: flex;
         padding: 5px 10px;
-        background: rgba($theme, .1);
         border-radius: 8px;
         margin-right: 5px;
         align-items: center;
@@ -151,7 +150,6 @@ export default {
         }
 
         span {
-            color: $theme;
             font-weight: 700;
             @include font-size(14);
         }

resources/js/components/Others/Forms/SelectBoxInput.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="select-box">
-        <div class="box-item"
-             :class="{'selected': item.value === input}"
+        <div class="box-item active-bg-theme-100 active-border-theme"
+             :class="{'active': item.value === input}"
              @click="getSelectedValue(item)"
              v-for="(item, i) in data" :key="i"
         >
-            <span class="box-value">{{ item.label }}</span>
+            <span class="box-value active-text-theme">{{ item.label }}</span>
         </div>
     </div>
 </template>
@@ -67,15 +67,6 @@
             .box-value {
                 @include font-size(15);
             }
-
-            &.selected {
-                background: rgba($theme, .1);
-                border-color: $theme;
-
-                .box-value {
-                    color: $theme;
-                }
-            }
         }
     }
 

resources/js/components/Others/Popup/PopupHeader.vue

@@ -1,14 +1,13 @@
 <template>
     <div class="popup-header">
         <div class="icon">
-            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon"></corner-down-right-icon>
-            <share-icon v-if="icon === 'share'" size="17" class="title-icon"></share-icon>
-            <!-- <link-icon v-if="icon === 'share'" size="17" class="title-icon"></link-icon> -->
-            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon"></edit2-icon>
+            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme" />
+            <share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme" />
+            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme" />
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
-            <x-icon @click="closePopup" size="22" class="close-icon"></x-icon>
+            <x-icon @click="closePopup" size="22" class="close-icon" />
         </div>
     </div>
 </template>
@@ -51,7 +50,7 @@
             line-height: 0;
 
             path, line, polyline, rect, circle {
-                stroke: $theme;
+                color: inherit;
             }
         }
 

resources/js/components/Others/RenameItem.vue

@@ -16,7 +16,7 @@
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('popup_rename.label') }}:</label>
                     <div class="input">
-                        <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
+                        <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme" :placeholder="$t('popup_rename.placeholder')">
                         <div @click="pickedItem.name = ''" class="close-icon-wrapper">
                             <x-icon class="close-icon" size="14" />
                         </div>
@@ -26,7 +26,9 @@
 
                 <SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" />
 
-                <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
+                <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">
+                    {{ moreOptionsTitle }}
+                </ActionButton>
             </ValidationObserver>
         </PopupContent>
 

resources/js/components/Others/ShareCreate.vue

@@ -9,7 +9,7 @@
             <!--Item Thumbnail-->
             <ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata" />
 
-            <!-- Infobox for successfull sended email -->
+            <!-- Infobox for successful send email -->
             <InfoBox v-if="isGeneratedShared && sharedViaEmail" class="info-box-wrapper">
                 <p v-html="$t('shared_form.email_successfully_send_message')"></p>
             </InfoBox>
@@ -31,7 +31,7 @@
 
                 </TabWrapper>
 
-                <!--Permision Select-->
+                <!--Permission Select-->
                 <ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
                     <SelectInput v-model="shareOptions.permission" :options="permissionOptions" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]" />
@@ -48,7 +48,7 @@
 
                 <!--Set password-->
                 <ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
-                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
@@ -62,7 +62,9 @@
                     </div>
                 </div>
 
-                <ActionButton @click.native="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
+                <ActionButton @click.native="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">
+                    {{ moreOptionsTitle }}
+                </ActionButton>
             </ValidationObserver>
 
             <!--Copy generated link-->
@@ -76,9 +78,11 @@
 
         <!--Actions-->
         <PopupActions>
-            <ButtonBase v-if="! isGeneratedShared" class="popup-button" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }}
+            <ButtonBase v-if="! isGeneratedShared" class="popup-button" @click.native="$closePopup()" button-style="secondary">
+                {{ $t('popup_move_item.cancel') }}
             </ButtonBase>
-            <ButtonBase class="popup-button" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">{{ submitButtonText }}
+            <ButtonBase class="popup-button" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">
+                {{ submitButtonText }}
             </ButtonBase>
         </PopupActions>
     </PopupWrapper>

resources/js/components/Others/ShareEdit.vue

@@ -50,7 +50,7 @@
 
                 <!--Set password-->
                 <ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
-                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 

resources/js/components/Others/TabWrapper.vue

@@ -4,13 +4,15 @@
             <div class="tab" :class="{ active: tab.isActive }" @click="selectTab(tab)" v-for="(tab, i) in tabs" :key="i">
 
                 <!--Icon-->
-                <mail-icon v-if="tab.icon === 'email'" class="tab-icon" size="17"/>
-                <link-icon v-if="tab.icon === 'link'" class="tab-icon" size="17"/>
-                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon" size="17"/>
-                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon" size="17"/>
+                <mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme" size="17"/>
+                <link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme" size="17"/>
+                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme" size="17"/>
+                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme" size="17"/>
 
                 <!--Title-->
-                <b class="tab-title">{{tab.title}}</b>
+                <b class="tab-title">
+                    {{tab.title}}
+                </b>
             </div>
         </div>
         <slot></slot>
@@ -94,7 +96,7 @@
             circle,
             line,
             polyline {
-                stroke: $theme !important;
+                color: inherit !important;
             }
         }
     }

resources/js/components/Others/ThumbnailItem.vue

@@ -14,7 +14,7 @@
             <img v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
 
             <!--Else show only folder icon-->
-            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder" />
+            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder svg-color-theme" />
         </div>
 
         <!--Name-->

resources/js/components/Others/TreeMenu.vue

@@ -2,10 +2,10 @@
     <!--Folder Icon-->
     <div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById.id === nodes.id || !disableId} ">
 
-        <div class="folder-item" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
+        <div class="folder-item text-theme" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
             <chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
-            <hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon"></hard-drive-icon>
-            <folder-icon v-if="nodes.location !== 'base'" size="17" class="icon"></folder-icon>
+            <hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon text-theme"></hard-drive-icon>
+            <folder-icon v-if="nodes.location !== 'base'" size="17" class="icon text-theme"></folder-icon>
             <span class="label">{{ nodes.name }}</span>
         </div>
 
@@ -150,12 +150,12 @@
 
             .icon {
                 path, line, polyline, rect, circle {
-                    stroke: $theme;
+                    color: inherit;
                 }
             }
 
             .label {
-                color: $theme;
+                color: inherit;
             }
         }
     }

resources/js/components/Others/TreeMenuNavigator.vue

@@ -15,8 +15,7 @@
                 <span class="label">{{ nodes.name }}</span>
             </div>
 
-            <TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders"
-                               :key="item.id"/>
+            <TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id"/>
         </div>
     </transition>
 </template>