Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
4.3 kB · 123 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124import { useEffect, useRef } from "react";import { useWindowDimensions } from "react-native";import { SharedValue, useSharedValue, withTiming,} from "react-native-reanimated";import { useStore } from "store";import { useIsSidebarCollapsed, useIsSidebarDrawerOpen, useIsSidebarHidden, useIsSidebarOverlay, useSidebarTargetWidth,} from "store/hooks";
// Returns *true* if the screen is > 1024pxexport function useIsLargeScreen() { const { width } = useWindowDimensions(); // gtMd breakpoint return width >= 980 + 1;}
// Width of the sidebar when opened as an overlay drawer (always expanded).export const DRAWER_WIDTH = 250;
export interface UseSidebarOutput { isActive: boolean; isCollapsed: boolean; isHidden: boolean; /** Detail view (Stream/Video): sidebar overlays instead of pushing content. */ overlay: boolean; /** Whether the overlay drawer is currently shown. */ drawerOpen: boolean; /** The sidebar's own rendered width. */ animatedWidth: SharedValue<number>; /** Horizontal offset — used to slide the drawer in/out in overlay mode. */ animatedTranslateX: SharedValue<number>; /** Left margin the main content should reserve (0 in overlay mode). */ animatedContentMargin: SharedValue<number>; /** Same as above but a plain, reactive number — use where layout must react * to mode changes (e.g. the player's width) rather than animate. */ contentMargin: number; /** Scrim opacity behind the drawer (0 when docked or closed). */ animatedScrim: SharedValue<number>; toggle: () => void;}
const SCRIM_OPACITY = 0.55;
/* * useSidebarControl — controls the desktop web sidebar. * * Two modes: * - Docked (browse pages): the sidebar sits in the flow and pushes content; * toggling collapses/expands it (250 <-> 64). * - Overlay (detail pages): the sidebar leaves the flow. Content is full width; * toggling slides a 250px drawer in over a dimmed scrim. */export function useSidebarControl(): UseSidebarOutput { const toggleSidebar = useStore((state) => state.toggleSidebar); const toggleDrawer = useStore((state) => state.toggleDrawer); const isCollapsed = useIsSidebarCollapsed(); const targetWidth = useSidebarTargetWidth(); const isHidden = useIsSidebarHidden(); const overlay = useIsSidebarOverlay(); const drawerOpen = useIsSidebarDrawerOpen(); const isActive = useIsLargeScreen();
// In overlay mode the drawer is always full-width; docked uses the stored width. const width = overlay ? DRAWER_WIDTH : targetWidth;
// Initialize each value at its resting state for the current mode so a direct // load renders correctly on the first frame (no docked flash on detail views). const animatedWidth = useSharedValue(width); const animatedTranslateX = useSharedValue( overlay ? (drawerOpen ? 0 : -DRAWER_WIDTH) : 0, ); const animatedContentMargin = useSharedValue(overlay ? 0 : targetWidth); const animatedScrim = useSharedValue( overlay && drawerOpen ? SCRIM_OPACITY : 0, );
const prevOverlay = useRef(overlay); useEffect(() => { // Snap instantly when switching modes (navigating in/out of a detail view) // so the player is full width immediately — no grow-in. Only animate // changes *within* a mode: the drawer sliding, or a docked collapse/expand. const modeSwitched = prevOverlay.current !== overlay; prevOverlay.current = overlay; const anim = (v: number) => isActive && !modeSwitched ? withTiming(v, { duration: 250 }) : v; animatedWidth.value = anim(width); animatedTranslateX.value = anim( overlay ? (drawerOpen ? 0 : -DRAWER_WIDTH) : 0, ); animatedContentMargin.value = anim(overlay ? 0 : targetWidth); animatedScrim.value = anim(overlay && drawerOpen ? SCRIM_OPACITY : 0); }, [isActive, overlay, drawerOpen, targetWidth, width]);
const handleToggle = () => { if (!isActive) return; if (overlay) { toggleDrawer(); } else { toggleSidebar(); } };
return { isActive, isCollapsed, isHidden, overlay, drawerOpen, animatedWidth, animatedTranslateX, animatedContentMargin, contentMargin: isActive && !overlay ? targetWidth : 0, animatedScrim, toggle: handleToggle, };}