Merge pull request #147 from dantaspaulo/feat/settings-into-user-menu

refactor(sidebar): move Settings from the sidebar footer into the user menu

resources/js/components/AppSidebar.vue

@@ -18,7 +18,6 @@ import {
     IconPencil,
     IconPlus,
     IconSelector,
-    IconSettings,
     IconTag,
 } from '@tabler/icons-vue';
 import { trans } from 'laravel-vue-i18n';
@@ -48,9 +47,8 @@ import {
     SidebarMenuItem,
     useSidebar,
 } from '@/components/ui/sidebar';
-import { useActiveUrl } from '@/composables/useActiveUrl';
 import { useWorkspaceRole } from '@/composables/useWorkspaceRole';
-import { accounts, analytics, calendar, settings as settingsHub } from '@/routes/app';
+import { accounts, analytics, calendar } from '@/routes/app';
 import { index as assets } from '@/routes/app/assets';
 import { index as automations } from '@/routes/app/automations';
 import { portal } from '@/routes/app/billing';
@@ -178,8 +176,6 @@ const switchWorkspace = (workspaceId: string) => {
     });
 };
 
-const { urlIsActive } = useActiveUrl();
-
 const handleCreateWorkspace = () => {
     router.visit(createWorkspaceRoute.url());
 };
@@ -272,20 +268,6 @@ const handleCreateWorkspace = () => {
                     {{ $t('billing.past_due_notice.cta') }}
                 </Button>
             </div>
-            <SidebarMenu>
-                <SidebarMenuItem>
-                    <SidebarMenuButton
-                        as-child
-                        :tooltip="trans('sidebar.settings')"
-                        :is-active="urlIsActive(settingsHub.url())"
-                    >
-                        <Link :href="settingsHub.url()">
-                            <IconSettings />
-                            <span>{{ $t('sidebar.settings') }}</span>
-                        </Link>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
-            </SidebarMenu>
             <NavUser />
         </SidebarFooter>
     </Sidebar>

resources/js/components/UserMenuContent.vue

@@ -3,6 +3,7 @@ import { Link, router, usePage } from '@inertiajs/vue3';
 import {
     IconLanguage,
     IconLogout,
+    IconSettings,
     IconUser,
 } from '@tabler/icons-vue';
 import { computed } from 'vue';
@@ -21,6 +22,7 @@ import {
 import UserInfo from '@/components/UserInfo.vue';
 import posthog from '@/posthog';
 import { logout } from '@/routes';
+import { settings as settingsHub } from '@/routes/app';
 import { edit } from '@/routes/app/profile';
 import type { User } from '@/types';
 
@@ -69,6 +71,12 @@ const handleLogout = () => {
                 {{ $t('sidebar.profile') }}
             </Link>
         </DropdownMenuItem>
+        <DropdownMenuItem :as-child="true">
+            <Link class="block w-full cursor-pointer" :href="settingsHub.url()" prefetch>
+                <IconSettings class="size-4" />
+                {{ $t('sidebar.settings') }}
+            </Link>
+        </DropdownMenuItem>
     </DropdownMenuGroup>
     <DropdownMenuSeparator />
     <DropdownMenuGroup>