ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-03 15:55:07 +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(); handleScroll();
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll, {passive: true});
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);
}, [elementRef]); }, [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"; "use client";
import { useIsMobile } from "@/hooks/use-mobile"; import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { sign } from "crypto";
import { ComponentProps, useEffect, useState } from "react"; import { ComponentProps, useEffect, useState } from "react";
const easeSlide = (x: number) => ( const easeSlide = (x: number) => (
1 - Math.pow(1 - x, 3) 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">) => { export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
@ -22,10 +31,12 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
const slideAmount = easeSlide( const slideAmount = easeSlide(
Math.max(0, Math.min(1, window.scrollY / (window.innerHeight / 20))) 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.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}); window.addEventListener('scroll', handleScroll, {passive: true});
return () => { return () => {
@ -33,5 +44,5 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
}; };
}, [isMobile]); }, [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>;
} }