dashboard.vue

<template>
  <div id="page-wrapper">
    <el-menu default-active="0" class="el-menu-vertical-demo" :collapse="isCollapse">
      <el-menu-item index="0">
        <i class="fas fa-home"></i>
        <span slot="title">Inicio</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="fas fa-truck"></i>
          <span slot="title">Compras</span>
        </template>
        <el-menu-item index="1-1">
          <i class="fas fa-cart-arrow-down"></i>
          Nueva Compra
        </el-menu-item>
        <el-menu-item index="1-2">
          <i class="fas fa-history"></i>
          Historial Compras
        </el-menu-item>
        <el-menu-item index="1-3">
          <i class="fas fa-boxes"></i>
          Bodegas
        </el-menu-item>
        <el-menu-item index="1-4">
          <i class="fas fa-cash-register"></i>
          Puntos de Ventas
        </el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="fas fa-address-book"></i>
          <span slot="title">Contactos</span>
        </template>
        <el-menu-item index="2-1">
          <i class="fas fa-address-card"></i>
          Clientes
        </el-menu-item>
        <el-menu-item index="2-2">
          <i class="fas fa-briefcase"></i>
          Proveedores
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="3">
        <i class="fas fa-box-open"></i>
        <span slot="title">Productos</span>
      </el-menu-item>
      <el-submenu index="4">
        <template slot="title">
          <i class="fas fa-file-invoice-dollar"></i>
          <span slot="title">Facturación</span>
        </template>
        <el-menu-item index="4-1">
          <i class="fas fa-cart-plus"></i>
          Nueva Venta
        </el-menu-item>
        <el-menu-item index="4-2">
          <i class="fas fa-history"></i>
          Historial de Facturas
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="5">
        <i class="fas fa-chart-bar"></i>
        <span slot="title">Reportes</span>
      </el-menu-item>
      <el-menu-item index="6">
        <i class="fas fa-users-cog"></i>
        <span slot="title">Acceso</span>
      </el-menu-item>
      <el-submenu index="7">
        <template slot="title">
          <i class="fas fa-wrench"></i>
          <span slot="title">Configuración</span>
        </template>
        <el-menu-item index="7-1">
          <i class="fas fa-file-pdf"></i>
          Plantillas
        </el-menu-item>
        <el-menu-item index="7-2">
          <i class="fas fa-dollar-sign"></i>
          Monedas
        </el-menu-item>
        <el-menu-item index="7-2">
          <i class="fas fa-hand-holding-usd"></i>
          Impuestos
        </el-menu-item>
      </el-submenu>
    </el-menu>

    <div id="content">
      <div id="navbar">
        <el-button
          class="bar-button"
          type="text"
          icon="fas fa-bars"
          @click="isCollapse = !isCollapse"
        ></el-button>

        <el-dropdown split-button type="primary" class="float-right">Administrador
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>Cambiar Contraseña</el-dropdown-item>
            <el-dropdown-item>Cerrar Sesión</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="main-content">
        <div class="card">
          <el-tabs type="card">
            <el-tab-pane label="User">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis aperiam vitae provident tempore ipsum exercitationem. Distinctio, vel pariatur. Fuga vitae perferendis quo iure rem blanditiis unde modi quas perspiciatis laboriosam.</p>
              <p>Eius aspernatur, tempora repudiandae assumenda explicabo ratione obcaecati excepturi, laboriosam quos neque saepe vel enim labore commodi quasi atque nulla veniam rem eveniet quas est sint totam? Eos, voluptates quibusdam.</p>
              <p>Maiores dolorum esse sequi, debitis est ex, iste repellendus quod consequatur modi sed nemo tempora aut? Cum, ea molestiae. Error sint consectetur neque porro eveniet molestias quaerat odit repellendus sunt?</p>
            </el-tab-pane>
            <el-tab-pane label="Config">Config</el-tab-pane>
            <el-tab-pane label="Role">Role</el-tab-pane>
            <el-tab-pane label="Task">Task</el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  }
};
</script>


<style>
#page-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.el-menu {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-menu:not(.el-menu--collapse) {
  width: 100%;
  width: 270px;
  min-width: 270px;
}

.el-menu--inline {
  background-color: #fafafa;
}

.el-menu i {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
/* #sidebar {
  height: 100%;
  width: 100%;
  overflow: overlay;
  width: 270px;
} */
#content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#navbar {
  padding: 5px;
  width: 100%;
  display: block;
  background-color: #fff;
  border-bottom: 1px soplid #ccc;
}

.bar-button i {
  margin: 0 20px;
  color: #333333;
}

.main-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
}
</style>