vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(sidebar): open the workspace menu to the side on desktop with a matching icon

Browse source 
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.
This commit is contained in:
Paulo Castellano 2026-07-18 14:34:15 -03:00
parent bc93667fcf
commit f63286efd4
2 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/js/components/AppSidebar.vue
View file

@ -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>

4
resources/js/components/NavUser.vue
View file

@ -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