fix(tabs): tempfix for active tabs with cNavLink

Author: xidedix

Diff for: src/app/views/base/tabs/tabs.component.html

@@ -10,25 +10,25 @@
       <c-card-body>
         <c-nav variant="tabs">
           <c-nav-item>
-            <a [active]="true" [cTabContent]="tabContent1" routerLink="./" [tabPaneIdx]="0" cNavLink>
+            <a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="0" cNavLink>
               <svg cIcon class="me-2" name="cilHome"></svg>
               Home
             </a>
           </c-nav-item>
           <c-nav-item>
-            <a [cTabContent]="tabContent1" routerLink="./" [tabPaneIdx]="1" cNavLink>
+            <a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="1" cNavLink>
               <svg cIcon class="me-2" name="cilUser"></svg>
               Profile
             </a>
           </c-nav-item>
           <c-nav-item>
-            <a [cTabContent]="tabContent1" routerLink="./" [tabPaneIdx]="2" cNavLink>
+            <a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="2" cNavLink>
               <svg cIcon class="me-2" name="cilCode"></svg>
               Contact
             </a>
           </c-nav-item>
         </c-nav>
-        <c-tab-content #tabContent1="cTabContent" [activeTabPaneIdx]="1" cRounded="bottom">
+        <c-tab-content #tabContent1="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
           <c-tab-pane class="p-3 preview" role="tabpanel">
             This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
             will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
@@ -55,14 +55,14 @@
       <c-card-body>
         <c-nav variant="tabs">
           <c-nav-item *ngFor="let nav of panes; index as i; first as isFirst; last as isLast">
-            <a [active]="isFirst" [cTabContent]="tabContent2" [disabled]="isLast" routerLink="./" [tabPaneIdx]="i"
+            <a [cTabContent]="tabContent2" [disabled]="isLast" [routerLink] [tabPaneIdx]="i"
                cNavLink>
               <svg cIcon class="me-2" name="cilHome"></svg>
               {{nav.name}}
             </a>
           </c-nav-item>
         </c-nav>
-        <c-tab-content #tabContent2="cTabContent" [activeTabPaneIdx]="1" cRounded="bottom">
+        <c-tab-content #tabContent2="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
           <c-tab-pane *ngFor="let pane of panes; index as i;" class="p-3 preview">
             This is some placeholder content the <strong>{{pane.name}}</strong> tab's associated content. Clicking
             another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -81,25 +81,25 @@
       <c-card-body>
         <c-nav variant="pills">
           <c-nav-item>
-            <a [cTabContent]="tabContent3" routerLink="./" [tabPaneIdx]="0" cNavLink>
+            <a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="0" cNavLink>
               <svg cIcon class="me-2" name="cilHome"></svg>
               Home
             </a>
           </c-nav-item>
           <c-nav-item>
-            <a [cTabContent]="tabContent3" routerLink="./" [tabPaneIdx]="1" cNavLink>
+            <a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="1" cNavLink>
               <svg cIcon class="me-2" name="cilUser"></svg>
               Profile
             </a>
           </c-nav-item>
           <c-nav-item>
-            <a [active]="true" [cTabContent]="tabContent3" routerLink="./" [tabPaneIdx]="2" cNavLink>
+            <a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="2" cNavLink>
               <svg cIcon class="me-2" name="cilCode"></svg>
               Contact
             </a>
           </c-nav-item>
         </c-nav>
-        <c-tab-content #tabContent3="cTabContent" cRounded="bottom">
+        <c-tab-content #tabContent3="cTabContent" cRounded="bottom" [activeTabPaneIdx]="0">
           <c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
             This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
             will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the