修正sidebar顯示

Author: alyciaciou

src/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-aside class="md:flex bg-gray-800 text-white w-40 flex flex-col"  :class="{ 'hidden': sidebarOpen}">
+    <el-aside class="md:flex bg-gray-800 text-white w-40 flex flex-col">
         <div class="p-4 text-xl font-bold">使用者</div>
         <el-menu
           default-active="1"
@@ -19,10 +19,6 @@
 
 <script setup>
     defineProps({
-        sidebarOpen: {
-            type: Boolean,
-            default: true
-        },
         sidebarList: {
             type: Array,
             default: () => []

src/views/HomeView.vue

@@ -1,11 +1,11 @@
 <template>
     <main>
-      <el-container class="h-screen">
-        <Sidebar :sidebarOpen="sidebarOpen" @singOut="singOut" :sidebarList="sidebarList" @getTableData="getTableData"/>
+      <el-container class="h-screen relative">
+        <Sidebar :class="{ 'hidden': sidebarOpen, 'z-50 fixed inset-y-0 left-0': !sidebarOpen}" @singOut="singOut" :sidebarList="sidebarList" @getTableData="getTableData"/>
         <el-container>
-          <el-header class="bg-white border-b flex items-center justify-between md:justify-end">
-            <el-icon  @click="toggleSidebar" class="text-black block md:hidden cursor-pointer"><Menu /></el-icon>
-            <el-button type="primary" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">新增</el-button>
+          <el-header class="bg-white border-b flex items-center justify-between md:justify-end" >
+            <el-icon   @click="toggleSidebar" class="text-black block md:hidden cursor-pointer" :class="{'fixed left-32 z-50 text-white': !sidebarOpen}"><Menu /></el-icon>
+            <el-button type="primary" :class="{'fixed right-5' : !sidebarOpen}" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">新增</el-button>
           </el-header>
 
           <Table :tableData="tableData" :tableHeader="tableHeader" @openModal="openModal" :tableTitle="tableTitle"/>
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-  import { ref, nextTick, onBeforeMount } from 'vue'
+  import { ref, onBeforeMount } from 'vue'
   import { useRouter } from 'vue-router'
   import { Menu } from '@element-plus/icons-vue'
   import { ElMessage } from 'element-plus'
@@ -32,7 +32,6 @@
   const sidebarOpen = ref(true)
   const toggleSidebar = async () => {
     sidebarOpen.value = !sidebarOpen.value
-    // await nextTick()
   }
 
   const sidebarList = ref([])