added settings Page and components

pages/issues.vue

@@ -25,10 +25,10 @@
             </router-link>
         </div>
         <div id="content-body">
-            <IssueTable />
-            <Issue />
-            <IssueVariants />
-            <IssueVariant />
+            <IssueTable v-if="onIssueItemList"/>
+            <Issue v-if="onIssueItem"/>
+            <IssueVariants v-if="onIssueItem"/>
+            <IssueVariant v-if="onIssueItemVariant"/>
         </div>
     </section>
 </template>
@@ -47,6 +47,11 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onIssueItem = ref(false)
+const onIssueItemList = ref(true)
+const onIssueItemVariant = ref(false)
 </script>
   
 <script>
@@ -88,6 +93,7 @@ export default {
     letter-spacing: 5%;
     font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
         sans-serif;
+    text-decoration: none;
 }
 
 #active-page-name {
@@ -98,7 +104,7 @@ export default {
 }
 
 .button {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .h1-darkmode {