Cómo usar "append" para crear una estructura en un menú lateral en el editor y también es posible desactivar un plugin al seleccionar otro.

2.) Además, al soltar el menú lateral de hamburguesas, quiero que el plugin Menú esté desactivado. ¿Hay alguna forma de hacerlo?

3.) Sería de gran ayuda si ayudas a implementarlo de otra manera, si es posible.

Para que te hagas una idea: - He usado el plugin por defecto del menú y he cambiado un poco para que me sirva a mi propósito. Adjunto archivos relevantes respecto al plugin.

**_Index.js_**

'importar uvas de 'uvas';
importar loadBlocks desde './blocks';
importar loadComponents desde './components';
import {
  hNavbarRef, navbarRef, navbarItemsRef, menuRef
} de './consts';

exportar por defecto grapesjs.plugins.add('ef-hamburger', (editor, opts = {}) => {
  Sea c = opts;

Sea defaults = {
    bloqueos: [hNavbarRef],
    defaultStyle: 1,
    navbarClsPfx: 'navbar',
    etiquetaNavbar: 'navbar',
    etiquetaNavbarContenedor: 'Contenedor Navbar',
    etiquetaMenú: 'Menú de la barra de navegación',
    labelMenuLink: 'Enlace del menú',
    etiquetaBurger: 'Hamburguesa',
    labelBurgerLine: 'Línea de hamburguesas',
    labelNavbarBlock: 'Hamburguesa',
    labelNavbarCategoría: 'Extra',
    etiquetaInicio: 'Hogar',
    etiquetaSobre: 'Sobre',
    etiquetaContacto: 'Contacto',
  };

Valores predeterminados de carga
  para (dejemos nombre en los valores predeterminados) {
    si (!( nombre en c))
      c[name] = defaults[name];
  }

loadBlocks(editor, c);
  loadComponents (editor, c);
});
`
**_consts.js_**

'export const
  hNavbarRef = 'h-navbar',
  navbarRef = 'navbar',
  navbarItemsRef = 'navbar-items',
  menuRef = 'navbar-menu';
`

**_component.js_**

'export default (editor, opt = {}) => {
    const c = opt;
    const dc = editor. DomComponents;
    const defaultType = dc.getType('default');
    const defaultModel = defaultType.model;
    const burgerTipo = 'menú de hamburguesa';
  
