feat: add resizable sidebar with splitter layout

src/views/Settings/Settings.vue

@@ -586,19 +586,6 @@
                             </el-option-group>
                         </el-select>
                     </div>
-                    <div class="options-container-item">
-                        <span class="name" style="vertical-align: top; padding-top: 10px">{{
-                            t('view.settings.appearance.side_panel.width')
-                        }}</span>
-                        <el-slider
-                            :model-value="asideWidth"
-                            :show-tooltip="false"
-                            :marks="{ 300: '' }"
-                            :min="200"
-                            :max="500"
-                            style="display: inline-block; width: 300px; padding-top: 16px"
-                            @input="setAsideWidth"></el-slider>
-                    </div>
                     <simple-switch
                         :label="t('view.settings.appearance.side_panel.group_by_instance')"
                         :value="isSidebarGroupByInstance"
@@ -2075,7 +2062,6 @@
         setSidebarSortMethod1,
         setSidebarSortMethod2,
         setSidebarSortMethod3,
-        setAsideWidth,
         setIsSidebarGroupByInstance,
         setIsHideFriendsInSameInstance,
         setIsSidebarDivideByFriendGroup,

src/views/Sidebar/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="isSideBarTabShow" id="aside" class="x-aside-container" :style="{ width: `${asideWidth}px` }">
+    <div class="x-aside-container">
         <div style="display: flex; align-items: baseline">
             <el-select
                 clearable
@@ -81,31 +81,18 @@
 <script setup>
     import { Refresh, Compass } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
-    import { computed } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { userImage } from '../../shared/utils';
-    import {
-        useAppearanceSettingsStore,
-        useFriendStore,
-        useGroupStore,
-        useSearchStore,
-        useUiStore
-    } from '../../stores';
+    import { useFriendStore, useGroupStore, useSearchStore } from '../../stores';
     import FriendsSidebar from './components/FriendsSidebar.vue';
     import GroupsSidebar from './components/GroupsSidebar.vue';
 
     const { friends, isRefreshFriendsLoading, onlineFriendCount } = storeToRefs(useFriendStore());
     const { refreshFriendsList, confirmDeleteFriend } = useFriendStore();
-    const { asideWidth } = storeToRefs(useAppearanceSettingsStore());
-    const { menuActiveIndex } = storeToRefs(useUiStore());
     const { quickSearchRemoteMethod, quickSearchChange, directAccessPaste } = useSearchStore();
     const { quickSearchItems } = storeToRefs(useSearchStore());
     const { inGameGroupOrder, groupInstances } = storeToRefs(useGroupStore());
     const { t } = useI18n();
-
-    const isSideBarTabShow = computed(() => {
-        return !(menuActiveIndex.value === 'friendList' || menuActiveIndex.value === 'charts');
-    });
 </script>
 
 <style scoped>