From 21c1c96f2ee4e1073d3ad5d3dccd5c7cdcb0b690 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 25 Nov 2022 23:15:41 +0100
Subject: [PATCH] Use Dropdown for the settings menu

---
 .../src/components/panels/Settings/Index.vue     | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue b/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
index eb61ef3a3..4dc9b76e3 100644
--- a/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
@@ -2,10 +2,14 @@
   <div class="settings-container">
     <header>
       <div class="col-8">
-        <select title="View" @change="selectedView = $event.target.value">
-          <option value="users" :selected="selectedView === 'users'">Users</option>
-          <option value="token" :selected="selectedView === 'token'">Generate Token</option>
-        </select>
+        <Dropdown title="Select a category" icon-class="fa fa-ellipsis-h">
+          <DropdownItem text="Users" icon-class="fa fa-user"
+            :item-class="{selected: selectedView === 'users'}"
+            @click="selectedView = 'users'" />
+          <DropdownItem text="Generate a token" icon-class="fa fa-key"
+            :item-class="{selected: selectedView === 'token'}"
+            @click="selectedView = 'token'" />
+        </Dropdown>
       </div>
 
       <div class="col-4 pull-right">
@@ -25,13 +29,15 @@
 </template>
 
 <script>
+import Dropdown from "@/components/elements/Dropdown";
+import DropdownItem from "@/components/elements/DropdownItem";
 import Token from "@/components/panels/Settings/Token";
 import Users from "@/components/panels/Settings/Users";
 import Utils from "@/Utils";
 
 export default {
   name: "Settings",
-  components: {Users, Token},
+  components: {Dropdown, DropdownItem, Users, Token},
   mixins: [Utils],
 
   data() {