72 lines · 2.8 KB · TypeScript
RawDownload
import {  DarkTheme,  DefaultTheme,  NavigationContainer,  NavigationIndependentTree,} from "@react-navigation/native";import {  createNativeStackNavigator,  type NativeStackNavigationOptions,} from "@react-navigation/native-stack";import type { ReactNode } from "react";import { Platform, useColorScheme } from "react-native"; import { nativeHeaderScrollEdgeEffects } from "../../native/StackHeader"; const SCROLL_EDGE_EFFECTS = nativeHeaderScrollEdgeEffects(Platform.OS, Platform.Version); type SidebarScreenOptions = NativeStackNavigationOptions & {  // Same patched RNS option the GLASS/SOLID presets in Stack.tsx use — the  // iOS 26 "editor" navigation-item style leading-aligns the inline title.  readonly unstable_navigationItemStyle?: "editor";}; /** * Static chrome for the sidebar column: a real UINavigationBar with a fixed * inline title (no large title — saves vertical space, left-aligned via the * editor item style) and the search bar pinned below it, scroll-edge blur * sampling the list. Only genuinely dynamic values (search callbacks, header * items) are set by the screen content via NativeStackScreenOptions. */const SIDEBAR_SCREEN_OPTIONS: SidebarScreenOptions = {  contentStyle: { backgroundColor: "transparent" },  headerLargeTitle: false,  headerShadowVisible: false,  headerShown: true,  headerStyle: { backgroundColor: "transparent" },  headerTitleStyle: { fontSize: 18, fontWeight: "800" },  headerTransparent: true,  scrollEdgeEffects: SCROLL_EDGE_EFFECTS,  title: "Threads",  unstable_navigationItemStyle: "editor",}; const SidebarStack = createNativeStackNavigator(); /** * Hosts the iPad sidebar pane inside its own single-screen native stack. * * The stack is navigation-inert — nothing is ever pushed onto it. It exists so * the sidebar column owns a real UINavigationBar (large title, native bar * button items, UISearchController), mirroring how each column of a * UISplitViewController has its own UINavigationController. All real * navigation still flows through the root stack via callbacks minted in * AdaptiveWorkspaceLayout; NavigationIndependentTree only isolates the * navigation hooks used for header configuration inside the pane. */export function SidebarNavigationShell(props: { readonly children: ReactNode }) {  const colorScheme = useColorScheme();   return (    <NavigationIndependentTree>      <NavigationContainer theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}>        <SidebarStack.Navigator          screenOptions={SIDEBAR_SCREEN_OPTIONS}          initialRouteName="SidebarThreads"        >          <SidebarStack.Screen name="SidebarThreads">{() => props.children}</SidebarStack.Screen>        </SidebarStack.Navigator>      </NavigationContainer>    </NavigationIndependentTree>  );}