What is the best way to show the back button of Stacks within a nested Drawer->Tabs->Stack setup?

[aholsteinson]

I currently have the following setup in my app:

-> (drawer)
    ->(tabs)
        -> (blog)
            -> _layout.tsx
            -> index.tsx
            -> detail.tsx
        -> (store)
            -> _layout.tsx
            -> index.tsx
            -> products.tsx
            -> detail.tsx
        -> index.tsx
        -> _layout.tsx
    -> _layout.tsx
-> (auth)
    -> _layout.tsx
    -> index.tsx
    -> login.tsx
    -> register.tsx
-> _layout.tsx

The root layout file is setup like this:

<Stack initialRouteName="(auth)">
    <Stack.Screen name="(auth)" options={{ headerShown: false }} />
    <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
</Stack>

And the stack layouts within (tabs) have a similar setup:

<Stack initialRouteName="index">
    <Stack.Screen name="index" options={{ headerShown: false }}  />
    <Stack.Screen name="detail" options={{ headerShown: false }}  />
</Stack>

The (auth) part is working as intended as it is meant to have the header hidden. But with the (drawer) I currently have the header of the drawer in the root hidden but am showing the header for the (tabs) which has buttons for toggling the drawer menu on the left and the profile and cart buttons on the right. The blog and store stack layouts have the headerShown set to false for every route.

How can I set it up so that the tab header with the toggle drawer button (and the profile and cart buttons) is shown when I am at the root of the blog or store stack but then show the back button of the stack when the user navigates to a detail or products view?

I know I can hide the header conditionally based on the route but it doesn't seems optimal and I am not sure how I would go about conditioning each of the various stacks inside (tabs), there are many more I am not showing here.

Thanks in advance for any help.