写一个侧边栏在上方的vue组将

好的，以下是一个侧边栏在上方的 Vue 组件示例：

<template>
  <div class="sidebar-top">
    <!-- 侧边栏内容 -->
    <div class="sidebar">
      <ul>
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
      </ul>
    </div>
    <!-- 主体内容 -->
    <div class="main">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "SidebarTop",
}
</script>

<style scoped>
.sidebar-top {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.sidebar {
  background-color: #eee;
  height: 50px;
  padding: 10px;
}

.main {
  flex: 1;
  padding: 10px;
}
</style>

在上方的侧边栏组件中，我们使用了 flex 布局来实现上下两个部分的布局。侧边栏和主体内容都是通过 div 元素实现的，并使用了 slot 插槽来动态显示主体内容。组件的样式使用了 scoped 属性限定作用域，避免与其他组件样式冲突。

你可以在该组件的基础上进行修改和扩展，例如添加更多的菜单项、设置菜单项点击事件等等。