DrawerContent

Copy Code<template>
  <div>
    <Drawer
      :expanded="expanded"
      :position="position"
      :mode="mode"
      :items="
        items.map((item, index) => ({
          ...item,
          selected: index === selectedId,
        }))
      "
      @select="handleSelect"
    >
      <DrawerContent>
        <k-button @click="handleClick"> Toggle the drawer state </k-button>
      </DrawerContent>
    </Drawer>
  </div>
</template>

<script>
import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
import { Button } from "@progress/kendo-vue-buttons";
import "./styles.css";

export default {
  name: "App",
  components: { Drawer, DrawerContent, "k-button": Button },
  data() {
    return {
      items: [
        {
          text: "Inbox",
          icon: "inbox",
          selected: true,
        },
        {
          text: "Calendar",
          icon: "calendar",
        },
        {
          text: "Attachments",
          icon: "hyperlink-email",
        },
        {
          text: "Favourites",
          icon: "star-outline",
        },
      ],
      expanded: true,
      selectedId: 0,
      position: "start",
      mode: "push",
    };
  },
  methods: {
    handleClick(e) {
      this.expanded = !this.expanded;
    },
    handleSelect(e) {
      this.selectedId = e.itemIndex;
    },
  },
};
</script>