### 基础

```vue
<template>
  <ElContainer class="page-demo et-box-shadow-light">
    <ElAside :class="{'hide': collapse}">
      <ElMenu
        :collapse="collapse"
        default-active="2"
        :background-color="styles.menuBgColor"
        :text-color="styles.menuTextColor"
        :active-text-color="styles.menuActiveTextColor"
        :collapse-transition="false"
        style="height: 100%">
        <ElSubmenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <ElMenuItemGroup>
            <template slot="title">分组一</template>
            <ElMenuItem index="1-1">选项1</ElMenuItem>
            <ElMenuItem index="1-2">选项2</ElMenuItem>
          </ElMenuItemGroup>
          <ElMenuItemGroup title="分组2">
            <ElMenuItem index="1-3">选项3</ElMenuItem>
          </ElMenuItemGroup>
          <ElSubmenu index="1-4">
            <template slot="title">选项4</template>
            <ElMenuItem index="1-4-1">选项1</ElMenuItem>
          </ElSubmenu>
        </ElSubmenu>
        <ElMenuItem index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </ElMenuItem>
        <ElMenuItem index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </ElMenuItem>
        <ElMenuItem index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </ElMenuItem>
      </ElMenu>
    </ElAside>
    <ElContainer direction="vertical">
      <ElHeader>
        <i class="el-icon-s-fold" @click="toggleCollapse"></i>
      </ElHeader>
      <ElMain></ElMain>
    </ElContainer>
  </ElContainer>
</template>

<script>
import styles from '../packages/theme-default/src/theme.scss'
import { Container, Aside, Header, Main, Footer, Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui'

export default {
  components: {
    ElContainer: Container,
    ElAside: Aside,
    ElHeader: Header,
    ElMain: Main,
    ElFooter: Footer,

    ElMenu: Menu,
    ElSubmenu: Submenu,
    ElMenuItem: MenuItem,
    ElMenuItemGroup: MenuItemGroup,
  },

  data() {
    return {
      collapse: false,
      styles,
    }
  },

  methods: {
    toggleCollapse() {
      this.collapse = !this.collapse
    }
  }
}
</script>

<style>
.page-demo {
  height: 600px;
}

.el-header {
  display: flex;
  align-items: center;
  background-color: #fff;
  text-align: left;
}

.el-aside {
  width: 240px !important;
  background-color: #041527;
  text-align: left;
  transition: width .28s;
}

.el-aside.hide {
  width: 64px !important;
}

.el-main {
  background-color: #f0f5fa;
  text-align: center;
}

.el-menu {
  border: none;
  transition: width .28s;
}

.el-menu-item.is-active {
  background-color: #409eff !important;
}
</style>
```