#se-menu menu work starting code added

src/editor/components/index.js

@@ -5,3 +5,5 @@ import './seDropdown.js';
 import './seInput.js';
 import './seSpinInput.js';
 import './sePalette.js';
+import './seMenu.js';
+import './seMenuItem.js';

src/editor/components/seMenu.js

@@ -0,0 +1,51 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/MenuButton.js';
+import 'elix/define/MenuItem.js';
+
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  :host {
+    padding: 0px;
+  }
+  </style>
+  
+  <elix-menu-button id="sampleMenuButton" aria-label="Sample Menu">
+    welcome
+    <slot></slot>
+  </elix-menu-button>
+  
+`;
+/**
+ * @class SeMenu
+ */
+export class SeMenu extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$menu = this._shadowRoot.querySelector('elix-menu-button');
+    console.log(this.$menu);
+  }
+
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    console.log("connectedCallback");
+    this.$menu.addEventListener('openedchange', (e) => {
+      e.preventDefault();
+      console.log("came");
+    });
+    //this.dispatchEvent(this.$event);
+  }
+}
+
+// Register
+customElements.define('se-menu', SeMenu);

src/editor/components/seMenuItem.js

@@ -0,0 +1,30 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/Menu.js';
+import 'elix/define/MenuItem.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  </style>
+  
+  <elix-menu-item>New</elix-menu-item>
+  
+`;
+/**
+ * @class SeMenuItem
+ */
+export class SeMenuItem extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    // this.$menu = this._shadowRoot.querySelector('elix-menu');
+  }
+}
+
+// Register
+customElements.define('se-menu-item', SeMenuItem);

src/editor/index.html

@@ -74,6 +74,7 @@
         <div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
         </div>
       </div>
+
       <div id="main_button">
         <div id="main_icon" class="tool_button" title="Main Menu">
           <span>SVG-Edit</span>
@@ -124,6 +125,12 @@
           </ul>
         </div> <!-- main_menu -->
       </div> <!-- main_button -->
+      <se-menu>
+        <se-menu-item>new</se-menu-item>
+        <se-menu-item>new1</se-menu-item>
+        <se-menu-item>new2</se-menu-item>
+        <se-menu-item>new3</se-menu-item>
+      </se-menu>
       <div id="tools_top">
         <div id="editor_panel">
           <div class="tool_sep"></div>