From 30e999c8fdbc57443ab26dd35cfa1944d97d9d14 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Mon, 24 Jun 2024 15:21:54 +0700
Subject: [PATCH] style: UI download manual

---
 src/views/MainLayout.vue | 52 ++++++++++++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index b10f0e8d..bef2a31d 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -83,19 +83,51 @@ const downloadFile = () => {
             color="grey-7"
           />
         </q-btn>
-
         <q-space />
         <q-btn
+          v-if="route.path !== '/'"
+          size="12px"
+          flat
+          dense
+          round
+          icon="mdi-download"
           color="primary"
-          label="ดาวน์โหลดคู่มือ"
-          @click="downloadFile()"
-        />
-        <q-btn
-          color="primary"
-          class="q-ml-md"
-          label="ดาวน์โหลดคู่มือทั้งหมด"
-          @click="console.log('download All')"
-        />
+        >
+          <q-tooltip>ดาวน์โหลด</q-tooltip>
+          <q-menu>
+            <q-list style="min-width: 150px">
+              <q-item
+                clickable
+                class="row items-center no-wrap"
+                v-close-popup
+                @click="downloadFile()"
+              >
+                <q-icon
+                  color="red"
+                  size="28px"
+                  name="mdi-file-pdf"
+                  class="q-mr-md"
+                />
+                ดาวน์โหลดคู่มือ
+              </q-item>
+              <q-item
+                clickable
+                class="row items-center no-wrap"
+                v-close-popup
+                @click=""
+              >
+                <q-icon
+                  color="red"
+                  size="28px"
+                  name="mdi-file-pdf"
+                  class="q-mr-md"
+                />
+                ดาวน์โหลดคู่มือทั้งหมด
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+
         <q-btn
           size="13px"
           class="bg-blue-1"