1import type { ReactNode } from "react";
2import { StyleSheet, View } from "react-native";
3
4import { StandaloneStack } from "../nested-stacks";
5import { pageRoute } from "../route-options";
6import { getCompactBrandHeaderOptions } from "./brand-header-options";
7
8const SIDEBAR_COLUMN_OPTIONS = {
9 ...pageRoute(),
10 ...getCompactBrandHeaderOptions({ fontSize: 18, fontWeight: "800" }),
11};
12
13/** The iOS sidebar column hosts its own stack so it gets a native bar with the brand title. */
14export function WorkspaceSidebarColumn(props: {
15 readonly width: number;
16 readonly children: ReactNode;
17}) {
18 return (
19 <View
20 testID="thread-navigation-sidebar"
21 className="flex-1 border-border bg-drawer"
22 style={{ borderRightWidth: StyleSheet.hairlineWidth, width: props.width }}
23 >
24 <StandaloneStack surface="sidebar" options={SIDEBAR_COLUMN_OPTIONS}>
25 {props.children}
26 </StandaloneStack>
27 </View>
28 );
29}