Winui 3 NavigationView with nested tabs navigation

Question

I am pretty noob with WinUI 3 or generally in Desktop app development.

I am trying to achieve the exact result from the below image in WinUI 3 and c#. I have tried a lot of things but the result was not close.

Result to achieve:

• I have tried to create a Custom Navigation Pane with TabsView component but the style of tabs I couldn't change and won't work for the navigation's compact mode. There isn't any option to remove the tab's close button. The tabs won't be displayed icons in Navigations's compact mode.

• Tried also the Pivot control but didn't work

• Tried to change the tabs style but didn't work. Tried a lot of things, didn't work and don't remember me. Tried updating visual states but didn't work and ditched the tabs component because also of Navigation's compact mode( when Drawer is close and the left pane is shown with icons).

• Then, I tried also With ToggleButton buttons and dynaically

  <StackPanel Orientation="Horizontal">
      <ToggleButton x:Name="Tab1Button" Content="Tab 1" Checked="OnTabChecked"/>
      <ToggleButton x:Name="Tab2Button" Content="Tab 2" Checked="OnTabChecked"/>
      <ToggleButton x:Name="Tab3Button" Content="Tab 3" Checked="OnTabChecked"/>
  </StackPanel>
  

  Navigation view/drawer open	Navigation view/drawer closed

• Tried to develop custom components using UserControl, CustomControl

  Navigation view/drawer open	Navigation view/drawer closed

  So here I have developed 3 controls: 2 user control and 1 Custom control but they are not close... 2 of them are but they are """compatible with NavigationMenu Items""". I want them to become icon buttons when Navigation is closed as in Wireframe.

<NavigationView.PaneCustomContent>
    <StackPanel>
        <CustomComponents:CustomTabControl x:Name="MyCustomTabControl"/>
        <CustomComponents:CustomButtonToggle x:Name="MyCustomButtonToggle"/>
        <CustomComponents:CustomButtonTogglePanel>
            <Button Content="Structure 2"/>
            <Button Content="Buildings 2"/>
            <Button Content="Assets 2"/>
        </CustomComponents:CustomButtonTogglePanel>
    </StackPanel>
    
</NavigationView.PaneCustomContent>

CustomTabControl

XAML: https://codefile.io/f/DNmrhpx0hw
XAML C#: https://codefile.io/f/2mGz8rGW27

CustomButtonTogglePanel

XAML: https://codefile.io/f/IefFxLbUe8

I have been trying to generate the code from Figma using plugins but there aren't any decent

I have been thinking to do something like but don't know whether this is correct approch or not and feasible

<NavigationView.MenuItems>
  <CustomComponent:CustomNavigationViewItem>
    <CustomComponent:CustomButtonToggleComponent> 
      <Button><StackPanel Orientation="Horizontal"><Icon>...</Icon><TextBlock>Structure</TextBlock></StackPanel><Button>
      <Button><StackPanel Orientation="Horizontal"><Icon>...</Icon><TextBlock>Building</TextBlock></StackPanel><Button>
    </CustomComponent:CustomButtonToggleComponent>
  </CustomComponent:CustomNavigationViewItem>
</NavigationView.MenuItems>

where CustomNavigationViewItem is the CustomControl component that extends the NavigationViewItem class. It will display the CustomButtonToggleComponent and on LeftCompact mode, CustomNavigationViewItem will get the content from CustomButtonToggleComponent and rerender the panel with only icons buttons from CustomButtonToggleComponent.

Or is it a bad idea? Is there any other better idea than this? Simple yet reusable?

Recap: I want when the Navigation drawer is opened, the "Toggle Buttons" or "Tabs button" are shown horizontally with the active button or tab underlined as shown in the Wireframe Image above and when the navigation or navigation's drawer is closed or is in the Compact Mode, it should show that "Toggle" or "Tabs" 's button vertically. Like as they would be normal NavigationViewItem elements.