add feedback button in sidebar

Author: Onatcer

resources/js/Components/UserSettingsIcon.vue

@@ -14,6 +14,7 @@ import {
     ArrowLeftOnRectangleIcon,
     ChatBubbleLeftRightIcon,
 } from '@heroicons/vue/24/solid';
+import { openFeedback } from '@/utils/feedback';
 
 const page = usePage<{
     has_services_extension?: boolean;
@@ -34,16 +35,6 @@ const page = usePage<{
 const logout = () => {
     router.post(route('logout'));
 };
-
-const openFeedback = () => {
-    if (
-        typeof window !== 'undefined' &&
-        'showChatWindow' in window &&
-        typeof window.showChatWindow === 'function'
-    ) {
-        window.showChatWindow();
-    }
-};
 </script>
 <template>
     <div class="relative">
@@ -53,7 +44,7 @@ const openFeedback = () => {
                 as-child>
                 <button data-testid="current_user_button">
                     <img
-                        class="h-8 w-8 rounded-full object-cover"
+                        class="h-7 w-7 rounded-full object-cover"
                         :src="page.props.auth.user.profile_photo_url"
                         :alt="page.props.auth.user.name" />
                 </button>

resources/js/Layouts/AppLayout.vue

@@ -47,6 +47,8 @@ import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
 import { twMerge } from 'tailwind-merge';
+import Button from '@/Components/ui/button/Button.vue';
+import { openFeedback } from '@/utils/feedback';
 
 defineProps({
     title: String,
@@ -94,8 +96,8 @@ onMounted(async () => {
         }, 100);
     };
 });
-
 const page = usePage<{
+    has_services_extension?: boolean;
     auth: {
         user: User;
     };
@@ -242,14 +244,23 @@ const page = usePage<{
                 <div class="justify-self-end">
                     <UpdateSidebarNotification></UpdateSidebarNotification>
                     <ul
-                        class="border-t border-default-background-separator pt-3 flex justify-between pr-4 items-center">
+                        class="border-t border-default-background-separator pt-3 gap-1 pr-2 flex justify-between items-center">
+                        <UserSettingsIcon></UserSettingsIcon>
+
                         <NavigationSidebarItem
                             class="flex-1"
                             title="Profile Settings"
                             :icon="Cog6ToothIcon"
                             :href="route('profile.show')"></NavigationSidebarItem>
 
-                        <UserSettingsIcon></UserSettingsIcon>
+                        <Button
+                            v-if="page.props.has_services_extension"
+                            variant="outline"
+                            size="xs"
+                            class="rounded-full ml-2 flex h-6 w-6 items-center text-xs text-icon-default justify-center"
+                            @click="openFeedback">
+                            ?
+                        </Button>
                     </ul>
                 </div>
             </div>

resources/js/utils/feedback.ts

@@ -0,0 +1,9 @@
+export function openFeedback(): void {
+    if (
+        typeof window !== 'undefined' &&
+        'showChatWindow' in window &&
+        typeof window.showChatWindow === 'function'
+    ) {
+        window.showChatWindow();
+    }
+}