added kendo drawer popup and button

Author: kobolda

components.d.ts

@@ -10,6 +10,8 @@ declare module '@vue/runtime-core' {
     BoardCard: typeof import('./src/components/BoardCard.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TheDrawer: typeof import('./src/components/TheDrawer.vue')['default']
+    TheNavbar: typeof import('./src/components/TheNavbar.vue')['default']
   }
 }
 

src/App.vue

@@ -1,5 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TheNavbar from "./components/TheNavbar.vue";
+import TheDrawer from "./components/TheDrawer.vue";</script>
 
 <template>
-  <RouterView />
+  <TheNavbar />
+  <TheDrawer />
 </template>

src/components/TheDrawer.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+
+import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
+
+import { useRouter } from "vue-router";
+
+import { computed, ref } from "vue";
+
+// const router = useRouter(); 
+const selectedId = ref(0);
+
+const expanded = ref(false);
+const expandedIcon = computed(() =>
+  expanded.value ? "k-i-arrow-chevron-left" : "k-i-arrow-chevron-right"
+);
+const items = computed(() => [
+  {
+    text: "Boards",
+    icon: "k-i-set-column-position",
+    selected: true,
+    data: {
+      path: "/",
+    },
+  },
+  {
+    text: "Templates",
+    icon: "k-i-border-left",
+    data: {
+      path: "/templates",
+    },
+  },
+  {
+    text: "Settings",
+    icon: "k-i-gear",
+    data: {
+      path: "/settings",
+    },
+  },
+  {
+    text: "Collapse",
+    icon: expandedIcon.value,
+    data: {
+      action: () => (expanded.value = !expanded.value),
+    },
+  },
+]);
+
+function onSelect({ itemIndex }: { itemIndex: number }) {
+  const item = items.value[itemIndex];
+  if (item.data.path) router.push(item.data.path);
+  if (typeof item.data.action === "function") item.data.action();
+}
+
+</script>
+
+<template>
+    <Drawer class="h-[90vh]" :expanded="expanded" position="start" mode="push" :mini="true" :items="items"
+        @select="onSelect">
+        <DrawerContent>
+            <div class="px-5">
+                <router-view />
+            </div>
+        </DrawerContent>
+    </Drawer>
+</template>

src/components/TheNavbar.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+import { Popup as KPopup } from '@progress/kendo-vue-popup';
+
+import { ref } from 'vue';
+
+const showTeams = ref(false);
+
+</script>
+
+<template>
+
+<div
+    class="p-4 border-bottom border-2 flex justify-between"
+    style="margin: -1px"
+  >
+    <img
+      src="https://vuejsforge.com/images/logo.svg"
+      width="150"
+      class="max-w-none"
+      alt="Vue.js Forge"
+    />
+    <div>
+      <button
+        ref="button"
+        class="mr-5 text-[#ff6358]"
+        @click="showTeams = !showTeams"
+      >
+        <span class="k-icon k-i-ungroup"></span>
+        My Team
+      </button>
+
+      <KPopup :anchor="'button'" :show="showTeams" class="mt-5">
+        <ul>
+          <li class="px-5 py-2" @click="showTeams = false">Team 1</li>
+          <li class="px-5 py-2" @click="showTeams = false">Team 2</li>
+        </ul>
+      </KPopup>
+
+      <KButton :rounded = "'full'" :shape = "'rectangle'" :icon = "'logout'" :theme-color="'warning'">Logout</KButton>
+    </div>
+  </div>
+
+</template>

src/pages/settings/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1 class="text-3xl mb-5">Settings</h1>
+</template>

src/pages/templates/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1 class="text-3xl mb-5">Templates</h1>
+</template>