@terreno/ui 0.11.5 → 0.11.6

package/dist/Common.d.ts

@@ -2533,5 +2533,18 @@ export interface SidebarNavigationPanelProps {
      * Additional styles applied to each navigation item.
      */
     itemStyle?: StyleProp<ViewStyle>;
+    /**
+     * Controlled open state. When provided, the panel hides its internal hamburger
+     * button and defers open/close to the caller.
+     *
+     * @platform mobile — the web sidebar is always visible; this prop is ignored on web.
+     */
+    isOpen?: boolean;
+    /**
+     * Called when the panel requests an open or close (controlled mode only).
+     *
+     * @platform mobile — the web sidebar is always visible; this prop is ignored on web.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
 }
 export {};

package/dist/SidebarNavigation.native.d.ts

@@ -1,22 +1,14 @@
+import { Screen } from "expo-router/build/views/Screen";
 import { type FC } from "react";
 import type { SidebarNavigationPanelProps, SidebarNavigationProps } from "./Common";
 /**
- * Renders the hamburger button, drawer overlay, and children. Works without expo-router Navigator context.
- */
-export declare const SidebarNavigationPanel: FC<SidebarNavigationPanelProps>;
-/**
- * Custom expo-router navigator with a hamburger-triggered slide-in drawer.
- * Use in _layout.tsx files:
+ * Renders the bottom sheet overlay and children. Works without expo-router Navigator context.
  *
- * ```tsx
- * export default function SidebarLayout() {
- *   return (
- *     <SidebarNavigation
- *       topItems={[{label: "Home", route: "index", iconName: "house"}]}
- *       bottomItems={[{label: "Settings", route: "settings", iconName: "gear"}]}
- *     />
- *   );
- * }
- * ```
+ * Supports two modes:
+ * - Uncontrolled (default): manages open state internally and shows a floating hamburger button.
+ * - Controlled: caller provides isOpen + onOpenChange and owns the trigger (e.g. a header button).
  */
-export declare const SidebarNavigation: FC<SidebarNavigationProps>;
+export declare const SidebarNavigationPanel: FC<SidebarNavigationPanelProps>;
+export declare const SidebarNavigation: FC<SidebarNavigationProps> & {
+    Screen: typeof Screen;
+};

package/dist/SidebarNavigation.native.js

@@ -1,18 +1,51 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { TabRouter } from "@react-navigation/native";
 import { Navigator, Slot } from "expo-router";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Animated, Dimensions, Pressable, View } from "react-native";
-import { Badge } from "./Badge";
-import { SIDEBAR_BADGE_STATUS_MAP } from "./Common";
+// Screen is not exported from expo-router's public API (exports.d.ts only exposes ScreenProps).
+// Stack.Screen and Tabs.Screen use this same internal path. If expo-router upgrades break this,
+// update the import path here — this is the only place in the codebase that references it.
+// eslint-disable-next-line import/no-internal-modules
+import { Screen } from "expo-router/build/views/Screen";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Dimensions, PanResponder, Pressable, Text as RNText, View, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Icon } from "./Icon";
 import { Text } from "./Text";
 import { useTheme } from "./Theme";
-const DRAWER_WIDTH = 280;
-const ITEM_HEIGHT = 48;
-const ICON_SIZE = 20;
+const ITEM_HEIGHT = 44;
 const BACKDROP_OPACITY = 0.5;
-const ANIMATION_DURATION = 250;
+const SIDEBAR_BADGE_SURFACE = {
+    error: "error",
+    info: "secondaryDark",
+    neutral: "neutralDark",
+    success: "success",
+    warning: "warning",
+};
+const SidebarBadge = ({ badge, status }) => {
+    const { theme } = useTheme();
+    const backgroundColor = theme.surface[SIDEBAR_BADGE_SURFACE[status]];
+    const isDot = badge === true;
+    if (isDot) {
+        return _jsx(View, { style: { backgroundColor, borderRadius: 999, height: 18, width: 18 } });
+    }
+    const value = Number(badge) > 9 ? "9+" : String(badge);
+    return (_jsx(View, { style: {
+            alignItems: "center",
+            backgroundColor,
+            borderRadius: 999,
+            height: 18,
+            justifyContent: "center",
+            minWidth: 18,
+            paddingHorizontal: 4,
+        }, children: _jsx(RNText, { style: {
+                color: "#FFFFFF",
+                fontSize: 11,
+                fontWeight: "700",
+                lineHeight: 12,
+            }, children: value }) }));
+};
+const ANIMATION_DURATION = 300;
+const DISMISS_THRESHOLD = 0.3;
 const SidebarItem = ({ item, isActive, onPress, itemStyle }) => {
     var _a;
     const { theme } = useTheme();
@@ -22,136 +55,195 @@ const SidebarItem = ({ item, isActive, onPress, itemStyle }) => {
     return (_jsxs(Pressable, { accessibilityLabel: item.label, accessibilityRole: "button", onPress: handlePress, style: [
             {
                 alignItems: "center",
-                backgroundColor: isActive ? theme.surface.secondaryLight : "transparent",
+                backgroundColor: isActive ? theme.surface.neutralLight : "transparent",
                 borderRadius: theme.radius.default,
                 flexDirection: "row",
-                gap: 14,
+                gap: 12,
                 height: ITEM_HEIGHT,
-                marginHorizontal: 12,
-                paddingHorizontal: 14,
+                marginHorizontal: 8,
+                paddingHorizontal: 12,
             },
             itemStyle,
-        ], children: [_jsxs(View, { style: { alignItems: "center", justifyContent: "center", width: ICON_SIZE }, children: [_jsx(Icon, { color: isActive ? "primary" : "secondaryDark", iconName: item.iconName, size: "md" }), Boolean(item.badge) && (_jsx(View, { style: {
-                            bottom: item.badge === true ? -4 : undefined,
-                            position: "absolute",
-                            right: -6,
-                            top: item.badge === true ? undefined : -4,
-                        }, children: _jsx(Badge, { maxValue: 99, status: SIDEBAR_BADGE_STATUS_MAP[(_a = item.badgeStatus) !== null && _a !== void 0 ? _a : "error"], value: item.badge === true ? undefined : String(item.badge), variant: item.badge === true ? "iconOnly" : "numberOnly" }) }))] }), _jsx(Text, { bold: isActive, color: isActive ? "primary" : "secondaryDark", size: "md", children: item.label })] }));
+        ], children: [_jsxs(View, { style: { alignItems: "center", height: 40, justifyContent: "center", width: 40 }, children: [_jsx(Icon, { color: isActive ? "primary" : "secondaryLight", iconName: item.iconName, size: "xl" }), item.badge !== undefined && item.badge !== false && (_jsx(View, { style: { bottom: 0, position: "absolute", right: 0 }, children: _jsx(SidebarBadge, { badge: item.badge, status: (_a = item.badgeStatus) !== null && _a !== void 0 ? _a : "success" }) }))] }), _jsx(Text, { bold: isActive, color: isActive ? "primary" : "secondaryLight", size: "lg", children: item.label })] }));
 };
