add simple menu

src/html/component/content-pane/content-pane.less

@@ -14,7 +14,7 @@
 
 .pin-button {
   position: absolute;
-  z-index: 999;
+  z-index: 5;
 }
 
 

src/html/component/menu/menu.less

@@ -1,13 +1,53 @@
 @import '/src/uikit-theme';
 
+.menu-content {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+  z-index: 100;
+  margin-left: 0.5em;
+}
+
+.menu-item {
+  padding: 0.1em 1em;
+  cursor: pointer;
+}
+
+.menu-item:hover {
+    background: @primary-color;
+}
+
+.show {
+  display: flex;
+}
+
 @media (prefers-color-scheme: dark) {
   .uk-button {
-    background: rgb(34, 34, 34);
+    background: @button-dark;
+  }
+
+  .menu-content {
+    background-color: @background-dark;
   }
+
+  .menu-item > a {
+    color: white;
+  }
+
+
 }
 
 @media (prefers-color-scheme: light) {
   .uk-button {
-    background: rgb(222, 222, 222);
+    background: @button-light;
   }
-}
+
+  .menu-content {
+    background-color: @background-light;
+  }
+
+  .menu-item {
+    color: black;
+  }
+}

src/html/component/menu/menu.ts

@@ -1,14 +1,102 @@
 import { html, css, unsafeCSS, LitElement, type TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { customElement, query, state } from 'lit/decorators.js'
 import style_less from './menu.less?inline'
+import { map } from 'lit/directives/map.js'
+import { open, save } from '@tauri-apps/api/dialog'
+import { appWindow } from '@tauri-apps/api/window'
+
+// TODO: close menu when clicked outside
 
 @customElement('hamburger-menu')
 export default class Menu extends LitElement {
   static styles = css`${unsafeCSS(style_less)}`
+  @query('.menu-content') declare menuContentElement: HTMLElement
+  @state() menuVisible = false
+  @state() menuItems: IMenuItem[] = [
+    {
+      label: 'New sketch',
+      action: () => { console.log('new') }
+    },
+    {
+      label: 'Import...',
+      action: () => { void this.import() }
+    },
+    {
+      label: 'Export...',
+      action: () => { void this.export() }
+    },
+    {
+      label: 'Quit',
+      action: this.quit
+    }
+  ]
+
+  async import (): Promise<void> {
+    let selected = await open({
+      title: 'Import sketch...',
+      multiple: false,
+      filters: [{
+        name: '*.json',
+        extensions: ['json']
+      }]
+    })
+    if (selected === null) return
+    if (Array.isArray(selected)) {
+      if (selected.length > 0) { selected = selected[0] }
+    }
+
+    console.log('importing', selected)
+  }
+
+  async export (): Promise<void> {
+    const filePath = await save({
+      title: 'Export sketch...',
+      filters: [{
+        name: '*.json',
+        extensions: ['json']
+      }],
+      defaultPath: 'project_name_here'
+    })
+    if (filePath === null) return
+
+    console.log('exporting to', filePath)
+  }
+
+  quit (): void {
+    void appWindow.close()
+  }
+
+  private toggleMenu (): void {
+    this.menuVisible = !this.menuVisible
+  }
+
+  private itemClick (action: () => void): void {
+    this.toggleMenu()
+    action()
+  }
 
   render (): TemplateResult {
     return html`
-      <button class="uk-button uk-button-small hamburger-menu uk-margin-small-left">☰</button>
+      <button class="uk-button uk-button-small hamburger-menu uk-margin-small-left"
+      @click="${this.toggleMenu}">☰</button>
+      <div class="menu-content ${this.menuVisible ? 'show' : ''}">
+        <ul class="uk-nav">
+          ${map(this.menuItems, (item) => html`
+            <li class="menu-item" @click="${() => {
+              this.itemClick(item.action)
+            }}">
+              <a>
+                ${item.label}
+              </a>
+            </li>
+          `)}
+        </ul>
+      </div>
     `
   }
 }
+
+interface IMenuItem {
+  label: string
+  action: () => void
+}

src/html/component/nav-bar/nav-bar.less

@@ -2,8 +2,7 @@
 
 .nav-bar {
   white-space: nowrap;
-  z-index: 998;
-  overflow: hidden;
+  z-index: 100;
   position: relative;
 }
 

src/uikit-theme.less

@@ -1,13 +1,16 @@
 // Place any UIKit custom code here.
 
-// Consequently, Vite will know (based on this file name) to fix the 
+// Consequently, Vite will know (based on this file name) to fix the
 // internal image paths inside UIKit to the correct values.
 
 @import "uikit/src/less/uikit.theme.less";
 
 @global-link-color: #DA7D02;
+@primary-color: #5282ee;
 @background-light: #f2f2f2;
 @background-dark: #2f2f2f;
+@button-light: rgb(222, 222, 222);
+@button-dark: rgb(34, 34, 34);
 
 body {
   margin: 0;