update

static/components/side-menu/side-menu.html

@@ -0,0 +1,43 @@
+<template id="side-menu-template">
+  <style></style>
+    :host {
+      display: block;
+      width: var(--side-menu-width, 250px);
+      height: 100%;
+      background: var(--side-menu-bg, #f9f9f9);
+      border-right: 1px solid #ccc;
+      box-sizing: border-box;
+      position: relative;
+      transition: transform 0.3s ease;
+    }
+
+    .menu {
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    .toggle {
+      position: absolute;
+      top: 0.5rem;
+      right: -1.5rem;
+      background: var(--toggle-bg, #f0f0f0);
+      border: 1px solid #ccc;
+      border-left: none;
+      border-radius: 0 4px 4px 0;
+      padding: 0.25rem 0.5rem;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .collapsed {
+      transform: translateX(-100%);
+    }
+  </style>
+
+  <div class="toggle" part="toggle">☰</div>
+  <nav class="menu" part="menu">
+    <slot></slot>
+    <color-picker></color-picker>
+    <label id="grid-toggle-label"><input type="checkbox" id="grid-toggle"> Grid</label>
+  </nav>
+</template>