Element: Layout

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <div>
    <div class="app-header">
      <el-menu theme="dark" :router="true" mode="horizontal">
        <span class="header-title">Rabbit Tech</span>
      </el-menu>
    </div>

    <div class="app-body">
      <div class="app-nav-menu">
        <el-menu default-active="0" :router="true">

          <el-menu-item index="0" :route="{name:'home'}">
            <i class="el-icon-message"></i>Home
          </el-menu-item>
          <el-menu-item index="1" :route="{path:'/order'}">
            <i class="el-icon-message"></i>Invoice
          </el-menu-item>
          <el-menu-item index="2" :route="{path:'/bill'}">
            <i class="el-icon-message"></i>Bill
          </el-menu-item>
          <el-menu-item index="3" :route="{path:'/post'}">
            <i class="el-icon-message"></i>Post
          </el-menu-item>
        </el-menu>
      </div>

      <div class="app-content">
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
				<h3>Hi</h3>
      </div>
    </div>

  </div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

    .app-header {
        background-color: #324157;
        padding: 0 20px 0 20px;
        border-radius: 0px;
    }

    .header-title {
        font-size: 24px;
        color: white;
        margin-right: 20px;
        line-height: 54px;
        float: left;
    }

    .app-body {
        margin-top: 60px;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }

    .app-nav-menu {
        position: absolute;
        width: 235px;
        left: 0px;
        top: 0px;
        bottom: 0px;
        background-color: #eef1f6;
        height: -webkit-calc(100vh - 60px);
    }

    .app-content {
        position: absolute;
        left: 235px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        padding: 0 20px 0 20px;
        background-color: white;
        height: -webkit-calc(100vh - 60px);
    }

Babel + JSX

var Main = {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')