From 147b155d603b1ee6bb679361a751b9d0ef1f7f82 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 8 Feb 2023 03:44:05 -0800
Subject: [PATCH] Add hook for hideable scrollbar

---
 src/renderer/hooks/index.ts              |  1 +
 src/renderer/hooks/use-hide-scrollbar.ts | 25 ++++++++++++++++++++++++
 src/renderer/styles/global.scss          |  4 ++++
 3 files changed, 30 insertions(+)
 create mode 100644 src/renderer/hooks/use-hide-scrollbar.ts

diff --git a/src/renderer/hooks/index.ts b/src/renderer/hooks/index.ts
index d4370c64..e0f836c1 100644
--- a/src/renderer/hooks/index.ts
+++ b/src/renderer/hooks/index.ts
@@ -3,3 +3,4 @@ export * from './use-is-mounted';
 export * from './use-should-pad-titlebar';
 export * from './use-container-query';
 export * from './use-fast-average-color';
+export * from './use-hide-scrollbar';
diff --git a/src/renderer/hooks/use-hide-scrollbar.ts b/src/renderer/hooks/use-hide-scrollbar.ts
new file mode 100644
index 00000000..18a0a2f0
--- /dev/null
+++ b/src/renderer/hooks/use-hide-scrollbar.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { useTimeout } from '@mantine/hooks';
+
+export const useHideScrollbar = (timeout: number) => {
+  const [hideScrollbar, setHideScrollbar] = useState(false);
+  const { start, clear } = useTimeout(() => setHideScrollbar(true), timeout);
+
+  // Automatically hide the scrollbar after the timeout duration
+  useEffect(() => {
+    start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const hideScrollbarElementProps = {
+    onMouseEnter: () => {
+      setHideScrollbar(false);
+      clear();
+    },
+    onMouseLeave: () => {
+      start();
+    },
+  };
+
+  return { hideScrollbarElementProps, isScrollbarHidden: hideScrollbar };
+};
diff --git a/src/renderer/styles/global.scss b/src/renderer/styles/global.scss
index 918d9562..a706589a 100644
--- a/src/renderer/styles/global.scss
+++ b/src/renderer/styles/global.scss
@@ -75,6 +75,10 @@ button {
   -webkit-app-region: no-drag;
 }
 
+.overlay-scrollbar {
+  overflow-y: overlay !important;
+}
+
 .hide-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;