Currently, I am working on an angularjs project where I am using the uib-tabset directive to display tabs. My goal is to have a left panel that remains consistent across all tabs. This requires me to insert a div either before or after the uib-tabset directive.
By default, the headings are placed directly above the tab bodies. https://i.sstatic.net/Efjms.jpg
Visually, I would like to integrate the panel inside each tab in the generated structure: https://i.sstatic.net/emZQC.jpg
When utilizing uib-tabsets, the structure typically looks like this:
<panel>
<tabs-headings>
<tabs-bodies>
My current approaches involve manipulating the CSS to adjust the positioning of the headings relative to the side panel, which I consider risky, or duplicating the panel code within each tab, which feels inefficient.
Instead, my preferred structure would be as follows for easier CSS creation:
<tabs-heading>
<panel>
<tabs-bodies>
Is there a straightforward method to achieve this desired behavior?
Thank you