chore: update nuxt 3 routes and index page

Author: zdravkov

kendo-nuxt3/app.vue

@@ -1,9 +1,14 @@
 <template>
-   <div>
-    <div class="custom-toolbar">
-      <kbutton :icon="'menu'" :fill-mode="'flat'" @click="handleClick" />
-      <NuxtLink to="/">Home</NuxtLink>
-    </div>
+  <div>
+    <AppBar>
+        <AppBarSection>
+          <kbutton :icon="'menu'" :fill-mode="'flat'" @click="handleClick" />
+        </AppBarSection>
+        <AppBarSpacer :width="4" />
+        <AppBarSection>
+          <NuxtLink to="/">Home</NuxtLink>
+        </AppBarSection>
+    </AppBar>
     <Drawer
       :expanded="expanded"
       :position="position"
@@ -19,12 +24,13 @@
 
 </template>
 <script>
-import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+import { Drawer, DrawerContent, AppBar, AppBarSection, AppBarSpacer } from "@progress/kendo-vue-layout";
 import { Button } from "@progress/kendo-vue-buttons";
 
 export default {
   name: "App",
-  components: { Drawer, DrawerContent, "kbutton": Button },
+  components: { Drawer, DrawerContent, "kbutton": Button,
+  AppBar, AppBarSection, AppBarSpacer },
   mounted() {
     this.$router.push(this.items[0].data);
   },
@@ -43,16 +49,26 @@ export default {
                             path: t.path
                           }
                         }})
-                  : this.$router.options.routes
-                        .filter(r=>r.path.startsWith('/' + currentRootName))
-                        .map(t=>{
-                          return {
-                          text: t.name,
-                          selected: t.name === this.$route.name,
-                          data: {
-                            path: t.path
-                          }
-                        }});
+                  : [
+                      {
+                        text: 'Go Back',
+                        data: {
+                          path: '/'
+                        }
+                      },
+                      ...this.$router.options.routes
+                          .filter(r=> {
+                            return r.path.startsWith('/' + currentRootName) && r.path.endsWith('main')
+                          })
+                          .map(t=>{
+                            return {
+                            text: t.name.split('-main')[0],
+                            selected: t.name === this.$route.name,
+                            data: {
+                              path: t.path
+                            }
+                          }})
+                    ];
       return rootroutes;
     }
   },

kendo-nuxt3/pages/index.vue

@@ -1,80 +1,10 @@
 <template>
-  <div class="example-wrapper">
-    <div>
-      <div>Favorite sports:</div>
-
-      <dropdownlist
-        aria-label="Select a Customer"
-        :fill-mode="'outline'"
-        :data-items="allData"
-        :text-field="'text'"
-        :data-item-key="'id'"
-        :defaultValue="customerInfo"
-        :filterable="true"
-        :popup-settings="{
-          height: '250px',
-        }"
-        @scroll="handleScroll"
-      />
-<br />
-<br />
-<br />
-<br />
-       <combobox
-        aria-label="Select a Customer"
-        :fill-mode="'outline'"
-        :data-items="allData"
-        :text-field="'text'"
-        :data-item-key="'id'"
-        :defaultValue="customerInfo"
-        :filterable="true"
-        :popup-settings="{
-          height: '250px',
-        }"
-        @scroll="handleScroll"
-      />
-    </div>
-  </div>
+<a href="https://www.telerik.com/kendo-vue-ui/?utm_medium=referral&amp;utm_source=npm&amp;utm_campaign=kendo-ui-vue-trial-npm-utils&amp;utm_content=banner" rel="nofollow">
+<img src="https://camo.githubusercontent.com/e1de088440453e2ad64df3f79fdd0c606337b143312846fbec008c2b2ea8c068/68747470733a2f2f7777772e74656c6572696b2e636f6d2f6b656e646f2d7675652d75692f6e706d2d62616e6e65722e737667" alt="Kendo UI for Vue NPM Banner" data-canonical-src="https://www.telerik.com/kendo-vue-ui/npm-banner.svg" style="max-width: 100%;">
+</a>
 </template>
 <script>
-import { MultiSelect, DropDownList, ComboBox } from "@progress/kendo-vue-dropdowns";
-
 export default {
-  components: {
-    multiselect: MultiSelect,
-    dropdownlist: DropDownList,
-    combobox: ComboBox,
-  },
-  data: function () {
-    return {
-      total: 105,
-      pageSize: 100,
-      skip: 0,
-      take: undefined,
-      popupSettings: {
-        height: "250px",
-      },
-      customerInfo: { id: 1, text: "Item 1" },
-    };
-  },
-  computed: {
-    allData() {
-      const allData = [];
-      for (let i = 0; i < this.total; i++) {
-        allData.push({ id: i, text: "Item " + i });
-      }
-      return allData;
-    },
-  },
-  methods: {
-    handleScroll(e) {
-      if (
-        e.target.scrollTop + 10 >=
-        e.target.scrollHeight - e.target.clientHeight
-      ) {
-        this.total = this.total + 20;
-      }
-    },
-  },
+ 
 };
 </script>