diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index fe93333..e67f5b1 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -8,3 +8,7 @@ * * Consider organizing styles into separate files for maintainability. */ + +site-sidebar { + --background: var(--pico-primary); +} diff --git a/app/javascript/application.js b/app/javascript/application.js index 9ae56c5..132e4ae 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -4,3 +4,7 @@ import "controllers" import "trix" import "@rails/actiontext" + +import {SiteSidebar} from 'elements/site_sidebar' + +customElements.define('site-sidebar', SiteSidebar) diff --git a/app/javascript/elements/site_sidebar.js b/app/javascript/elements/site_sidebar.js new file mode 100644 index 0000000..be5fa81 --- /dev/null +++ b/app/javascript/elements/site_sidebar.js @@ -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`` + } + + _toggleOpen() { + this.open = !this.open + } +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index ff94589..801a0f9 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -24,10 +24,10 @@ - -
+ +
<%= yield %>