ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-03 14:45:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

replaced marginLeft to translateX in SidebarTriggerAdjustable

Browse Source
This commit is contained in:
corgifist 2025-07-28 00:20:26 +03:00
parent fd21a73620
commit 2511e97be2
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/scroll-fading-title/ScrollFadingTitle.tsx
View File

@ -18,10 +18,10 @@ export const ScrollFadingTitle = (props: ComponentProps<"div">) => {
};
handleScroll();
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', handleScroll, {passive: true});
return () => window.removeEventListener('scroll', handleScroll);
}, [elementRef]);
return <div style={{opacity: 1}} ref={elementRef} {...props} className={cn("will-change-auto", props.className)}/>
return <div style={{opacity: 1}} ref={elementRef} {...props} className={props.className}/>
};

15
src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
View File

@ -1,12 +1,21 @@
"use client";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
import { sign } from "crypto";
import { ComponentProps, useEffect, useState } from "react";
const easeSlide = (x: number) => (
1 - Math.pow(1 - x, 3)
);
const lerp = (a: number, b: number, t: number) => (
a * t + b * (1 - t)
);
const cssLerp = (a: string, b: string, t: string) => (
`${a} * ${t} + ${b} * (1 - ${t})`
);
export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
const isMobile = useIsMobile();
@ -22,10 +31,12 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
const slideAmount = easeSlide(
Math.max(0, Math.min(1, window.scrollY / (window.innerHeight / 20)))
);
triggerDiv.style.marginLeft = `calc(var(--spacing) * ${12 * slideAmount})`;
triggerDiv.style.transform = `translateX(calc(var(--spacing) * ${12 * slideAmount}))`;
triggerDiv.style.paddingTop = `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`;
triggerDiv.style.width = `calc(100% - var(--spacing) * ${lerp(0, 12, 1 - slideAmount)})`;
};
handleScroll();
window.addEventListener('scroll', handleScroll, {passive: true});
return () => {
@ -33,5 +44,5 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
};
}, [isMobile]);
return <div data-sidebar-trigger="true" {...props} className={cn("will-change-auto", props.className)}></div>;
return <div data-sidebar-trigger="true" {...props} className={props.className}></div>;
}