add antidote-burger-menu

Author: nlundquist

components/burger-menu.js

@@ -0,0 +1,24 @@
+import { html } from 'lit-html';
+import { component } from 'haunted';
+import getComponentStyleSheetURL from '../helpers/stylesheet';
+
+function toggleBurger() {
+  this.classList.toggle('cross');
+  this.parentElement.querySelector('.burger-nav').classList.toggle('active');
+  document.body.classList.toggle('overflow-hidden');
+}
+
+customElements.define('antidote-burger-menu', component(function AdvisorContext() {
+  return html`
+    <link rel="stylesheet" href=${getComponentStyleSheetURL(this)} />
+    <ul class="burger-nav">
+      <slot></slot>
+    </ul>
+    
+    <div class="burger" @click=${toggleBurger}>
+      <div class="line"></div>
+      <div class="line"></div>
+      <div class="line"></div>
+    </div>    
+  `
+}));

index.js

@@ -3,6 +3,7 @@ export * from "./components/select.js";
 export * from "./components/progress-bar.js";
 export * from "./components/advisor.js";
 export * from "./components/advisor-context.js";
+export * from "./components/burger-menu.js";
 export * from "./components/terminal.js";
 export * from './components/lab-context.js';
 export * from "./components/lab-stage-selector.js";