widgets scrollbar + little refactor

packages/client/src/scripts/sticky-sidebar.ts

@@ -1,59 +0,0 @@
-export class StickySidebar {
-	private lastScrollTop = 0;
-	private container: HTMLElement;
-	private el: HTMLElement;
-	private isTop = false;
-	private isBottom = false;
-	private offsetTop: number;
-
-	constructor(
-		container: StickySidebar["container"],
-	) {
-		this.container = container;
-		this.container.style.display = "flex";
-		this.el = this.container.children[0] as HTMLElement;
-		this.el.style.position = "sticky";
-		this.offsetTop = this.container.getBoundingClientRect().top;
-	}
-
-	public calc(scrollTop: number) {
-		if (scrollTop > this.lastScrollTop) { 
-			// downscroll			
-			this.isTop = false;
-			this.isBottom =
-				scrollTop + window.innerHeight >
-				this.el.offsetTop + this.el.clientHeight;
-		} else { 
-			// upscroll
-			this.isBottom = false;
-			this.isTop = scrollTop < this.el.offsetTop + 1;
-		}
-
-		if (this.isTop) {
-			if (this.el.style.alignSelf != "flex-start") {
-				this.el.style.position = "sticky";
-				this.el.style.bottom = null;
-				this.el.style.top = "0px";
-				this.el.style.alignSelf = "flex-start";
-				console.log("top");
-			}
-			this.offsetTop = scrollTop;
-		} else if (this.isBottom) {
-			if (this.el.style.alignSelf != "flex-end") {
-				this.el.style.position = "sticky";
-				this.el.style.bottom = "0px";
-				this.el.style.top = null;
-				this.el.style.alignSelf = "flex-end";
-				console.log("bottom");
-			}
-			this.offsetTop = window.innerHeight + scrollTop - this.el.scrollHeight;
-		} else {
-			this.el.style.position = "relative";
-			this.el.style.top = this.offsetTop + "px";
-			this.el.style.bottom = null;
-			this.el.style.alignSelf = null;
-		}
-
-		this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
-	}
-}

packages/client/src/style.scss

@@ -101,6 +101,13 @@ body::-webkit-scrollbar-thumb {
 	}
 }
 
+.hide-scrollbar {
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
 html._themeChanging_ {
 	&, *, ::before, ::after {
 		transition: background 1s ease, border 1s ease !important;

packages/client/src/ui/universal.vue

@@ -3,7 +3,7 @@
 		class="dkgtipfy"
 		:class="{ wallpaper, isMobile, centered: ui === 'classic' }"
 	>
-		<XSidebar v-if="!isMobile" class="sidebar" />
+		<XSidebar v-if="!isMobile" />
 
 		<MkStickyContainer class="contents">
 			<template #header
@@ -168,7 +168,6 @@ import * as Acct from "calckey-js/built/acct";
 import type { ComputedRef } from "vue";
 import type { PageMetadata } from "@/scripts/page-metadata";
 import { instanceName, ui } from "@/config";
-import { StickySidebar } from "@/scripts/sticky-sidebar";
 import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
 import XSidebar from "@/ui/_common_/navbar.vue";
 import * as os from "@/os";
@@ -250,8 +249,6 @@ mainRouter.on("change", () => {
 	updateButtonState();
 });
 
-document.documentElement.style.overflowY = "scroll";
-
 if (defaultStore.state.widgets.length === 0) {
 	defaultStore.set("widgets", [
 		{
@@ -334,14 +331,10 @@ async function startGroup(): void {
 
 onMounted(() => {
 	if (!isDesktop.value) {
-		window.addEventListener(
-			"resize",
-			() => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD)
-					isDesktop.value = true;
-			},
-			{ passive: true }
-		);
+		matchMedia(`(min-width: ${DESKTOP_THRESHOLD - 1}px)`).onchange = (mql) => {
+			if (mql.matches)
+				isDesktop.value = true;
+		}
 	}
 });
 
@@ -384,14 +377,22 @@ const attachSticky = (el: any) => {
 	let lastScrollTop = 0;
 	addEventListener(
 		"scroll",
-		(ev) => {
+		() => {
 			requestAnimationFrame(() => {
 				widgetsEl.scrollTop += window.scrollY - lastScrollTop;
-				lastScrollTop = window.scrollY <= 0 ? 0 : window.scrollY;
+				lastScrollTop = window.scrollY;
 			});
 		},
 		{ passive: true }
 	);
+	widgetsEl.classList.add("hide-scrollbar");
+	widgetsEl.onmouseenter = () => {
+		if (document.documentElement.scrollHeight <= window.innerHeight) {
+			widgetsEl.classList.remove("hide-scrollbar");
+		} else {
+			widgetsEl.classList.add("hide-scrollbar");
+		}
+	}
 };
 
 function top() {
@@ -572,10 +573,6 @@ console.log(mainRouter.currentRoute.value.name);
 		width: 300px;
 		min-width: max-content;
 		box-sizing: content-box;
-		scrollbar-width: none;
-		&::-webkit-scrollbar {
-			display: none;
-		}
 
 		@media (max-width: $widgets-hide-threshold) {
 			display: none;