Hide the sidebar in vue

For some system websites, we usually have a side navigation bar. In some scenarios, we need to hide it, so how to achieve it?

Here is a way of thinking:

We can hide and expand by clicking the small icon. The main principle is to use the leftWidth variable to dynamically set the css style

We found two small icons, corresponding to click to expand and click to hide.

Then dynamically set the css style for the left navigation bar and the right main interface (the initial leftWidth is 18, which is the width ratio of the left navigation bar)

<template>
  <div class="root">
    <div class="container">
      <img src="./assets/images/rightbar.png" alt="" title="点击展开" v-if="this.leftWidth<2" @click="openList" class="menu_Open">

      <!-- menu_list 列表 -->
      <div class="list" :style="{width: leftWidth + '%'}">
        <img src="./assets/images/leftbar.png" title="点击收起" alt="" class="menu_Close" @click="closeList">
        <div v-for="item in menu_list" :key="item.id">{
   
   {item.id}} - {
   
   {item.name}}</div>
      </div>

      <!-- main 页面 -->
      <div :style="{width: (100 - leftWidth) + '%'}" class="mainPage">
        <h1>This is the Main Page!</h1>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components:{

  },
  data(){
    return {
      leftWidth: 18,
      menu_list: [
        {
          id: 1,
          name: '列表1'
        },
        {
          id: 2,
          name: '列表2'
        },
        {
          id: 3,
          name: '列表3'
        },
      ]
    }
  },
  methods: {
    openList(){
      this.leftWidth = 18
      console.log('open',this.leftWidth);

    },
    closeList(){
      this.leftWidth = 0;
      console.log('close',this.leftWidth);
    }
  }
}
</script>

<style>
html,body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  background: gray;
}

.root {
  height: 100%;
}

.container {
  display: flex;
  position: relative;
  height: 100%;
  text-align: center;
}
/* 侧边导航栏 */
.list {
  border-right: 1px solid rgb(64, 85, 122);
  padding-top: 10px;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  overflow: hidden;
}
/* 关闭侧边栏 小图标 */
.menu_Close {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 10px;
  opacity: 0.7;
  cursor: pointer;
} 
/* 展开侧边栏 小图标 */
.menu_Open {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 10px;
  opacity: 0.7;
  cursor: pointer;
  z-index: 99999;
}
/* 右侧主要页面 */
.mainPage {
  padding: 10px;
}
</style>

You can also modify the parameters of each value to customize the layout. For example, the width of the left navigation bar after expansion and hiding can be set by leftWidth. The specific position of the small icon can be set by the values ​​​​of left and top.