chore: add Nuxt 3 drawer navigation

Author: zdravkov

kendo-nuxt3/app.vue

@@ -1,6 +1,76 @@
 <template>
-  <div>
-    <Navigation />
-    <NuxtPage />
+   <div>
+    <div class="custom-toolbar">
+      <kbutton :icon="'menu'" :fill-mode="'flat'" @click="handleClick" />
+      <NuxtLink to="/">Home</NuxtLink>
+    </div>
+    <Drawer
+      :expanded="expanded"
+      :position="position"
+      :mode="mode"
+      :items="items"
+      @select="onSelect"
+    >
+      <DrawerContent>
+        <NuxtPage />
+      </DrawerContent>
+    </Drawer>
   </div>
+
 </template>
+<script>
+import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+import { Button } from "@progress/kendo-vue-buttons";
+
+export default {
+  name: "App",
+  components: { Drawer, DrawerContent, "kbutton": Button },
+  mounted() {
+    this.$router.push(this.items[0].data);
+  },
+  computed: {
+    items() {
+      const splitName = this.$route.name.split('-')
+      const currentRootName = splitName[0];
+      const rootroutes = this.$route.name === 'index' 
+                  ? this.$router.options.routes
+                        .filter(r=>r.path.split('/').length === 2)
+                        .map(t=>{
+                          return {
+                          text: t.name,
+                          selected: t.name === this.$route.name,
+                          data: {
+                            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
+                          }
+                        }});
+      return rootroutes;
+    }
+  },
+  data() {
+  
+    return {
+      expanded: true,
+      position: "start",
+      mode: "push",
+    };
+  },
+  methods: {
+    onSelect(e) {
+      this.$router.push(this.items[e.itemIndex].data);
+    },
+    handleClick() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>

kendo-nuxt3/components/Navigation.vue

@@ -1,41 +1,6 @@
 <template>
     <KButton @click="handleClick"> {{visible ? ' Hide Navigation' : 'Show Navigation' }}</KButton>
-    <div v-if="visible" id="rootnav">
-        <NuxtLink to="/">Home</NuxtLink> |
-        <NuxtLink to="/next">Next</NuxtLink> |
-        <NuxtLink to="/form">form</NuxtLink> |
-        <NuxtLink to="/grid">Grid</NuxtLink> |
-        <NuxtLink to="/drawer">Drawer</NuxtLink> |
-        <NuxtLink to="/splitbutton">SplitButton</NuxtLink> |
-        <NuxtLink to="/scrollview">scrollview</NuxtLink> |
-        <NuxtLink to="/numerictextbox">Numeric</NuxtLink> |
-        <NuxtLink to="/daterangepicker">DateRangePicker</NuxtLink> | 
-        <NuxtLink to="/loader">Loader</NuxtLink> | 
-        <NuxtLink to="/progressbar">ProgressBar</NuxtLink> | 
-        <NuxtLink to="/stepper">Stepper</NuxtLink> | 
-        <NuxtLink to="/editor">Editor</NuxtLink> | 
-        <NuxtLink to="/textarea">textarea</NuxtLink> | 
-        <NuxtLink to="/switch">switch</NuxtLink> | 
-        <NuxtLink to="/tooltip">tooltip</NuxtLink> | 
-        <NuxtLink to="/arcgauge">arcgauge</NuxtLink> | 
-        <NuxtLink to="/circulargauge">circulargauge</NuxtLink> | 
-        <NuxtLink to="/lineargauge">lineargauge</NuxtLink> | 
-        <NuxtLink to="/scheduler">scheduler</NuxtLink> | 
-        <NuxtLink to="/chart">chart</NuxtLink> | 
-        <NuxtLink to="/splitter">splitter</NuxtLink> |
-        <NuxtLink to="/slider">slider</NuxtLink> |
-        <NuxtLink to="/panelbar">panelbar</NuxtLink> | 
-        <NuxtLink to="/tabstrip">tabstrip</NuxtLink> | 
-        <NuxtLink to="/indicators">indicators</NuxtLink> | 
-        <NuxtLink to="/notification">notification</NuxtLink> | 
-        <NuxtLink to="/treeview">treeview</NuxtLink> | 
-        <NuxtLink to="/dropdowns">dropdowns</NuxtLink> | 
-        <NuxtLink to="/colors">colors</NuxtLink> | 
-        <NuxtLink to="/datepicker">datepicker</NuxtLink> | 
-        <NuxtLink to="/treelist">treelist</NuxtLink> | 
-        <NuxtLink to="/layouts">layouts</NuxtLink> | 
-        <NuxtLink to="/listview">listview</NuxtLink> | 
-    </div>
+   
 </template>
 
 <script lang="ts">