From f92d24e89c3f7abd3d8fff6ba681f94d3188e01f Mon Sep 17 00:00:00 2001
From: Evgeny Chaban <ychbn@ychbn.com>
Date: Mon, 2 Oct 2023 18:24:55 +0300
Subject: [PATCH] feat(sidebar): add sidebar indicator

---
 src/theme/css/chrome.css    | 29 +++++++++++++++++++++--------
 src/theme/css/variables.css |  2 ++
 src/theme/index.hbs         |  4 +++-
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index 2314f7a1..5ff3c232 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -422,22 +422,35 @@ ul#searchresults span.teaser em {
     position: absolute;
     cursor: col-resize;
     width: 0;
-    right: 0;
+    right: calc(var(--sidebar-resize-indicator-width) * -1);
     top: 0;
     bottom: 0;
+    display: flex;
+    align-items: center;
+}
+
+.sidebar-resize-handle .sidebar-resize-indicator {
+    width: 100%;
+    height: 12px;
+    background-color: var(--icons);
+    margin-inline-start: var(--sidebar-resize-indicator-space);
+}
+
+[dir=rtl] .sidebar .sidebar-resize-handle {
+    left: calc(var(--sidebar-resize-indicator-width) * -1);
+    right: unset;
 }
-[dir=rtl] .sidebar .sidebar-resize-handle { right:  unset; left: 0; }
 .js .sidebar .sidebar-resize-handle {
     cursor: col-resize;
-    width: 5px;
+    width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
 }
 /* sidebar-hidden */
 #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
-    transform: translateX(calc(0px - var(--sidebar-width)));
+    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
     z-index: -1;
 }
 [dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
-    transform: translateX(var(--sidebar-width));
+    transform: translateX(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
 }
 .sidebar::-webkit-scrollbar {
     background: var(--sidebar-bg);
@@ -448,15 +461,15 @@ ul#searchresults span.teaser em {
 
 /* sidebar-visible */
 #sidebar-toggle-anchor:checked ~ .page-wrapper {
-    transform: translateX(var(--sidebar-width));
+    transform: translateX(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
 }
 [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
-    transform: translateX(calc(0px - var(--sidebar-width)));
+    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
 }
 @media only screen and (min-width: 620px) {
     #sidebar-toggle-anchor:checked ~ .page-wrapper {
         transform: none;
-        margin-inline-start: var(--sidebar-width);
+        margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
     }
     [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
         transform: none;
diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
index 10a75909..0da55e8c 100644
--- a/src/theme/css/variables.css
+++ b/src/theme/css/variables.css
@@ -3,6 +3,8 @@
 
 :root {
     --sidebar-width: 300px;
+    --sidebar-resize-indicator-width: 8px;
+    --sidebar-resize-indicator-space: 2px;
     --page-padding: 15px;
     --content-max-width: 750px;
     --menu-bar-height: 50px;
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 2ee58c62..080b7851 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -112,7 +112,9 @@
             <div class="sidebar-scrollbox">
                 {{#toc}}{{/toc}}
             </div>
-            <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
+            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
+                <div class="sidebar-resize-indicator"></div>
+            </div>
         </nav>
 
         <!-- Track and set sidebar scroll position -->