dc.addType(burgerType, {
      model: defaultModel.extend({
        Predeterminados: {
          ... defaultModel.prototype.defaults,
          'nombre personalizado': c.labelBurger,
          arrastrable: falso,
          Droppable: falso,
          copiable: falso,
          removible: falso,
          script: función () {
            var transEndAdded;
            var isAnimating = 0;
            var stringCollapse = 'gjs-collapse';
            var clickEvent = 'click';
            var transitProp = 'altura máxima';
            var transitTiempo = 'facilidad de entrada';
            var transitSpeed = 0,25;
  
var getTransitionEvent = function() {
              var t, el = document.createElement('void');
              Transiciones var = {
                'transición': 'fin de la transición',
                'OTransition': 'oTransitionEnd',
                'MozTransition': 'transición final',
                'WebkitTransition': 'webkitTransitionEnd'
              }
  
para (t en transiciones) {
                si (el.style[t] !== indefinido){
                  devolver transiciones[t];
                }
              }
            }
  
var transitEndEvent = getTransitionEvent();
  
var getElHeight = function(el) {
              var style = window.getComputedStyle(el);
              var elDisplay = style.display;
              var elPos = style.position;
              var elVis = style.visibility;
              var currentAltura = estilo.altura;
              var elMaxHeight = parseInt(style[transitProp]);
  
if (elDisplay !== 'none' && elMaxHeight !== '0') {
                return el.offsetHeight;
              }
  
el.style.height = 'auto';
              el.style.display = 'bloqueo';
              el.style.position = 'absoluta';
              el.style.visibility = 'oculto';
              var altura = el.offsetAltura;
              el.style.height = '';
              el.style.display = '';
              el.style.position = '';
              el.style.visibility = '';
  
altura de retorno;
            };
  
var toggleSlide = function(el) {
              isAnimating = 1;
              var elMaxHeight = getElHeight(el);
              var elStyle = el.style;
              elStyle.display = 'bloqueo';
              elStyle.transition = transitProp + ' ' + transitSpeed + 's ' + transitTiempo;
              elStyle.overflowY = 'oculto';
  
if (elStyle[transitProp] == '') {
                elStyle[transitProp] = 0;
              }
  
if (parseInt(elStyle[transitProp]) == 0) {
                elStyle[transitProp] = '0';
                setTimeout(function() {
                    elStyle[transitProp] = elMaxHeight + 'px';
                }, 10);
              } else {
                elStyle[transitProp] = '0';
              }
            }
  
var toggle = función(e) {
              e.preventDefault();
  
if (isAnimating) {
                regresar;
              }
  
var navParent = this.closest('[data-gjs=navbar]');
              var navItems = navParent.querySelector('[data-gjs=navbar-items]');
              toggleSlide(navItems);
  
if (!transEndAdded) {
                navItems.addEventListener(transitEndEvent, function() {
                  isAnimating = 0;
                  var itemsStyle = navItems.style;
                  if (parseInt(itemsStyle[transitProp]) == 0) {
                    itemsStyle.displatoggleSlidey = '';
                    itemsStyle[transitProp] = '';
                  }
                });
                transEndAdded = 1;
              }
            };
  
si ( !( StringCollapse en esto :) {
              this.addEventListener(haz clicEvento, alterna);
            }
  
this[stringCollapse] = 1;
          },
        },
      }, {
        isComponent(el) {
          if(el.getAttribute &&
            el.getAttribute('data-gjs-type') == burgerType) {
            return {type: burgerType};
          }
        },
      }),
      vista: defaultType.view,
    });
  }
  `

**_blocks.js_**

'import {
    hNavbarRef,
    navbarRef,
    NavbarItemsRef,
    menuRef
  } de "./consts";
  
Export default (editor, opt = {}) => {
    const c = opt;
    const bm = editor. Jefe de bloque;
    const navbarPfx = c.navbarClsPfx || 'navbar';
    estilo const = c.defaultStyle ? `
    <style>
  
Cuerpo
   {
     marje: 0;
     relleno: 0;
    altura:auto;
      width:auto;
     color: negro;
     familia tipográfica: "Avenir Next", "Avenir", sans-serif;
   }
   
a
   {
     decoración de texto: ninguna;
     color: #232323;
     
transición: facilidad de color 0.3s;
   }
   
a: flotar
   {
     color: tomate;
   }
   
#menuToggle
   {
     pantalla: bloqueo;
     posición: relativa;
     máximo: 50px;
     izquierda: 50px;
     Z-índice: 1;
     Color de fondo: #d1c8c8
     
-webkit-user-select: ninguno;
     user-select: ninguno;
   }
   
#menuToggle entrada
   {
     pantalla: bloqueo;
     Ancho: 40px;
     altura: 32px;
     posición: absoluta;
     arriba: -7px;
     izquierda: -5px;
     
cursor: puntero;
     
opacidad: 0; /* esconde esto */
     Z-índice: 2; /* y lo pones sobre la hamburguesa */
     
-webkit-toque-llamada: ninguna;
   }
   
/*
    * Solo una hamburguesa rápida
    */
   #menuToggle tramo
   {
     pantalla: bloqueo;
     ancho: 33px;
     Altura: 4px;
     margen inferior: 5px;
     posición: relativa;
     
Antecedentes: #cdcdcd;
     Radio de frontera: 3px;
     
Z-índice: 1;
     
Transform-Origin: 4px 0px;
     
transición: transformar 0,5s cúbico-bézier(0,77,0,0,2,0,05,1,0),
                 Fondo de 0,5s cúbico-bézier(0,77,0,0,2,0,05,1,0),
                 opacidad 0,55s de flexibilización;
   }
   
#menuToggle periodo: primer hijo
   {
     origen transformado: 0% 0%;
   }
   
#menuToggle periodo: nº-último-hijo(2)
   {
     Transform-Origin: 0% 100%;
   }
   
