diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index e67f5b1..8c68e6c 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -9,6 +9,11 @@ * Consider organizing styles into separate files for maintainability. */ +body { + display: flex; + flex-flow: row nowrap; +} + site-sidebar { --background: var(--pico-primary); } diff --git a/app/javascript/elements/site_sidebar.js b/app/javascript/elements/site_sidebar.js index be5fa81..ec96971 100644 --- a/app/javascript/elements/site_sidebar.js +++ b/app/javascript/elements/site_sidebar.js @@ -1,9 +1,13 @@ import {html, css, LitElement, classMap} from 'lit' +const openIcon = RAILS_ASSET_URL('/mingcute/hamburger_line.svg') +const closeIcon = RAILS_ASSET_URL('/mingcute/close_fill.svg') + export class SiteSidebar extends LitElement { static styles = css` :host { --padding: 0.25rem; + flex-basis: 2rem; } aside { @@ -45,9 +49,10 @@ export class SiteSidebar extends LitElement { vertical-align: middle; border-radius: 50%; + box-sizing: border-box; - position: relative; - left: 100%; + position: absolute; + left: calc(100% + 2px); } ` @@ -66,11 +71,9 @@ export class SiteSidebar extends LitElement { } return html`