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>
+      </site-sidebar>
-      <main>
+      <main class="container">
          <%= yield %>
      </main>
  </body>