+const SidebarHamburger = ({ onOpen }) => (_jsx(Pressable, { accessibilityLabel: "Open navigation menu", accessibilityRole: "button", onPress: onOpen, style: { alignItems: "center", height: 40, justifyContent: "center", width: 40 }, children: _jsx(Icon, { color: "primary", iconName: "bars", size: "md" }) }));
 /**
- * Renders the hamburger button, drawer overlay, and children. Works without expo-router Navigator context.
+ * Renders the bottom sheet overlay and children. Works without expo-router Navigator context.
+ *
+ * Supports two modes:
+ * - Uncontrolled (default): manages open state internally and shows a floating hamburger button.
+ * - Controlled: caller provides isOpen + onOpenChange and owns the trigger (e.g. a header button).
  */
-export const SidebarNavigationPanel = ({ topItems, bottomItems, activeRoute, onNavigate, children, panelStyle, itemStyle, }) => {
+export const SidebarNavigationPanel = ({ topItems, bottomItems, activeRoute, onNavigate, children, panelStyle, itemStyle, isOpen: isOpenProp, onOpenChange, }) => {
     const { theme } = useTheme();
-    const [isOpen, setIsOpen] = useState(false);
-    const slideAnim = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
+    const insets = useSafeAreaInsets();
+    const isControlled = isOpenProp !== undefined;
+    const [isOpenInternal, setIsOpenInternal] = useState(false);
+    const isOpen = isControlled ? isOpenProp : isOpenInternal;
+    const sheetHeight = useMemo(() => Dimensions.get("window").height * 0.65, []);
+    const slideAnim = useRef(new Animated.Value(sheetHeight)).current;
     const backdropAnim = useRef(new Animated.Value(0)).current;
-    // Animate drawer open/close
+    const capturedSlideValue = useRef(0);
+    // Play open animation whenever isOpen becomes true
     useEffect(() => {
-        if (isOpen) {
-            Animated.parallel([
-                Animated.timing(slideAnim, {
-                    duration: ANIMATION_DURATION,
-                    toValue: 0,
-                    useNativeDriver: true,
-                }),
-                Animated.timing(backdropAnim, {
-                    duration: ANIMATION_DURATION,
-                    toValue: BACKDROP_OPACITY,
-                    useNativeDriver: true,
-                }),
-            ]).start();
+        if (!isOpen) {
+            return;
+        }
+        slideAnim.setValue(sheetHeight);
+        backdropAnim.setValue(0);
+        Animated.parallel([
+            Animated.timing(slideAnim, {
+                duration: ANIMATION_DURATION,
+                toValue: 0,
+                useNativeDriver: true,
+            }),
+            Animated.timing(backdropAnim, {
+                duration: ANIMATION_DURATION,
+                toValue: BACKDROP_OPACITY,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    }, [isOpen, slideAnim, backdropAnim, sheetHeight]);
+    // Play close animation then update state
+    const handleClose = useCallback(() => {
+        Animated.parallel([
+            Animated.timing(slideAnim, {
+                duration: ANIMATION_DURATION,
+                toValue: sheetHeight,
+                useNativeDriver: true,
+            }),
+            Animated.timing(backdropAnim, {
+                duration: ANIMATION_DURATION,
+                toValue: 0,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            if (isControlled) {
+                onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+            }
+            else {
+                setIsOpenInternal(false);
+            }
+        });
+    }, [isControlled, onOpenChange, slideAnim, backdropAnim, sheetHeight]);
+    const handleOpen = useCallback(() => {
+        if (isControlled) {
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
         }
         else {
-            Animated.parallel([
-                Animated.timing(slideAnim, {
-                    duration: ANIMATION_DURATION,
-                    toValue: -DRAWER_WIDTH,
-                    useNativeDriver: true,
-                }),
-                Animated.timing(backdropAnim, {
-                    duration: ANIMATION_DURATION,
-                    toValue: 0,
-                    useNativeDriver: true,
-                }),
-            ]).start();
+            setIsOpenInternal(true);
         }
-    }, [isOpen, slideAnim, backdropAnim]);
-    const handleOpen = useCallback(() => setIsOpen(true), []);
-    const handleClose = useCallback(() => setIsOpen(false), []);
+    }, [isControlled, onOpenChange]);
     const handleNavigate = useCallback((route) => {
-        setIsOpen(false);
+        handleClose();
         onNavigate(route);
-    }, [onNavigate]);
-    const screenHeight = Dimensions.get("window").height;
-    return (_jsxs(View, { style: { flex: 1 }, children: [children, _jsx(Pressable, { accessibilityLabel: "Open navigation menu", accessibilityRole: "button", onPress: handleOpen, style: {
+    }, [handleClose, onNavigate]);
+    const panResponder = useMemo(() => PanResponder.create({
+        onMoveShouldSetPanResponder: (_, { dx, dy }) => Math.abs(dy) > Math.abs(dx) && dy > 4,
+        onPanResponderGrant: () => {
+            slideAnim.stopAnimation((value) => {
+                capturedSlideValue.current = value;
+            });
+            backdropAnim.stopAnimation();
+        },
+        onPanResponderMove: (_, { dy }) => {
+            const next = capturedSlideValue.current + dy;
+            if (next < 0) {
+                return;
+            }
+            slideAnim.setValue(next);
+            backdropAnim.setValue(BACKDROP_OPACITY * Math.max(0, 1 - next / sheetHeight));
+        },
+        onPanResponderRelease: (_, { dy, vy }) => {
+            if (dy > sheetHeight * DISMISS_THRESHOLD || vy > 0.5) {
+                handleClose();
+            }
+            else {
+                Animated.parallel([
+                    Animated.timing(slideAnim, {
+                        duration: 200,
+                        toValue: 0,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(backdropAnim, {
+                        duration: 200,
+                        toValue: BACKDROP_OPACITY,
+                        useNativeDriver: true,
+                    }),
+                ]).start();
+            }
+        },
+    }), [slideAnim, backdropAnim, sheetHeight, handleClose]);
+    return (_jsxs(View, { style: { flex: 1 }, children: [children, !isControlled && (_jsx(Pressable, { accessibilityLabel: "Open navigation menu", accessibilityRole: "button", onPress: handleOpen, style: {
                     alignItems: "center",
-                    backgroundColor: theme.surface.primary,
-                    borderRadius: theme.radius.full,
-                    elevation: 4,
                     height: 44,
                     justifyContent: "center",
                     left: 16,
                     position: "absolute",
-                    shadowColor: "#000",
-                    shadowOffset: { height: 2, width: 0 },
-                    shadowOpacity: 0.25,
-                    shadowRadius: 4,
-                    top: 16,
+                    top: insets.top + 16,
                     width: 44,
                     zIndex: 10,
-                }, children: _jsx(Icon, { color: "inverted", iconName: "bars", size: "md" }) }), isOpen && (_jsx(Pressable, { onPress: handleClose, style: {
-                    bottom: 0,
-                    left: 0,
-                    position: "absolute",
-                    right: 0,
-                    top: 0,
-                    zIndex: 100,
-                }, children: _jsx(Animated.View, { style: {
-                        backgroundColor: "#000",
-                        flex: 1,
-                        opacity: backdropAnim,
-                    } }) })), _jsxs(Animated.View, { style: [
-                    {
-                        backgroundColor: theme.surface.base,
-                        borderColor: theme.border.default,
-                        borderRightWidth: 1,
-                        height: screenHeight,
-                        justifyContent: "space-between",
+                }, children: _jsx(Icon, { color: "primary", iconName: "bars", size: "md" }) })), isOpen && (_jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: handleClose, style: { bottom: 0, left: 0, position: "absolute", right: 0, top: 0, zIndex: 100 }, children: _jsx(Animated.View, { style: { backgroundColor: "#000", flex: 1, opacity: backdropAnim } }) }), _jsxs(Animated.View, { style: [
+                            {
+                                backgroundColor: theme.surface.base,
+                                borderTopLeftRadius: 16,
+                                borderTopRightRadius: 16,
+                                bottom: 0,
+                                height: sheetHeight,
+                                left: 0,
+                                position: "absolute",
+                                right: 0,
+                                transform: [{ translateY: slideAnim }],
+                                zIndex: 200,
+                            },
+                            panelStyle,
+                        ], children: [_jsx(View, Object.assign({}, panResponder.panHandlers, { accessibilityHint: "Drag down to close", accessibilityLabel: "Navigation menu drag handle", accessibilityRole: "adjustable", style: { alignItems: "center", paddingBottom: 8, paddingTop: 12 }, children: _jsx(View, { style: {
+                                        backgroundColor: theme.border.default,
+                                        borderRadius: 2,
+                                        height: 4,
+                                        width: 36,
+                                    } }) })), _jsx(View, { style: { gap: 4, paddingBottom: insets.bottom + 8 }, children: [...topItems, ...bottomItems].map((item) => (_jsx(SidebarItem, { isActive: activeRoute === item.route, item: item, itemStyle: itemStyle, onPress: handleNavigate }, item.label))) })] })] }))] }));
+};
+const SidebarHeader = ({ onOpen }) => {
+    var _a, _b;
+    const { theme } = useTheme();
+    const insets = useSafeAreaInsets();
+    const { state, descriptors } = Navigator.useContext();
+    const activeRoute = state.routes[state.index];
+    const { headerLeft, headerRight, title } = ((_b = (_a = descriptors[activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.key]) === null || _a === void 0 ? void 0 : _a.options) !== null && _b !== void 0 ? _b : {});
+    return (_jsx(View, { style: {
+            backgroundColor: theme.surface.base,
+            borderBottomColor: theme.border.default,
+            borderBottomWidth: 1,
+            paddingTop: insets.top,
+        }, children: _jsxs(View, { style: {
+                alignItems: "center",
+                flexDirection: "row",
+                height: 44,
+                justifyContent: "space-between",
+                paddingHorizontal: 16,
+            }, children: [_jsxs(View, { style: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [_jsx(SidebarHamburger, { onOpen: onOpen }), headerLeft === null || headerLeft === void 0 ? void 0 : headerLeft({})] }), Boolean(title) && (_jsx(View, { pointerEvents: "none", style: {
+                        alignItems: "center",
+                        bottom: 0,
+                        justifyContent: "center",
                         left: 0,
-                        paddingBottom: 32,
-                        paddingTop: 20,
                         position: "absolute",
+                        right: 0,
                         top: 0,
-                        transform: [{ translateX: slideAnim }],
-                        width: DRAWER_WIDTH,
-                        zIndex: 200,
-                    },
-                    panelStyle,
-                ], children: [_jsxs(View, { children: [_jsx(Pressable, { accessibilityLabel: "Close navigation menu", accessibilityRole: "button", onPress: handleClose, style: {
-                                    alignItems: "center",
-                                    alignSelf: "flex-end",
-                                    height: 40,
-                                    justifyContent: "center",
-                                    marginRight: 12,
-                                    width: 40,
-                                }, children: _jsx(Icon, { color: "secondaryDark", iconName: "xmark", size: "md" }) }), _jsx(View, { style: { gap: 4, marginTop: 8 }, children: topItems.map((item) => (_jsx(SidebarItem, { isActive: activeRoute === item.route, item: item, itemStyle: itemStyle, onPress: handleNavigate }, item.route))) })] }), _jsx(View, { style: { gap: 4 }, children: bottomItems.map((item) => (_jsx(SidebarItem, { isActive: activeRoute === item.route, item: item, onPress: handleNavigate }, item.route))) })] })] }));
+                    }, children: _jsx(Text, { bold: true, size: "lg", children: title }) })), Boolean(headerRight) && _jsx(View, { style: { alignItems: "flex-end" }, children: headerRight === null || headerRight === void 0 ? void 0 : headerRight({}) })] }) }));
 };
-/**
- * Reads active route from Navigator context and renders the drawer + Slot.
- */
-const SidebarNavigatorContent = ({ topItems, bottomItems, onNavigate, panelStyle, itemStyle }) => {
-    var _a;
+/** Renders the content panel and bottom sheet for the active screen. */
+const SidebarNavigatorContent = ({ topItems, bottomItems, isOpen, onOpenChange, onNavigate, panelStyle, itemStyle }) => {
     const { state, navigation } = Navigator.useContext();
-    const activeRoute = (_a = state.routes[state.index]) === null || _a === void 0 ? void 0 : _a.name;
+    const activeRoute = state.routes[state.index];
     const handleNavigate = useCallback((route) => {
         navigation.navigate(route);
         onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(route);
     }, [navigation, onNavigate]);
-    return (_jsx(SidebarNavigationPanel, { activeRoute: activeRoute, bottomItems: bottomItems, itemStyle: itemStyle, onNavigate: handleNavigate, panelStyle: panelStyle, topItems: topItems, children: _jsx(Slot, {}) }));
+    return (_jsx(SidebarNavigationPanel, { activeRoute: activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.name, bottomItems: bottomItems, isOpen: isOpen, itemStyle: itemStyle, onNavigate: handleNavigate, onOpenChange: onOpenChange, panelStyle: panelStyle, topItems: topItems, children: _jsx(Slot, {}) }));
 };
 /**
- * Custom expo-router navigator with a hamburger-triggered slide-in drawer.
+ * Custom expo-router navigator with a header bar and hamburger-triggered bottom sheet.
  * Use in _layout.tsx files:
  *
  * ```tsx
@@ -165,7 +257,9 @@ const SidebarNavigatorContent = ({ topItems, bottomItems, onNavigate, panelStyle
  * }
  * ```
  */
-export const SidebarNavigation = ({ topItems, bottomItems, onNavigate, initialRouteName, screenOptions, panelStyle, itemStyle, }) => {
-    return (_jsx(Navigator, { initialRouteName: initialRouteName, router: TabRouter, screenOptions: screenOptions, children: _jsx(SidebarNavigatorContent, { bottomItems: bottomItems, itemStyle: itemStyle, onNavigate: onNavigate, panelStyle: panelStyle, topItems: topItems }) }));
+const SidebarNavigationBase = ({ topItems, bottomItems, onNavigate, initialRouteName, screenOptions, panelStyle, itemStyle, children, }) => {
+    const [isSheetOpen, setIsSheetOpen] = useState(false);
+    return (_jsxs(Navigator, { initialRouteName: initialRouteName, router: TabRouter, screenOptions: screenOptions, children: [_jsxs(View, { style: { flex: 1 }, children: [_jsx(SidebarHeader, { onOpen: () => setIsSheetOpen(true) }), _jsx(SidebarNavigatorContent, { bottomItems: bottomItems, isOpen: isSheetOpen, itemStyle: itemStyle, onNavigate: onNavigate, onOpenChange: setIsSheetOpen, panelStyle: panelStyle, topItems: topItems })] }), children] }));
 };
+export const SidebarNavigation = Object.assign(SidebarNavigationBase, { Screen });
 //# sourceMappingURL=SidebarNavigation.native.js.map

package/dist/SidebarNavigation.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavigation.native.js","sourceRoot":"","sources":["../src/SidebarNavigation.native.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SidebarNavigation.native.js","sourceRoot":"","sources":["../src/SidebarNavigation.native.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -137,5 +137,5 @@
     "test:coverage": "TZ=America/New_York bun run ../scripts/check-coverage.ts",
     "types": "bun typedoc"
   },
-  "version": "0.11.5"
+  "version": "0.11.6"
 }

package/src/Common.ts

@@ -3044,4 +3044,17 @@ export interface SidebarNavigationPanelProps {
    * Additional styles applied to each navigation item.
    */
   itemStyle?: StyleProp<ViewStyle>;
+  /**
+   * Controlled open state. When provided, the panel hides its internal hamburger
+   * button and defers open/close to the caller.
+   *
+   * @platform mobile — the web sidebar is always visible; this prop is ignored on web.
+   */
+  isOpen?: boolean;
+  /**
+   * Called when the panel requests an open or close (controlled mode only).
+   *
+   * @platform mobile — the web sidebar is always visible; this prop is ignored on web.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
 }

package/src/SidebarNavigation.native.tsx

@@ -1,24 +1,84 @@
 import {TabRouter} from "@react-navigation/native";
 import {Navigator, Slot} from "expo-router";
-import {type FC, useCallback, useEffect, useRef, useState} from "react";
-import {Animated, Dimensions, Pressable, type StyleProp, View, type ViewStyle} from "react-native";
+// Screen is not exported from expo-router's public API (exports.d.ts only exposes ScreenProps).
+// Stack.Screen and Tabs.Screen use this same internal path. If expo-router upgrades break this,
+// update the import path here — this is the only place in the codebase that references it.
+// eslint-disable-next-line import/no-internal-modules
+import {Screen} from "expo-router/build/views/Screen";
+import {type FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {
+  Animated,
+  Dimensions,
+  PanResponder,
+  Pressable,
+  Text as RNText,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from "react-native";
+import {useSafeAreaInsets} from "react-native-safe-area-context";
 
-import {Badge} from "./Badge";
 import type {
+  SidebarBadgeStatus,
   SidebarNavigationItem,
   SidebarNavigationPanelProps,
   SidebarNavigationProps,
+  SurfaceTheme,
 } from "./Common";
-import {SIDEBAR_BADGE_STATUS_MAP} from "./Common";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
 import {useTheme} from "./Theme";
 
-const DRAWER_WIDTH = 280;
-const ITEM_HEIGHT = 48;
-const ICON_SIZE = 20;
+const ITEM_HEIGHT = 44;
 const BACKDROP_OPACITY = 0.5;
-const ANIMATION_DURATION = 250;
+
+const SIDEBAR_BADGE_SURFACE: Record<SidebarBadgeStatus, keyof SurfaceTheme> = {
+  error: "error",
+  info: "secondaryDark",
+  neutral: "neutralDark",
+  success: "success",
+  warning: "warning",
+};
+
+const SidebarBadge: FC<{badge: number | true; status: SidebarBadgeStatus}> = ({badge, status}) => {
+  const {theme} = useTheme();
+  const backgroundColor = theme.surface[SIDEBAR_BADGE_SURFACE[status]];
+  const isDot = badge === true;
+
+  if (isDot) {
+    return <View style={{backgroundColor, borderRadius: 999, height: 18, width: 18}} />;
+  }
+
+  const value = Number(badge) > 9 ? "9+" : String(badge);
+
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        backgroundColor,
+        borderRadius: 999,
+        height: 18,
+        justifyContent: "center",
+        minWidth: 18,
+        paddingHorizontal: 4,
+      }}
+    >
+      <RNText
+        style={{
+          color: "#FFFFFF",
+          fontSize: 11,
+          fontWeight: "700",
+          lineHeight: 12,
+        }}
+      >
+        {value}
+      </RNText>
+    </View>
+  );
+};
+
+const ANIMATION_DURATION = 300;
+const DISMISS_THRESHOLD = 0.3;
 
 const SidebarItem: FC<{
   item: SidebarNavigationItem;
@@ -40,46 +100,49 @@ const SidebarItem: FC<{
       style={[
         {
           alignItems: "center",
-          backgroundColor: isActive ? theme.surface.secondaryLight : "transparent",
+          backgroundColor: isActive ? theme.surface.neutralLight : "transparent",
           borderRadius: theme.radius.default,
           flexDirection: "row",
-          gap: 14,
+          gap: 12,
           height: ITEM_HEIGHT,
-          marginHorizontal: 12,
-          paddingHorizontal: 14,
+          marginHorizontal: 8,
+          paddingHorizontal: 12,
         },
         itemStyle,
       ]}
     >
-      <View style={{alignItems: "center", justifyContent: "center", width: ICON_SIZE}}>
-        <Icon color={isActive ? "primary" : "secondaryDark"} iconName={item.iconName} size="md" />
-        {Boolean(item.badge) && (
-          <View
-            style={{
-              bottom: item.badge === true ? -4 : undefined,
-              position: "absolute",
-              right: -6,
-              top: item.badge === true ? undefined : -4,
-            }}
-          >
-            <Badge
-              maxValue={99}
-              status={SIDEBAR_BADGE_STATUS_MAP[item.badgeStatus ?? "error"]}
-              value={item.badge === true ? undefined : String(item.badge)}
-              variant={item.badge === true ? "iconOnly" : "numberOnly"}
-            />
+      <View style={{alignItems: "center", height: 40, justifyContent: "center", width: 40}}>
+        <Icon color={isActive ? "primary" : "secondaryLight"} iconName={item.iconName} size="xl" />
+        {item.badge !== undefined && item.badge !== false && (
+          <View style={{bottom: 0, position: "absolute", right: 0}}>
+            <SidebarBadge badge={item.badge} status={item.badgeStatus ?? "success"} />
           </View>
         )}
       </View>
-      <Text bold={isActive} color={isActive ? "primary" : "secondaryDark"} size="md">
+      <Text bold={isActive} color={isActive ? "primary" : "secondaryLight"} size="lg">
         {item.label}
       </Text>
     </Pressable>
   );
 };
 
+const SidebarHamburger: FC<{onOpen: () => void}> = ({onOpen}) => (
+  <Pressable
+    accessibilityLabel="Open navigation menu"
+    accessibilityRole="button"
+    onPress={onOpen}
+    style={{alignItems: "center", height: 40, justifyContent: "center", width: 40}}
+  >
+    <Icon color="primary" iconName="bars" size="md" />
+  </Pressable>
+);
+
 /**
- * Renders the hamburger button, drawer overlay, and children. Works without expo-router Navigator context.
+ * Renders the bottom sheet overlay and children. Works without expo-router Navigator context.
+ *
+ * Supports two modes:
+ * - Uncontrolled (default): manages open state internally and shows a floating hamburger button.
+ * - Controlled: caller provides isOpen + onOpenChange and owns the trigger (e.g. a header button).
  */
 export const SidebarNavigationPanel: FC<SidebarNavigationPanelProps> = ({
   topItems,
@@ -89,187 +152,275 @@ export const SidebarNavigationPanel: FC<SidebarNavigationPanelProps> = ({
   children,
   panelStyle,
   itemStyle,
+  isOpen: isOpenProp,
+  onOpenChange,
 }) => {
   const {theme} = useTheme();
-  const [isOpen, setIsOpen] = useState(false);
-  const slideAnim = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
+  const insets = useSafeAreaInsets();
+  const isControlled = isOpenProp !== undefined;
+  const [isOpenInternal, setIsOpenInternal] = useState(false);
+  const isOpen = isControlled ? isOpenProp : isOpenInternal;
+
+  const sheetHeight = useMemo(() => Dimensions.get("window").height * 0.65, []);
+  const slideAnim = useRef(new Animated.Value(sheetHeight)).current;
   const backdropAnim = useRef(new Animated.Value(0)).current;
+  const capturedSlideValue = useRef(0);
 
-  // Animate drawer open/close
+  // Play open animation whenever isOpen becomes true
   useEffect(() => {
-    if (isOpen) {
-      Animated.parallel([
-        Animated.timing(slideAnim, {
-          duration: ANIMATION_DURATION,
-          toValue: 0,
-          useNativeDriver: true,
-        }),
-        Animated.timing(backdropAnim, {
-          duration: ANIMATION_DURATION,
-          toValue: BACKDROP_OPACITY,
-          useNativeDriver: true,
-        }),
-      ]).start();
-    } else {
-      Animated.parallel([
-        Animated.timing(slideAnim, {
-          duration: ANIMATION_DURATION,
-          toValue: -DRAWER_WIDTH,
-          useNativeDriver: true,
-        }),
-        Animated.timing(backdropAnim, {
-          duration: ANIMATION_DURATION,
-          toValue: 0,
-          useNativeDriver: true,
-        }),
-      ]).start();
+    if (!isOpen) {
+      return;
     }
-  }, [isOpen, slideAnim, backdropAnim]);
+    slideAnim.setValue(sheetHeight);
+    backdropAnim.setValue(0);
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        duration: ANIMATION_DURATION,
+        toValue: 0,
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdropAnim, {
+        duration: ANIMATION_DURATION,
+        toValue: BACKDROP_OPACITY,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [isOpen, slideAnim, backdropAnim, sheetHeight]);
 
-  const handleOpen = useCallback(() => setIsOpen(true), []);
-  const handleClose = useCallback(() => setIsOpen(false), []);
+  // Play close animation then update state
+  const handleClose = useCallback(() => {
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        duration: ANIMATION_DURATION,
+        toValue: sheetHeight,
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdropAnim, {
+        duration: ANIMATION_DURATION,
+        toValue: 0,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      if (isControlled) {
+        onOpenChange?.(false);
+      } else {
+        setIsOpenInternal(false);
+      }
+    });
+  }, [isControlled, onOpenChange, slideAnim, backdropAnim, sheetHeight]);
+
+  const handleOpen = useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(true);
+    } else {
+      setIsOpenInternal(true);
+    }
+  }, [isControlled, onOpenChange]);
 
   const handleNavigate = useCallback(
     (route: string) => {
-      setIsOpen(false);
+      handleClose();
       onNavigate(route);
     },
-    [onNavigate]
+    [handleClose, onNavigate]
   );
 
-  const screenHeight = Dimensions.get("window").height;
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_, {dx, dy}) => Math.abs(dy) > Math.abs(dx) && dy > 4,
+        onPanResponderGrant: () => {
+          slideAnim.stopAnimation((value) => {
+            capturedSlideValue.current = value;
+          });
+          backdropAnim.stopAnimation();
+        },
+        onPanResponderMove: (_, {dy}) => {
+          const next = capturedSlideValue.current + dy;
+          if (next < 0) {
+            return;
+          }
+          slideAnim.setValue(next);
+          backdropAnim.setValue(BACKDROP_OPACITY * Math.max(0, 1 - next / sheetHeight));
+        },
+        onPanResponderRelease: (_, {dy, vy}) => {
+          if (dy > sheetHeight * DISMISS_THRESHOLD || vy > 0.5) {
+            handleClose();
+          } else {
+            Animated.parallel([
+              Animated.timing(slideAnim, {
+                duration: 200,
+                toValue: 0,
+                useNativeDriver: true,
+              }),
+              Animated.timing(backdropAnim, {
+                duration: 200,
+                toValue: BACKDROP_OPACITY,
+                useNativeDriver: true,
+              }),
+            ]).start();
+          }
+        },
+      }),
+    [slideAnim, backdropAnim, sheetHeight, handleClose]
+  );
 
   return (
     <View style={{flex: 1}}>
       {children}
 
-      {/* Hamburger button */}
-      <Pressable
-        accessibilityLabel="Open navigation menu"
-        accessibilityRole="button"
-        onPress={handleOpen}
-        style={{
-          alignItems: "center",
-          backgroundColor: theme.surface.primary,
-          borderRadius: theme.radius.full,
-          elevation: 4,
-          height: 44,
-          justifyContent: "center",
-          left: 16,
-          position: "absolute",
-          shadowColor: "#000",
-          shadowOffset: {height: 2, width: 0},
-          shadowOpacity: 0.25,
-          shadowRadius: 4,
-          top: 16,
-          width: 44,
-          zIndex: 10,
-        }}
-      >
-        <Icon color="inverted" iconName="bars" size="md" />
-      </Pressable>
-
-      {/* Backdrop */}
-      {isOpen && (
+      {/* Floating hamburger — only shown in uncontrolled (standalone) mode */}
+      {!isControlled && (
         <Pressable
-          onPress={handleClose}
+          accessibilityLabel="Open navigation menu"
+          accessibilityRole="button"
+          onPress={handleOpen}
           style={{
-            bottom: 0,
-            left: 0,
+            alignItems: "center",
+            height: 44,
+            justifyContent: "center",
+            left: 16,
             position: "absolute",
-            right: 0,
-            top: 0,
-            zIndex: 100,
+            top: insets.top + 16,
+            width: 44,
+            zIndex: 10,
           }}
         >
-          <Animated.View
-            style={{
-              backgroundColor: "#000",
-              flex: 1,
-              opacity: backdropAnim,
-            }}
-          />
+          <Icon color="primary" iconName="bars" size="md" />
         </Pressable>
       )}
 
-      {/* Drawer */}
-      <Animated.View
-        style={[
-          {
-            backgroundColor: theme.surface.base,
-            borderColor: theme.border.default,
-            borderRightWidth: 1,
-            height: screenHeight,
-            justifyContent: "space-between",
-            left: 0,
-            paddingBottom: 32,
-            paddingTop: 20,
-            position: "absolute",
-            top: 0,
-            transform: [{translateX: slideAnim}],
-            width: DRAWER_WIDTH,
-            zIndex: 200,
-          },
-          panelStyle,
-        ]}
-      >
-        {/* Close button */}
-        <View>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
           <Pressable
-            accessibilityLabel="Close navigation menu"
-            accessibilityRole="button"
+            accessibilityElementsHidden
             onPress={handleClose}
+            style={{bottom: 0, left: 0, position: "absolute", right: 0, top: 0, zIndex: 100}}
+          >
+            <Animated.View style={{backgroundColor: "#000", flex: 1, opacity: backdropAnim}} />
+          </Pressable>
+
+          {/* Bottom sheet */}
+          <Animated.View
+            style={[
+              {
+                backgroundColor: theme.surface.base,
+                borderTopLeftRadius: 16,
+                borderTopRightRadius: 16,
+                bottom: 0,
+                height: sheetHeight,
+                left: 0,
+                position: "absolute",
+                right: 0,
+                transform: [{translateY: slideAnim}],
+                zIndex: 200,
+              },
+              panelStyle,
+            ]}
+          >
+            {/* Drag bar */}
+            <View
+              {...panResponder.panHandlers}
+              accessibilityHint="Drag down to close"
+              accessibilityLabel="Navigation menu drag handle"
+              accessibilityRole="adjustable"
+              style={{alignItems: "center", paddingBottom: 8, paddingTop: 12}}
+            >
+              <View
+                style={{
+                  backgroundColor: theme.border.default,
+                  borderRadius: 2,
+                  height: 4,
+                  width: 36,
+                }}
+              />
+            </View>
+
+            {/* Nav items */}
+            <View style={{gap: 4, paddingBottom: insets.bottom + 8}}>
+              {[...topItems, ...bottomItems].map((item) => (
+                <SidebarItem
+                  isActive={activeRoute === item.route}
+                  item={item}
+                  itemStyle={itemStyle}
+                  key={item.label}
+                  onPress={handleNavigate}
+                />
+              ))}
+            </View>
+          </Animated.View>
+        </>
+      )}
+    </View>
+  );
+};
+
+const SidebarHeader: FC<{onOpen: () => void}> = ({onOpen}) => {
+  const {theme} = useTheme();
+  const insets = useSafeAreaInsets();
+  const {state, descriptors} = Navigator.useContext();
+  const activeRoute = state.routes[state.index];
+  const {headerLeft, headerRight, title} = (descriptors[activeRoute?.key]?.options ?? {}) as any;
+
+  return (
+    <View
+      style={{
+        backgroundColor: theme.surface.base,
+        borderBottomColor: theme.border.default,
+        borderBottomWidth: 1,
+        paddingTop: insets.top,
+      }}
+    >
+      <View
+        style={{
+          alignItems: "center",
+          flexDirection: "row",
+          height: 44,
+          justifyContent: "space-between",
+          paddingHorizontal: 16,
+        }}
+      >
+        <View style={{alignItems: "center", flexDirection: "row", gap: 12}}>
+          <SidebarHamburger onOpen={onOpen} />
+          {headerLeft?.({})}
+        </View>
+        {Boolean(title) && (
+          <View
+            pointerEvents="none"
             style={{
               alignItems: "center",
-              alignSelf: "flex-end",
-              height: 40,
+              bottom: 0,
               justifyContent: "center",
-              marginRight: 12,
-              width: 40,
+              left: 0,
+              position: "absolute",
+              right: 0,
+              top: 0,
             }}
           >
-            <Icon color="secondaryDark" iconName="xmark" size="md" />
-          </Pressable>
-          <View style={{gap: 4, marginTop: 8}}>
-            {topItems.map((item) => (
-              <SidebarItem
-                isActive={activeRoute === item.route}
-                item={item}
-                itemStyle={itemStyle}
-                key={item.route}
-                onPress={handleNavigate}
-              />
-            ))}
+            <Text bold size="lg">
+              {title}
+            </Text>
           </View>
-        </View>
-
-        <View style={{gap: 4}}>
-          {bottomItems.map((item) => (
-            <SidebarItem
-              isActive={activeRoute === item.route}
-              item={item}
-              key={item.route}
-              onPress={handleNavigate}
-            />
-          ))}
-        </View>
-      </Animated.View>
+        )}
+        {Boolean(headerRight) && <View style={{alignItems: "flex-end"}}>{headerRight?.({})}</View>}
+      </View>
     </View>
   );
 };
 
