Initial work on node menu

static/css/notes2.css

@@ -9,7 +9,7 @@
 
 	--line-color: #ccc;
 	--tree-expander: 0px;
-	--functions-width: 180px;
+	--functions-width: 216px;
 }
 
 html {

static/js/page_node.mjs

@@ -9,7 +9,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 			<style>
 				.el-functions {
 					display: grid;
-					grid-template-columns: 1fr repeat(4, min-content);
+					grid-template-columns: 1fr repeat(5, min-content);
 					grid-gap: 8px;
 					align-items: center;
 					justify-items: end;
@@ -31,6 +31,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 				<img data-el="icon-table-format" class="colorize" src="/images/${_VERSION}/icon_table.svg">
 				<img data-el="icon-history"      class="colorize" src="/images/${_VERSION}/icon_history.svg">
 				<img data-el="icon-new-document" class="colorize" src="/images/${_VERSION}/icon_new_document.svg">
+				<img data-el="icon-menu"         class="colorize" src="/images/${_VERSION}/icon_menu.svg" popovertarget="node-menu">
 			</div>
 		`
 	}// }}}
@@ -501,4 +502,18 @@ export class Node {
 	}//}}}
 }
 
+class N2Menu extends CustomHTMLElement {
+	static {
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+		<div id="node-menu" popover>Popover content</div>
+		`
+	}
+
+	constructor() {
+		super()
+	}
+}
+customElements.define('n2-menu', N2Menu)
+
 // vim: foldmethod=marker

views/pages/notes2.gotmpl

@@ -6,6 +6,8 @@
 <div id="notes2" class="page-history">
 	<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">&gt;</div>
 	<div id="tree" tabindex=0></div>
+	<n2-menu></n2-menu>
+	<div id="node-menu" popover>Popover content</div>
 
 	<div id="main-page">
 		<!-- Storage stats -->