first commit

src/components/DrawerComponent.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const currentRoute = ref<string>('');
+const labelMenu: {
+  label: string;
+  icon: string;
+}[] = [
+  { label: 'Dashboard', icon: 'file-account-outline' },
+  { label: 'จัดการสาขา', icon: 'add' },
+  { label: 'จัดการผู้ใช้งาน', icon: 'add' },
+  { label: 'จัดการหลักสูตร', icon: 'add' },
+];
+
+const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
+  default: false,
+});
+</script>
+
+<template>
+  <!-- Drawer -->
+  <q-drawer v-model="leftDrawerOpen" side="left" show-if-above>
+    <div class="main-bar">
+      <div
+        class="column items-center justify-center q-pa-xl cursor-pointer"
+        @click="$router.push('/')"
+        id="btn-drawer-home"
+      >
+        <q-img src="/logo.png" />
+      </div>
+    </div>
+
+    <div id="drawer-menu" class="q-pr-sm">
+      <q-item
+        v-for="v in labelMenu"
+        :key="v.label"
+        clickable
+        @click="currentRoute = v.label"
+        :class="{ active: currentRoute === v.label, dark: $q.dark.isActive }"
+      >
+        <q-item-section id="btn-drawer-back " class="test">
+          <q-item-label>
+            <!-- <q-icon :name="v.icon" size="sm" class="q-mr-xs" /> -->
+            {{ v.label }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </div>
+  </q-drawer>
+</template>
+
+<style lang="scss" scoped>
+#drawer-menu :deep(.q-item) {
+  color: var(--gray-6);
+
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+#drawer-menu :deep(.q-item.active) {
+  --_drawer-item-background-color: var(--brand-1) !important;
+  background-color: var(--_drawer-item-background-color) !important;
+
+  color: white;
+  border-left: 10px solid $secondary;
+
+  &.dark {
+    --_drawer-item-background-color: var(--gray-10) !important;
+    border: 1px solid var(--brand-1);
+    border-left: 10px solid $secondary;
+  }
+}
+
+.test {
+  border: 1px solid blue;
+}
+</style>