侧边导航栏缩进vue代码

你可以使用Vue的`v-bind`和`v-on`指令来实现侧边导航栏的缩进效果。首先，你需要在Vue组件的`data`中定义一个变量来控制导航栏的缩进状态，例如命名为`isCollapsed`。然后，你可以在模板中使用条件渲染来根据`isCollapsed`的值来决定导航栏的样式。

下面是一个简单的示例代码：

<template>
  <div>
    <button @click="toggleCollapse">Toggle Collapse</button>
    <div :class="{ 'collapsed': isCollapsed }" class="sidebar">
      <!-- 导航栏内容 -->
    </div>
    <div class="main-content">
      <!-- 主要内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    }
  }
};
</script>

<style>
.sidebar {
  width: 200px;
  transition: width 0.3s;
}

.collapsed {
  width: 50px;
}
</style>

在上面的示例中，点击"Toggle Collapse"按钮会调用`toggleCollapse`方法，该方法会切换`isCollapsed`的值。当`isCollapsed`为`true`时，导航栏会应用`.collapsed`样式类，宽度会变为50px。

你可以根据实际情况修改上述代码以适应你的项目需求。