From 3d06ec05b787b7c605b31ca942415f75942adab6 Mon Sep 17 00:00:00 2001 From: Artemiy Solopov Date: Wed, 30 Jul 2025 02:27:55 +0300 Subject: [PATCH] Side sidebar V1.1 --- app/assets/stylesheets/application.css | 5 +++++ app/javascript/elements/site_sidebar.js | 17 ++++++++++------- app/views/layouts/application.html.erb | 2 +- vendor/assets/images/mingcute/close_fill.svg | 1 + .../assets/images/mingcute/hamburger_line.svg | 1 + vendor/assets/images/mingcute/mingcute.md | 1 + vendor/assets/images/mingcute/right_fill.svg | 1 + 7 files changed, 20 insertions(+), 8 deletions(-) create mode 100644 vendor/assets/images/mingcute/close_fill.svg create mode 100644 vendor/assets/images/mingcute/hamburger_line.svg create mode 100644 vendor/assets/images/mingcute/mingcute.md create mode 100644 vendor/assets/images/mingcute/right_fill.svg 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`