From ec4ea4c0a121b667f7bb6511c4f17d803167a9fa Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 20 Jul 2023 21:05:51 +0530
Subject: [PATCH] feat: added user dropdown which currently has logout option

---
 frontend/src/components/AppSidebar.vue   |  3 +-
 frontend/src/components/UserDropdown.vue | 42 ++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/UserDropdown.vue

diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 745d5a8c..88664c70 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="inline-flex h-full flex-col border-r w-[220px]">
     <div class="flex p-2">
-      <h1 class="text-xl px-3 py-2">Frappe CRM</h1>
+      <UserDropdown />
     </div>
     <div class="flex-1">
       <nav class="space-y-0.5 px-2">
@@ -26,6 +26,7 @@
 </template>
 
 <script setup>
+import UserDropdown from './UserDropdown.vue'
 import LeadsIcon from './Icons/LeadsIcon.vue'
 import DealsIcon from './Icons/DealsIcon.vue'
 import InboxIcon from './Icons/InboxIcon.vue'
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
new file mode 100644
index 00000000..eb045299
--- /dev/null
+++ b/frontend/src/components/UserDropdown.vue
@@ -0,0 +1,42 @@
+<template>
+  <Dropdown :options="userDropdownOptions">
+    <template v-slot="{ open }">
+      <button
+        class="flex w-full items-center space-x-2 rounded-md p-2 text-left"
+        :class="open ? 'bg-gray-300' : 'hover:bg-gray-200'"
+        v-if="user"
+      >
+        <Avatar
+          :label="user.full_name"
+          :image="user.user_image"
+          size="md"
+        />
+        <span class="hidden text-base font-medium text-gray-900 sm:inline">
+          {{ user.full_name }}
+        </span>
+        <FeatherIcon
+          name="chevron-down"
+          class="h-4 w-4 sm:inline"
+          aria-hidden="true"
+        />
+      </button>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup>
+import { Dropdown, Avatar, FeatherIcon } from 'frappe-ui'
+import { sessionStore } from '@/stores/session'
+import { computed } from 'vue'
+
+const session = sessionStore()
+const user = computed(() => session.user || {})
+
+const userDropdownOptions = [
+  {
+    icon: 'log-out',
+    label: 'Log out',
+    onClick: () => session.logout.submit(),
+  },
+]
+</script>