From 6560fa6dd69644995115172ec3b35f62be0dba03 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Fri, 14 Aug 2026 17:39:50 +0800
Subject: [PATCH] Fix sidebar-dimmer animation

---
 layout/_partials/widgets.njk | 1 -
 source/js/sidebar.js         | 6 +++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/layout/_partials/widgets.njk b/layout/_partials/widgets.njk
index b312d0a..ccfeb63 100644
--- a/layout/_partials/widgets.njk
+++ b/layout/_partials/widgets.njk
@@ -6,7 +6,6 @@
     <span class="toggle-line"></span>
     <span class="toggle-line"></span>
   </div>
-  <div class="sidebar-dimmer"></div>
 {%- endif %}
 
 {%- if theme.back2top.enable and not theme.back2top.sidebar %}
diff --git a/source/js/sidebar.js b/source/js/sidebar.js
index 3c49861..c429ad9 100644
--- a/source/js/sidebar.js
+++ b/source/js/sidebar.js
@@ -3,13 +3,17 @@
 document.addEventListener('DOMContentLoaded', () => {
 
   const isRight = CONFIG.sidebar.position === 'right';
+  // Create the dimmer dynamically to prevent an unwanted animation before main.css is applied.
+  const sidebarDimmer = document.createElement('div');
+  sidebarDimmer.className = 'sidebar-dimmer';
+  document.body.appendChild(sidebarDimmer);
 
   const sidebarToggleMotion = {
     mouse: {},
     init() {
       window.addEventListener('mousedown', this.mousedownHandler.bind(this));
       window.addEventListener('mouseup', this.mouseupHandler.bind(this));
-      document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
+      sidebarDimmer.addEventListener('click', this.clickHandler.bind(this));
       document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
       window.addEventListener('sidebar:show', this.showSidebar);
       window.addEventListener('sidebar:hide', this.hideSidebar);