diff --git a/src/html/component/content-pane/content-pane.less b/src/html/component/content-pane/content-pane.less
index ea8aea5..c64d9f2 100644
--- a/src/html/component/content-pane/content-pane.less
+++ b/src/html/component/content-pane/content-pane.less
@@ -14,7 +14,7 @@
.pin-button {
position: absolute;
- z-index: 999;
+ z-index: 5;
}
diff --git a/src/html/component/menu/menu.less b/src/html/component/menu/menu.less
index 935c249..8ef295c 100644
--- a/src/html/component/menu/menu.less
+++ b/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;
}
-}
\ No newline at end of file
+
+ .menu-content {
+ background-color: @background-light;
+ }
+
+ .menu-item {
+ color: black;
+ }
+}
diff --git a/src/html/component/menu/menu.ts b/src/html/component/menu/menu.ts
index 8352280..0ce3ad7 100644
--- a/src/html/component/menu/menu.ts
+++ b/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 {
+ 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 {
+ 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`
-
+
+
`
}
}
+
+interface IMenuItem {
+ label: string
+ action: () => void
+}
diff --git a/src/html/component/nav-bar/nav-bar.less b/src/html/component/nav-bar/nav-bar.less
index 8100258..a32e5a2 100644
--- a/src/html/component/nav-bar/nav-bar.less
+++ b/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;
}
diff --git a/src/uikit-theme.less b/src/uikit-theme.less
index ac86b23..84b90d1 100644
--- a/src/uikit-theme.less
+++ b/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;