/* 
    * Transforma todas las lonchas de hamburguesa
    * hacia un cruce.
    */
   #menuToggle entrada:comprobado ~ espacio
   {
     opacidad: 1;
     transformar: rotar (45 grados) traslar (-2px, -1px);
     Antecedentes: #232323;
   }
   
/*
    * Pero escondamos el del medio.
    */
   #menuToggle entrada:verificada ~ span:nh-last-child(3)
   {
     opacidad: 0;
     transformar: rotar (0grado) escala(0,2, 0,2);
   }
   
/*
    * Oh, sí, y la última debería ir en la dirección contraria
    */
   #menuToggle entrada:verificado ~ spa: nth-last-child(2)
   {
     transformar: rotar(-45º) trasladar(0, -1px);
   }
   
/*
    * Haz que esto sea absoluto
    * en la esquina superior izquierda de la pantalla
    */
   #menu
   {
     posición: absoluta;
     ancho: 150px;
     margen: -100px 500px 100px -50px;
     Acolchado: 50px;
     Tapa de acolchado: 125px;
     Altura: 105VH;
     Color de fondo: #d1c8c8;
     tipo de lista: ninguno;
     -suavizado de fuentes webkit: antialiasado;
     /* para dejar de parpadear el texto en Safari */
     
origen transformado: 0% 0%;
     transformar: trasladar(-100%, 0);
     
transición: transformar 0,5s cúbico-bézier(0,77,0,2,0,05,1,0);
   }
   
#menu li
   {
     relleno: 10px 0;
     tamaño de fuente: 22px;
     
}
   
/*
    * Y vamos a deslizarlo desde la izquierda
    */
   #menuToggle entrada:comprobado ~ ul
   {
     transformar: ninguno;
   }
   .hamburgercontainer {
    ancho:2em
    Altura: 100VH;

}
  .altura total {
    Altura: 100vh;
  }
  
</style>
    ` : '';
  
bm.add(hNavbarRef, {
        Etiqueta: '
          <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <clase de camino="gjs-bloque-svg-camino" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15,6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" regla de relleno="no cero"></path>
            <rect class="gjs-block-svg-path" x="15" y="10" ancho="5" altura="1"></rect>
            <rect class="gjs-block-svg-path" x="15" y="10" ancho="5" altura="1"></rect>
            <rect class="gjs-block-svg-path" x="15" y="10" ancho="5" altura="1"></rect>
          </svg>
          <div class="gjs-block-label">${c.labelNavbarBlock}</div>',
        categoría: 'Gadgets de evento',
        Contenido: '
        <clase div = "hamburgercontainer">
        <!-- Hecho por Erik Terwan -->
        <!-- 24 de noviembre de 2015 -->
        <!-- Licencia MIT -->
     
<div id="menuToggle">
          
<!--
            Se utiliza una casilla falsa o oculta como receptor de clics,
            Así que puedes usar el selector :checked.
            -->
            <input type="checkbox" />
            
<!-- Algunos se extienden para hacer de hamburguesa. Están actuando como una hamburguesa de verdad, no como cosas de McDonald's. -->
            <span></span>
            <span></span>
            <span></span>
            
<!-- Lástima que el menú tenga que estar dentro del botón, pero bueno, es pura magia CSS. -->
         
<ul id="menu">
              <a href="#"><li>Home</li></a>
              <a href="#"><li>Acerca</li></a> de
              <a href="#"><li>Info</li></a>
              <a href="#"><li>Contact</li></a>
           
</ul>
          </div>
          </div>
       
${estilo}
        `,
        Componentes:[{
          etiquetaNombre: 'div',
                removible: cierto,
                arrastrable: falso,
                Copiable: Cierto,
                droppable:false
        }],
      });
  }
  `

! [Captura de pantalla del 12-10-2019, 18-51-56](https://user-images.githubusercontent.com/50452256/66702114-b18ca900-ed21-11e9-8431-72d3f4c8e04f.png)
! [Captura de pantalla del 12-10-2019 18-52-01](https://user-images.githubusercontent.com/50452256/66702115-b2253f80-ed21-11e9-8284-4b92a998ded5.png)