From aae36ca322b39aafea95d7a85641f7af22318e09 Mon Sep 17 00:00:00 2001 From: soumik183 Date: Tue, 24 Mar 2026 02:13:53 +0530 Subject: [PATCH] feat: add configurable sidebar width in settings --- src/components/sidebar/index.js | 27 +++++++++++++++++++-------- src/components/sidebar/style.scss | 3 +-- src/lang/en-us.json | 1 + src/lib/settings.js | 1 + src/settings/appSettings.js | 15 +++++++++++++++ 5 files changed, 37 insertions(+), 10 deletions(-) diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js index 0b606960f..f41c67efe 100644 --- a/src/components/sidebar/index.js +++ b/src/components/sidebar/index.js @@ -2,6 +2,7 @@ import "./style.scss"; import toast from "components/toast"; import Ref from "html-tag-js/ref"; import actionStack from "lib/actionStack"; +import appSettings from "lib/settings"; import auth, { loginEvents } from "lib/auth"; import constants from "lib/constants"; @@ -33,14 +34,14 @@ function create($container, $toggler) { const START_THRESHOLD = constants.SIDEBAR_SLIDE_START_THRESHOLD_PX; //Point where to start swipe const MIN_WIDTH = 200; //Min width of the side bar - const MAX_WIDTH = () => innerWidth * 0.7; //Max width of the side bar + const MAX_WIDTH = () => innerWidth - 40; //Max width of the side bar const resizeBar = Ref(); const userAvatar = Ref(); const userContextMenu = Ref(); $container = $container || app; let mode = innerWidth > 600 ? "tab" : "phone"; - let width = +(localStorage.sideBarWidth || MIN_WIDTH); + let width = Math.min(appSettings.value.sidebarWidth || MIN_WIDTH, MAX_WIDTH()); const eventOptions = { passive: false }; const $el = ( @@ -92,6 +93,11 @@ function create($container, $toggler) { $toggler?.addEventListener("click", toggle); $container.addEventListener("touchstart", ontouchstart, eventOptions); window.addEventListener("resize", onWindowResize); + + appSettings.on("update:sidebarWidth", () => { + width = Math.min(appSettings.value.sidebarWidth || MIN_WIDTH, MAX_WIDTH()); + setWidth(width); + }); if (mode === "tab" && localStorage.sidebarShown === "1") { show(); @@ -226,6 +232,8 @@ function create($container, $toggler) { localStorage.sidebarShown = 1; $el.activated = true; $el.onclick = null; + + setWidth(width); if (mode === "phone") { resizeBar.style.display = "none"; @@ -239,7 +247,6 @@ function create($container, $toggler) { action: hideMaster, }); } else { - setWidth(width); resizeBar.style.display = "block"; app.append($el); $el.onclick = () => { @@ -349,7 +356,8 @@ function create($container, $toggler) { if (newWidth <= MIN_WIDTH) width = MIN_WIDTH; else if (newWidth >= MAX_WIDTH()) width = MAX_WIDTH(); else width = newWidth; - localStorage.sideBarWidth = width; + appSettings.value.sidebarWidth = width; + appSettings.update(false); document.removeEventListener("touchmove", onMove, eventOptions); document.removeEventListener("mousemove", onMove, eventOptions); document.removeEventListener("touchend", onEnd, eventOptions); @@ -468,9 +476,12 @@ function create($container, $toggler) { */ function setWidth(width) { $el.style.transition = "none"; + $el.style.width = width + "px"; $el.style.maxWidth = width + "px"; - root.style.marginLeft = width + "px"; - root.style.width = `calc(100% - ${width}px)`; + if (mode === "tab") { + root.style.marginLeft = width + "px"; + root.style.width = `calc(100% - ${width}px)`; + } clearTimeout(setWidthTimeout); setWidthTimeout = setTimeout(() => { editorManager?.editor?.resize(true); @@ -492,8 +503,8 @@ function create($container, $toggler) { $el.toggle = toggle; $el.onshow = () => {}; $el.getWidth = function () { - const width = innerWidth * 0.7; - return mode === "phone" ? (width >= 350 ? 350 : width) : MIN_WIDTH; + const configuredWidth = appSettings.value.sidebarWidth || MIN_WIDTH; + return mode === "phone" ? Math.min(configuredWidth, MAX_WIDTH()) : width; }; return $el; diff --git a/src/components/sidebar/style.scss b/src/components/sidebar/style.scss index 87d84afa6..153b35d0f 100644 --- a/src/components/sidebar/style.scss +++ b/src/components/sidebar/style.scss @@ -13,8 +13,7 @@ body.no-animation { position: fixed; left: 0; top: 0; - width: 70vw; - max-width: 350px; + width: 280px; height: 100vh; display: flex; background-color: rgb(153, 153, 255); diff --git a/src/lang/en-us.json b/src/lang/en-us.json index 60b01d2c8..3dd2198af 100644 --- a/src/lang/en-us.json +++ b/src/lang/en-us.json @@ -494,6 +494,7 @@ "change theme": "Change Theme", "documentation": "Documentation", "open in terminal": "Open in Terminal", + "sidebar width": "Sidebar width", "developer mode": "Developer Mode", "info-developermode": "Enable developer tools (Eruda) for debugging plugins and inspecting app state. Inspector will be initialized on app start.", "developer mode enabled": "Developer mode enabled. Use command palette to toggle inspector (Ctrl+Shift+I).", diff --git a/src/lib/settings.js b/src/lib/settings.js index 3ef5adeb4..3260ca465 100644 --- a/src/lib/settings.js +++ b/src/lib/settings.js @@ -175,6 +175,7 @@ class Settings { colorPreview: true, maxRetryCount: 3, showRetryToast: false, + sidebarWidth: 280, showSideButtons: true, showSponsorSidebarApp: true, showAnnotations: false, diff --git a/src/settings/appSettings.js b/src/settings/appSettings.js index 102ad025e..bb4ea0098 100644 --- a/src/settings/appSettings.js +++ b/src/settings/appSettings.js @@ -87,6 +87,21 @@ export default function otherSettings() { info: strings["settings-info-app-floating-button"], category: categories.interface, }, + { + key: "sidebarWidth", + text: strings["sidebar width"] || "Sidebar width", + value: values.sidebarWidth, + prompt: strings["sidebar width"] || "Sidebar width (pixels)", + promptType: "number", + promptOptions: { + test(value) { + value = Number.parseInt(value); + return value >= 200 && value <= 1500; + }, + }, + info: "Adjust the width of the sidebar (min 200px).", + category: categories.interface, + }, { key: "showSideButtons", text: strings["show side buttons"],