<template>
  <el-row id="test-page-body">
    <el-col :span="3">
      <el-card style="position: fixed;">
        <el-menu  :default-active="activeIndex" router>
          <el-menu-item index="/portal">
            <el-icon>
              <Back/>
            </el-icon>
            <span style="padding-left: 20px">返回首页</span>
          </el-menu-item>
          <el-menu-item index="/communication/explore">
            <el-icon>
              <Search/>
            </el-icon>
            <span style="padding-left: 20px">发现交流</span>
          </el-menu-item>
          <el-menu-item index="/communication/publish">
            <el-icon>
              <Edit/>
            </el-icon>
            <span style="padding-left: 20px">发布交流</span>
          </el-menu-item>
          <el-menu-item index="/communication/star">
            <el-icon>
              <Star/>
            </el-icon>
            <span style="padding-left: 20px">我的收藏</span>
          </el-menu-item>
          <el-menu-item index="/communication/manage">
            <el-icon>
              <User/>
            </el-icon>
            <span style="padding-left: 20px">我的发布</span>
          </el-menu-item>
        </el-menu>
      </el-card>
    </el-col>
    <el-col :span="2"/>
    <el-col :span="18">
      <router-view/>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Communication",
  data(){
    return{
      activeIndex: this.$route.path,
    };
  },
  mounted() {
    // window.addEventListener("scroll", this.handleMenuScroll);
  },
  methods: {
    toPage(name) {
      this.$router.push({name});
    },
    // handleMenuScroll(e){
    //   const menu = document.getElementsByClassName("communication-page-menu")[0];
    //   menu.style.top = window.pageYOffset + "px";
    // }
  }
};
</script>

<style scoped>
#communication-page {
    display: flex;
    /*height: calc(100vh - 60px - 220px);*/
}

.communication-page-aside {
    flex-basis: 300px;
    position: relative;
}

.communication-page-menu {
    width: 100%;
    position: absolute;
}

.menu-button {
    display: block;
    width: 200px;
    margin: 15px auto auto;
}

#test-page-body {
  margin: 40px 60px 80px 0;
  min-height: calc(100vh - 340px);
  position: relative;
}

.test-page-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
</style>