feat: added user dropdown which currently has logout option

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'

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>