Site sidebar V1

2025-07-27 15:06:05 +03:00
parent 648650ecb0
commit c813f35957
4 changed files with 94 additions and 3 deletions
@@ -8,3 +8,7 @@
 *
 * Consider organizing styles into separate files for maintainability.
 */
+
+site-sidebar {
+    --background: var(--pico-primary);
+}
@@ -4,3 +4,7 @@ import "controllers"

 import "trix"
 import "@rails/actiontext"
+
+import {SiteSidebar} from 'elements/site_sidebar'
+
+customElements.define('site-sidebar', SiteSidebar)
@@ -0,0 +1,83 @@
+import {html, css, LitElement, classMap} from 'lit'
+
+export class SiteSidebar extends LitElement {
+    static styles = css`
+    :host {
+        --padding: 0.25rem;
+    }
+
+    aside {
+        position: fixed;
+        left: 0;
+        top: 0;
+
+        height: 100%;
+        width: min(15em, 30%);
+        background: var(--background);
+
+        transform: translateX(-100%);
+        transition: transform 0.2s ease;
+
+        border-right: 2px solid gray;
+        box-sizing: border-box;
+        padding-block: var(--padding);
+
+        isolation: isolate;
+        z-index: 99;
+
+        &.open {
+            transform: none;
+        }
+    }
+
+    .padding {
+        padding-inline: var(--padding);
+    }
+
+    .toggle-button {
+        display: inline-block;
+
+        font-size: 1.5rem;
+        height: 2rem;
+        width: 2rem;
+        padding: 0;
+        text-align: center;
+        vertical-align: middle;
+
+        border-radius: 50%;
+
+        position: relative;
+        left: 100%;
+    }
+    `
+
+    static properties = {
+        open: {type: Boolean}
+    }
+
+    constructor() {
+        super()
+        this.open = false
+    }
+
+    render() {
+        const classes = {
+            open: this.open
+        }
+
+        return html`<aside class="${classMap(classes)}">
+            <div>
+                <button class="toggle-button" @click="${this._toggleOpen}">
+                    ${this.open ? "⯇" : "⯈"}
+                </button>
+            </div>
+            <div class="padding">
+                <slot></slot>
+            </div>
+            </aside>`
+    }
+
+    _toggleOpen() {
+        this.open = !this.open
+    }
+}
@@ -24,10 +24,10 @@
  </head>

  <body>
-      <aside>
+      <site-sidebar id="global_sidebar" data-turbo-permanent>
          <%= render partial: 'projects_selector' %>
-      </aside>
-      <main>
+      </site-sidebar>
+      <main class="container">
          <%= yield %>
      </main>
  </body>