import { createDrawerNavigator } from "@react-navigation/drawer";
import { AppBar, useTheme } from "@its/glowup-ui";
const Drawer = createDrawerNavigator();
export const AppNavigator = ({ routes }) => {
const { theme } = useTheme();
const { width } = useWindowDimensions();
const isPinned = width >= 840;
return (
<Drawer.Navigator
screenOptions={{
// AppBar renders the navigator's header: it reads navigation, route
// and options straight from the header contract.
header: (props) => <AppBar {...props} isPinned={isPinned} />,
drawerType: isPinned ? "permanent" : "front",
headerStyle: { backgroundColor: theme.colors.surface },
headerShadowVisible: false,
}}
>
{routes.map((route) => (
<Drawer.Screen key={route.name} {...route} />
))}
</Drawer.Navigator>
);
};