-/**
- * Reads active route from Navigator context and renders the drawer + Slot.
- */
+/** Renders the content panel and bottom sheet for the active screen. */
 const SidebarNavigatorContent: FC<{
   topItems: SidebarNavigationItem[];
   bottomItems: SidebarNavigationItem[];
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
   onNavigate?: (route: string) => void;
   panelStyle?: StyleProp<ViewStyle>;
   itemStyle?: StyleProp<ViewStyle>;
-}> = ({topItems, bottomItems, onNavigate, panelStyle, itemStyle}) => {
+}> = ({topItems, bottomItems, isOpen, onOpenChange, onNavigate, panelStyle, itemStyle}) => {
   const {state, navigation} = Navigator.useContext();
-  const activeRoute = state.routes[state.index]?.name;
+  const activeRoute = state.routes[state.index];
 
   const handleNavigate = useCallback(
     (route: string) => {
@@ -281,10 +432,12 @@ const SidebarNavigatorContent: FC<{
 
   return (
     <SidebarNavigationPanel
-      activeRoute={activeRoute}
+      activeRoute={activeRoute?.name}
       bottomItems={bottomItems}
+      isOpen={isOpen}
       itemStyle={itemStyle}
       onNavigate={handleNavigate}
+      onOpenChange={onOpenChange}
       panelStyle={panelStyle}
       topItems={topItems}
     >
@@ -294,7 +447,7 @@ const SidebarNavigatorContent: FC<{
 };
 
 /**
- * Custom expo-router navigator with a hamburger-triggered slide-in drawer.
+ * Custom expo-router navigator with a header bar and hamburger-triggered bottom sheet.
  * Use in _layout.tsx files:
  *
  * ```tsx
@@ -308,7 +461,7 @@ const SidebarNavigatorContent: FC<{
  * }
  * ```
  */
-export const SidebarNavigation: FC<SidebarNavigationProps> = ({
+const SidebarNavigationBase: FC<SidebarNavigationProps> = ({
   topItems,
   bottomItems,
   onNavigate,
@@ -316,16 +469,27 @@ export const SidebarNavigation: FC<SidebarNavigationProps> = ({
   screenOptions,
   panelStyle,
   itemStyle,
+  children,
 }) => {
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+
   return (
     <Navigator initialRouteName={initialRouteName} router={TabRouter} screenOptions={screenOptions}>
-      <SidebarNavigatorContent
-        bottomItems={bottomItems}
-        itemStyle={itemStyle}
-        onNavigate={onNavigate}
-        panelStyle={panelStyle}
-        topItems={topItems}
-      />
+      <View style={{flex: 1}}>
+        <SidebarHeader onOpen={() => setIsSheetOpen(true)} />
+        <SidebarNavigatorContent
+          bottomItems={bottomItems}
+          isOpen={isSheetOpen}
+          itemStyle={itemStyle}
+          onNavigate={onNavigate}
+          onOpenChange={setIsSheetOpen}
+          panelStyle={panelStyle}
+          topItems={topItems}
+        />
+      </View>
+      {children}
     </Navigator>
   );
 };
+
+export const SidebarNavigation = Object.assign(SidebarNavigationBase, {Screen});