From d319110b5dbfe7b0c60e24075afea04a2d95d688 Mon Sep 17 00:00:00 2001
From: Xanazf <hotdamnsucka@gmail.com>
Date: Thu, 2 Jan 2025 07:29:41 +0200
Subject: [PATCH] sidebar offset

---
 .../sidebars/nav/SidebarWrapper.tsx           | 29 +++++++++++++++++++
 .../navigation/sidebars/nav/index.astro       |  2 +-
 .../navigation/sidebars/toc/index.tsx         | 27 +++++++++++++++++
 3 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/components/navigation/sidebars/nav/SidebarWrapper.tsx b/src/components/navigation/sidebars/nav/SidebarWrapper.tsx
index 2c81e2f..00726f8 100644
--- a/src/components/navigation/sidebars/nav/SidebarWrapper.tsx
+++ b/src/components/navigation/sidebars/nav/SidebarWrapper.tsx
@@ -18,6 +18,9 @@ const NavComponent: Component<SidebarContent> = props => {
   const { children } = props;
   let navRef: HTMLDivElement;
 
+  const [clientWidth, setClientWidth] = createSignal<number>(0);
+  const [screenWidth, setScreenWidth] = createSignal<number>(0);
+
   function toggle(e: MouseEvent) {
     e.preventDefault();
     setOpen(!open());
@@ -36,20 +39,45 @@ const NavComponent: Component<SidebarContent> = props => {
   };
 
   onMount(() => {
+    setClientWidth(document.body.clientWidth);
+    setScreenWidth(window.outerWidth);
+
     onCleanup(() => {
       window.removeEventListener("click", handleClickOutside);
     });
   });
 
   createEffect(() => {
+    if (clientWidth() !== document.body.clientWidth) {
+      setClientWidth(document.body.clientWidth);
+    }
+    if (screenWidth() !== window.outerWidth) {
+      setScreenWidth(window.outerWidth);
+    }
+
     if (open()) {
       window.addEventListener("click", handleClickOutside);
       document.body.classList.add("overflow-nav");
       document.body.classList.add("dim-content-nav");
+
+      // onsetter
+      const header = document.getElementsByClassName(
+        "header"
+      )[0]! as HTMLElement;
+      const bodyOffset = screenWidth() - clientWidth();
+      document.body.style.width = `${screenWidth() - bodyOffset}px`;
+      header.style.width = `${screenWidth() - bodyOffset}px`;
     } else {
       window.removeEventListener("click", handleClickOutside);
       document.body.classList.remove("overflow-nav");
       document.body.classList.remove("dim-content-nav");
+
+      // offsetter
+      const header = document.getElementsByClassName(
+        "header"
+      )[0]! as HTMLElement;
+      document.body.style.width = "";
+      header.style.width = "";
     }
   });
 
@@ -57,6 +85,7 @@ const NavComponent: Component<SidebarContent> = props => {
     <div
       class="nav-toggle"
       ref={navRef!}
+      id="nav-toggle"
     >
       <div onclick={e => toggle(e)}>
         <MenuToX class={`nav-icon ${open() ? "active" : ""}`} />
diff --git a/src/components/navigation/sidebars/nav/index.astro b/src/components/navigation/sidebars/nav/index.astro
index 8dd5d51..d6a0d17 100644
--- a/src/components/navigation/sidebars/nav/index.astro
+++ b/src/components/navigation/sidebars/nav/index.astro
@@ -13,7 +13,7 @@ export interface Props {
 
 const { mobile } = Astro.props;
 ---
-<aside class=`nav-wrapper${mobile ? "-mobile" : ""}`>
+<aside class=`nav-wrapper${mobile ? "-mobile" : ""} id="nav"`>
   { mobile ? (
     <SidebarWrapper client:load>
       <RootNav currentRoute={currentRoute} currentModule={currentModule} currentClass={currentClass}/>
diff --git a/src/components/navigation/sidebars/toc/index.tsx b/src/components/navigation/sidebars/toc/index.tsx
index 64eb910..837ed95 100644
--- a/src/components/navigation/sidebars/toc/index.tsx
+++ b/src/components/navigation/sidebars/toc/index.tsx
@@ -13,6 +13,8 @@ import { buildHierarchy } from "@config/io/helpers";
 
 const TableOfContents: Component<TOCProps> = props => {
   const [open, setOpen] = createSignal<boolean>(false);
+  const [clientWidth, setClientWidth] = createSignal<number>(0);
+  const [screenWidth, setScreenWidth] = createSignal<number>(0);
   const { mobile, config, type } = props;
   let tocRef: HTMLDivElement;
 
@@ -41,20 +43,44 @@ const TableOfContents: Component<TOCProps> = props => {
   };
 
   onMount(() => {
+    setClientWidth(document.body.clientWidth);
+    setScreenWidth(window.outerWidth);
     onCleanup(() => {
       window.removeEventListener("click", handleClickOutside);
     });
   });
 
   createEffect(() => {
+    if (clientWidth() !== document.body.clientWidth) {
+      setClientWidth(document.body.clientWidth);
+    }
+    if (screenWidth() !== window.outerWidth) {
+      setScreenWidth(window.outerWidth);
+    }
+
     if (open()) {
       window.addEventListener("click", handleClickOutside);
       document.body.classList.add("overflow-toc");
       document.body.classList.add("dim-content-toc");
+
+      // onsetter
+      const header = document.getElementsByClassName(
+        "header"
+      )[0]! as HTMLElement;
+      const bodyOffset = screenWidth() - clientWidth();
+      document.body.style.width = `${screenWidth() - bodyOffset}px`;
+      header.style.width = `${screenWidth() - bodyOffset}px`;
     } else {
       window.removeEventListener("click", handleClickOutside);
       document.body.classList.remove("overflow-toc");
       document.body.classList.remove("dim-content-toc");
+
+      // offsetter
+      const header = document.getElementsByClassName(
+        "header"
+      )[0]! as HTMLElement;
+      document.body.style.width = "";
+      header.style.width = "";
     }
   });
 
@@ -62,6 +88,7 @@ const TableOfContents: Component<TOCProps> = props => {
     <div
       class="toc-toggle"
       ref={tocRef!}
+      id="toc-toggle"
     >
       <div onclick={e => toggle(e)}>
         <Article />