From 226904bc861b4ac5439f3760fbb961ed4e7e78a7 Mon Sep 17 00:00:00 2001
From: guFalcon <gu_falcon@hotmail.com>
Date: Mon, 7 Oct 2024 13:56:14 +0200
Subject: [PATCH] make navbar-width resizable

---
 css/sidebar.css  | 11 +++++++++++
 obsidian-page.js | 26 ++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/css/sidebar.css b/css/sidebar.css
index 42c70f8..e1817a9 100644
--- a/css/sidebar.css
+++ b/css/sidebar.css
@@ -8,5 +8,16 @@
   border-top-right-radius: 10px;
   font-size: 12px;
   overflow-y: auto;
+  overflow-x: hidden;
   transition: background-color 0.3s ease-in-out, padding 0.3s ease, max-width 0.3s ease, opacity 0.3s ease-in-out, visibility 0.3s step-end;
+}
+
+#sidebar::before {
+  content: '';
+  background-color: #ccc;
+  position: absolute;
+  right: 0px;
+  width: 4px;
+  height: 100%;
+  cursor: ew-resize;
 }
\ No newline at end of file
diff --git a/obsidian-page.js b/obsidian-page.js
index f3bf121..505f863 100644
--- a/obsidian-page.js
+++ b/obsidian-page.js
@@ -375,3 +375,29 @@ function toggleViewExam() {
     }, 1000);
   });
 }
+
+/*
+* This script is used to resize the right panel by dragging the border.
+*/
+const BORDER_SIZE = 4;
+const panel = document.getElementById("sidebar");
+
+let m_pos;
+function resize(e){
+  const dx = m_pos - e.x;
+  m_pos = e.x;
+  panel.style.width = (parseInt(getComputedStyle(panel, '').width) - dx) + "px";
+}
+
+panel.addEventListener("mousedown", function(e){
+  const cs = getComputedStyle(panel, '')
+  const w = parseInt(cs.width) + parseInt(cs.paddingLeft) + parseInt(cs.paddingRight)
+  if (e.offsetX >= w - BORDER_SIZE) {
+    m_pos = e.x;
+    document.addEventListener("mousemove", resize, false);
+  }
+}, false);
+
+document.addEventListener("mouseup", function(){
+  document.removeEventListener("mousemove", resize, false);
+}, false);