fix: menu icon, add menu

mfactory-lab · Jun 26, 2024 · 7ee4edb · 7ee4edb
1 parent e7f086e
commit 7ee4edb
Showing 1 changed file with 34 additions and 1 deletion.
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -1,7 +1,40 @@
+<script setup lang="ts">
+import { matMenu } from '@quasar/extras/material-icons'
+</script>
+
 <template>
   <header class="container">
     <q-toolbar class="q-my-md">
-      <q-btn flat round dense icon="menu-outline" class="q-mr-sm" />
+      <q-btn flat round dense :icon="matMenu" class="q-mr-sm">
+        <q-menu fit>
+          <q-list style="min-width: 100px">
+            <q-item clickable>
+              <q-item-section>New tab</q-item-section>
+            </q-item>
+            <q-item clickable>
+              <q-item-section>New incognito tab</q-item-section>
+            </q-item>
+            <q-separator />
+            <q-item clickable>
+              <q-item-section>Recent tabs</q-item-section>
+            </q-item>
+            <q-item clickable>
+              <q-item-section>History</q-item-section>
+            </q-item>
+            <q-item clickable>
+              <q-item-section>Downloads</q-item-section>
+            </q-item>
+            <q-separator />
+            <q-item clickable>
+              <q-item-section>Settings</q-item-section>
+            </q-item>
+            <q-separator />
+            <q-item clickable>
+              <q-item-section>Help &amp; Feedback</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
 
       <q-space />