Function DrawerRoot

navigation/DrawerRoot.tsx:36–82

()

};

const DrawerRoot = () => {
  const { sizeClass, isLargeScreen } = useSizeClass();
  const { direction } = useLocale();
  useCompanionListeners();

  const getDrawerWidth = useMemo(() => {
    switch (sizeClass) {
      case SizeClass.Large:
        return 320;
      case SizeClass.Regular:
        return 280;
      default:
        return 0;
    }
  }, [sizeClass]);

  const drawerStyle: DrawerNavigationOptions = useMemo(
    () => ({
      drawerPosition: direction === 'rtl' ? 'right' : 'left',
      drawerStyle: {
        width: getDrawerWidth,
        height: '100%',
      },
      drawerType: isLargeScreen ? 'permanent' : 'front',
      overlayColor: 'rgba(0,0,0,0.4)',
      swipeEnabled: false,

      ...getAnimationConfig(true),
    }),
    [getDrawerWidth, isLargeScreen, direction],
  );

  useEffect(() => {
    console.debug('[DrawerRoot] Size class changed:', SizeClass[sizeClass]);
  }, [sizeClass]);

  return (
    <Drawer.Navigator
      screenOptions={drawerStyle}
      drawerContent={DrawerContent}
      initialRouteName="DetailViewStackScreensStack"
      defaultStatus={isLargeScreen ? 'open' : 'closed'}
    >
      <Drawer.Screen name="DetailViewStackScreensStack" component={DetailViewStackScreensStack} options={{ headerShown: false }} />
    </Drawer.Navigator>
  );
};

export default DrawerRoot;