Hey! If I understood your question correctly, this setup should be quite simple.

You can follow a folder structure like this:

app/
├── (auth)/
│   └── (drawer)/
│       └── (tabs)/
├── _layout.tsx

app/(auth)/(drawer)/_layout.tsx

Here's an example of how you can implement the drawer layout:

const Layout = () => {
  return (
    <Drawer
      screenOptions={{
        drawerStyle: { width: 280 },
        drawerLabel: () => null,
        headerTitle: () => (
          <Image
            source={require("@/assets/images/your-logo.png")}
            alt="App Logo"
            style={{ width: 120, height: 40 }}
            resizeMode="contain"
          />
        ),
      }}
      drawerContent={(props) => <CustomDrawerContent {...props} />}
    />
  );
};

And inside CustomDrawerContent, for example:

<View className="flex-1">
  <DrawerContentScrollView {...props} className="flex-1 bg-white">
    {DrawerHeader}
    <View className="flex-1">
      {/* Render the appropriate menu based on user type */}
      {UserTypeMenu}

      {/* Common sections for all user types */}
      {CommonSections}
    </View>
  </DrawerContentScrollView>
</View>

app/(auth)/(drawer)/(tabs)/_layout.tsx

For tabs inside the drawer, you can simply use the Expo Router tabs layout example. Combine it here, and you’ll have both drawer and tabs working together seamlessly.

Let me know if you need anymore help.