From 15dcd1714dc000c0d92fca91fd3b933bd11d2ad5 Mon Sep 17 00:00:00 2001
From: Artemiy Solopov <a.solopov.001@gmail.com>
Date: Mon, 20 Oct 2025 01:39:57 +0300
Subject: [PATCH] Background for closing the sidebar

---
 app/javascript/elements/site_sidebar.js | 27 +++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/javascript/elements/site_sidebar.js b/app/javascript/elements/site_sidebar.js
index 86ee44c..b6a7930 100644
--- a/app/javascript/elements/site_sidebar.js
+++ b/app/javascript/elements/site_sidebar.js
@@ -55,6 +55,20 @@ export class SiteSidebar extends LitElement {
         position: absolute;
         left: calc(100% + 2px);
     }
+
+    .bg {
+        transition: opacity 0.2s ease;
+        transition-behavior: allow-discrete;
+        background: black;
+        opacity: 0.6;
+
+        position: fixed;
+        inset: 0;
+
+        @starting-style {
+            opacity: 0;
+        }
+    }
     `
 
     static properties = {
@@ -71,14 +85,23 @@ export class SiteSidebar extends LitElement {
             open: this.open
         }
 
-        return html`<aside class="${classMap(classes)}">
+        return html`
+        <aside class="${classMap(classes)}">
             <button class="toggle-button" @click="${this._toggleOpen}">
                 <img src="${this.open ? closeIcon : openIcon}">
             </button>
             <div class="padding">
                 <slot></slot>
             </div>
-            </aside>`
+        </aside>
+        ${this._bg()}
+        `
+    }
+
+    _bg() {
+        if(!this.open) return null
+
+        return html`<div class="bg" @click="${this._toggleOpen}"></div>`
     }
 
     _toggleOpen() {