diff --git a/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx b/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
index e223fdb..8793c20 100644
--- a/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
+++ b/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
@@ -10,7 +10,6 @@ const lerp = (a: number, b: number, t: number) => (
a * t + b * (1 - t)
);
-
export const SidebarTriggerAdjustable = (props: ComponentProps<"div"> & {
adjustWidth?: number | `${number}`
}) => {
@@ -28,7 +27,6 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div"> & {
Math.max(0, Math.min(1, scrollPos / (window.innerHeight / 20))));
ref.current.style.transform = `translateX(calc(var(--spacing) * ${adjustWidth * slideAmount}))`;
- ref.current.style.marginTop = `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`;
ref.current.style.width = `calc(100% - var(--spacing) * ${lerp(0, adjustWidth, 1 - slideAmount)})`;
};
diff --git a/src/components/static-back-button/StaticBackButton.tsx b/src/components/static-back-button/StaticBackButton.tsx
new file mode 100644
index 0000000..65933e9
--- /dev/null
+++ b/src/components/static-back-button/StaticBackButton.tsx
@@ -0,0 +1,66 @@
+"use client";
+import { ReactNode, useEffect, useRef } from "react";
+import { SidebarTrigger } from "../ui/sidebar";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { Button } from "../ui/button";
+import { ArrowLeftIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+const easeSlide = (x: number) => (
+ 1 - Math.pow(1 - x, 3)
+);
+
+const lerp = (a: number, b: number, t: number) => (
+ a * t + b * (1 - t)
+);
+
+export const StaticBackButton = () => {
+ const isMobile = useIsMobile();
+ const router = useRouter();
+ const adjustHeight = isMobile ? -1 : 1;
+ const ref = useRef
(null);
+
+ useEffect(() => {
+ let lastKnownScrollPosition = 0;
+ let ticking = false;
+
+ const updateAdjustable = (scrollPos: number) => {
+ if (!ref.current) return;
+ const slideAmount = easeSlide(
+ Math.max(0, Math.min(1, scrollPos / (window.innerHeight / 20))));
+
+ ref.current.style.transform = `translateY(calc(var(--spacing) * ${adjustHeight * -slideAmount}))`;
+ };
+
+ const handleScroll = () => {
+ lastKnownScrollPosition = window.scrollY;
+
+ if (!ticking) {
+ window.requestAnimationFrame(() => {
+ updateAdjustable(lastKnownScrollPosition);
+ ticking = false;
+ });
+
+ ticking = true;
+ }
+ }
+
+ handleScroll();
+ window.addEventListener('scroll', handleScroll, { passive: true });
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, [isMobile, ref]);
+
+ return (
+ <>
+
+
+
router.back()} tabIndex={1}>
+
+
(null);
+
+ useEffect(() => {
+ let lastKnownScrollPosition = 0;
+ let ticking = false;
+
+ const updateAdjustable = (scrollPos: number) => {
+ if (!ref.current) return;
+ const slideAmount = easeSlide(
+ Math.max(0, Math.min(1, scrollPos / (window.innerHeight / 20))));
+
+ ref.current.style.transform = `translateY(calc(var(--spacing) * ${adjustHeight * -slideAmount}))`;
+ };
+
+ const handleScroll = () => {
+ lastKnownScrollPosition = window.scrollY;
+
+ if (!ticking) {
+ window.requestAnimationFrame(() => {
+ updateAdjustable(lastKnownScrollPosition);
+ ticking = false;
+ });
+
+ ticking = true;
+ }
+ }
+
+ handleScroll();
+ window.addEventListener('scroll', handleScroll, { passive: true });
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, [isMobile, ref]);
-export const StaticSidebarTrigger = ({
- children
-}: {
- children?: ReactNode
-}) => {
return (
<>
-
+
-
- {children}
-
-
+