fix: use vuetify tabs

src/Themes/HackathonTheme/Views/Content.liquid

@@ -1 +1,3 @@
-{{ Model.Content | shape_render }}
+ <v-container class="py-4 px-4" fluid>
+  {{ Model.Content | shape_render }}
+</v-container>

src/Themes/HackathonTheme/Views/Widget-Tabs.liquid

@@ -1,25 +1,17 @@
 {% assign prefix = Model.ContentItem.DisplayText | slugify %}
-<ul {%if Model.Id != null%}{%if Model.Id != null%}id="{{ Model.Id }}"{%endif%}{%endif%} class="nav nav-pills mb-3 {{ Model.Classes | join: ' ' }}" role="tablist">
-  {% for tab in Model.ContentItem.Content.FlowPart.Widgets %}
+
+<v-tabs>
+{% for tab in Model.ContentItem.Content.FlowPart.Widgets %}
   {% capture tabId %}{{prefix}}{{tab.DisplayText | slugify}}{% endcapture %}
-  <li class="nav-item">
-      <a 
-        class="nav-link {% if forloop.first == true %}active{% endif %}" id="{{tabId}}-tab" 
-        data-toggle="pill" 
-        href="#{{tabId}}" 
-        role="tab" 
-        aria-controls="{{tabId}}" 
-        aria-selected="true">
-        {{ tab.DisplayText }}
-      </a>
-    </li>
-  {% endfor %}
-</ul>
-<div class="tab-content">
-  {% for tab in Model.ContentItem.Content.FlowPart.Widgets %}
+  <v-tab>
+    {{ tab.DisplayText }}
+  </v-tab>
+{% endfor %}
+
+{% for tab in Model.ContentItem.Content.FlowPart.Widgets %}
   {% capture tabId %}{{prefix}}{{tab.DisplayText | slugify}}{% endcapture %}
-  <div class="tab-pane fade show {% if forloop.first == true %} show active {%endif%}" id="{{tabId}}" role="tabpanel" aria-labelledby="{{tabId}}-tab">
+  <v-tab-item transition="false" reverse-transition="false">
     {{ tab | shape_build_display | shape_render }}
-  </div>
-  {% endfor %}
-</div>
+  </v-tab-item>
+{% endfor %}
+</v-tabs>