用vue3写一个侧边悬浮导航栏

好的，下面是一个简单的侧边悬浮导航栏的 Vue 3 组件的示例代码：

<template>
  <div class="sidebar">
    <div class="sidebar-toggle" @click="toggleSidebar">
      <i class="fa fa-bars"></i>
    </div>
    <div class="sidebar-items" :class="{ active: isOpen }">
      <div class="sidebar-item" v-for="(item, index) in items" :key="index">
        <router-link :to="item.route" @click="closeSidebar">
          {{ item.label }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Sidebar",
  data() {
    return {
      isOpen: false,
      items: [
        { label: "Home", route: "/" },
        { label: "About", route: "/about" },
        { label: "Contact", route: "/contact" },
      ],
    };
  },
  methods: {
    toggleSidebar() {
      this.isOpen = !this.isOpen;
    },
    closeSidebar() {
      this.isOpen = false;
    },
  },
};
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background-color: #f1f1f1;
  overflow: hidden;
}
.sidebar-toggle {
  position: absolute;
  top: 10px;
  right: -40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.sidebar-items {
  padding-top: 60px;
  transition: transform 0.3s ease-in-out;
  transform: translateX(-200px);
}
.sidebar-items.active {
  transform: translateX(0);
}
.sidebar-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.sidebar-item:last-child {
  border-bottom: none;
}
.sidebar-item a {
  color: #333;
  text-decoration: none;
}
.sidebar-item a:hover {
  color: #000;
}
</style>

这个组件包含一个侧边悬浮导航栏，可以通过点击一个按钮来打开/关闭它。导航栏的项是通过 `items` 数组传递给组件的，每一项是一个包含 `label` 和 `route` 属性的对象。在组件中，我们使用 `v-for` 指令来遍历所有项，并使用 `router-link` 组件来渲染每个链接。你可以根据你的需求进行修改和定制。