ui: collapsible side pannel

package.json

@@ -23,6 +23,7 @@
     "debug": "^4.3.4",
     "electron-store": "^8.1.0",
     "highlight.js": "^11.8.0",
+    "mitt": "^3.0.1",
     "monaco-editor": "^0.41.0",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",

src/layout/components/the-aside.vue

@@ -24,28 +24,30 @@
 <script setup lang="ts">
 import { DataBase, Folders, LogoGithub, Settings, UserAvatar } from '@vicons/carbon';
 import { useLang } from './../../lang';
+import { useBus } from './../../utils';
 import theAsideIcon from './the-aside-icon.vue';
 const lang = useLang();
 const router = useRouter();
+const route = useRoute();
 
 const mainNavList = ref([
   {
     id: 'connect',
-    path: '/',
+    path: '/connect',
     name: lang.t('aside.connect'),
     icon: markRaw(DataBase),
     isLink: false,
   },
   {
     id: 'file',
-    path: '/',
+    path: '/connect',
     name: lang.t('aside.file'),
     icon: markRaw(Folders),
     isLink: false,
   },
   {
     id: 'github',
-    path: '/',
+    path: '/connect',
     name: lang.t('aside.github'),
     icon: markRaw(LogoGithub),
     isLink: true,
@@ -81,9 +83,13 @@ const navClick = (item: RouteItem) => {
   if (item.isLink && item.id === 'github') {
     window.electronAPI.openGitHub();
   } else {
-    router.push({
-      path: item.path,
-    });
+    if (route.path === item.path) {
+      useBus.emit('pannel-change');
+    } else {
+      router.push({
+        path: item.path,
+      });
+    }
   }
 };
 </script>

src/router/index.ts

@@ -33,5 +33,4 @@ const router = createRouter({
     },
   ],
 });
-
 export default router;

src/utils/index.ts

@@ -1 +1,2 @@
-export * from './debounce-throttle';
+export * from './debounceThrottle';
+export * from './mittBus';

src/utils/mittBus.ts

@@ -0,0 +1,2 @@
+import mitt from 'mitt';
+export const useBus = mitt();

src/views/connect/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="connect-container">
-    <div class="connect-list" v-if="false">
+    <div class="connect-list" v-if="isPannelOpen">
       <div class="add-connect" @click="addConnect">
         <n-icon size="28">
           <Add />
@@ -18,19 +18,25 @@
 
 <script setup lang="ts">
 import { Add } from '@vicons/carbon';
-
 import ConnectModal from './components/connect-dialog.vue';
 import connectList from './components/connect-list.vue';
 import Editor from '../editor/index.vue';
-const router = useRouter();
-
+import { useBus } from './../../utils';
 // DOM
 const connectModalRef = ref();
 
+const isPannelOpen = ref(true);
+
 onMounted(() => {
-  
-})
+  useBus.on('pannel-change', pannelHandler);
+});
+onUnmounted(() => {
+  useBus.off('pannel-change');
+});
 
+const pannelHandler = () => {
+  isPannelOpen.value = !isPannelOpen.value;
+};
 const addConnect = () => connectModalRef.value.showMedal();
 
 const editConnectHandler = (row: object) => {