From f63286efd4b877633fe15acc694687b99dff4b09 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 14:34:15 -0300
Subject: [PATCH] fix(sidebar): open the workspace menu to the side on desktop
 with a matching icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The workspace switcher now opens to the right on desktop (like the user menu)
and stays below the trigger on mobile, via useSidebar()'s isMobile. The trigger
icon follows the direction: chevron-right on desktop, an up/down selector on
mobile — for both the workspace switcher and the user menu.
---
 resources/js/components/AppSidebar.vue | 10 ++++++++--
 resources/js/components/NavUser.vue    |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 24a33ad4..3f316334 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -17,6 +17,7 @@ import {
     IconPhoto,
     IconPencil,
     IconPlus,
+    IconSelector,
     IconSettings,
     IconTag,
 } from '@tabler/icons-vue';
@@ -45,6 +46,7 @@ import {
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
+    useSidebar,
 } from '@/components/ui/sidebar';
 import { useActiveUrl } from '@/composables/useActiveUrl';
 import { useWorkspaceRole } from '@/composables/useWorkspaceRole';
@@ -70,6 +72,10 @@ const subscriptionPastDue = computed<boolean>(() => Boolean(page.props.auth.subs
 
 const { canCreatePost, canManageAccounts, canManageAutomations, canCreateWorkspace } = useWorkspaceRole();
 
+// Open the workspace menu to the side on desktop (like the user menu) but keep
+// it below the trigger on mobile, where the sidebar is an overlay sheet.
+const { isMobile } = useSidebar();
+
 const mainNavItems = computed<NavItem[]>(() => [
     {
         title: trans('sidebar.posts.calendar'),
@@ -196,11 +202,11 @@ const handleCreateWorkspace = () => {
                                         {{ currentWorkspace?.name ?? $t('sidebar.select_workspace') }}
                                     </span>
                                 </div>
-                                <IconChevronRight class="ml-auto size-4" />
+                                <component :is="isMobile ? IconSelector : IconChevronRight" class="ml-auto size-4" />
                             </SidebarMenuButton>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent class="w-(--reka-dropdown-menu-trigger-width) min-w-56"
-                            align="start" side="bottom" :side-offset="4">
+                            align="start" :side="isMobile ? 'bottom' : 'right'" :side-offset="4">
                             <DropdownMenuLabel>
                                 {{ $t('sidebar.workspaces') }}
                             </DropdownMenuLabel>
diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index 349b273a..8253dbf4 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
-import { IconChevronRight } from '@tabler/icons-vue';
+import { IconChevronRight, IconSelector } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
 import NotificationBell from '@/components/NotificationBell.vue';
@@ -38,7 +38,7 @@ const { isMobile } = useSidebar();
                         data-test="sidebar-menu-button"
                     >
                         <UserInfo :user="user" />
-                        <IconChevronRight class="ml-auto size-4" />
+                        <component :is="isMobile ? IconSelector : IconChevronRight" class="ml-auto size-4" />
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent