Skip to content

Commit d2f75cc

Browse files
OnatcerOnatcer
committed
update organization switcher to use shadcn dropdownmenu
1 parent 250379d commit d2f75cc

3 files changed

Lines changed: 64 additions & 57 deletions

File tree

‎resources/js/Components/OrganizationSwitcher.vue‎

Lines changed: 57 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
<script setup lang="ts">
22
import { ChevronDownIcon } from '@heroicons/vue/20/solid';
3-
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
4-
import DropdownLink from '@/Components/DropdownLink.vue';
5-
import { usePage } from '@inertiajs/vue3';
3+
import { Link, usePage } from '@inertiajs/vue3';
4+
import {
5+
Cog6ToothIcon,
6+
PlusCircleIcon,
7+
CheckCircleIcon,
8+
ArrowRightIcon,
9+
} from '@heroicons/vue/24/solid';
610
import type { Organization, User } from '@/types/models';
711
import { isBillingActivated } from '@/utils/billing';
812
import { canManageBilling } from '@/utils/permissions';
913
import { switchOrganization } from '@/utils/useOrganization';
14+
import {
15+
DropdownMenu,
16+
DropdownMenuTrigger,
17+
DropdownMenuContent,
18+
DropdownMenuItem,
19+
DropdownMenuLabel,
20+
} from '@/Components/ui/dropdown-menu';
1021
1122
const page = usePage<{
1223
jetstream: {
@@ -28,84 +39,79 @@ const switchToTeam = (organization: Organization) => {
2839
</script>
2940

3041
<template>
31-
<Dropdown v-if="page.props.jetstream.hasTeamFeatures" align="center" width="60">
32-
<template #trigger>
42+
<DropdownMenu v-if="page.props.jetstream.hasTeamFeatures">
43+
<DropdownMenuTrigger class="w-full text-left">
3344
<div
3445
data-testid="organization_switcher"
35-
class="flex hover:bg-white/10 cursor-pointer transition px-2 py-1 rounded-lg w-full items-center justify-between font-medium">
46+
class="flex hover:bg-white/10 cursor-pointer transition pl-2 py-1 rounded w-full items-center justify-between">
3647
<div class="flex flex-1 space-x-2 items-center w-[calc(100%-30px)]">
3748
<div
38-
class="rounded sm:rounded-lg bg-blue-900 font-semibold text-xs sm:text-sm flex-shrink-0 text-white w-5 sm:w-6 h-5 sm:h-6 flex items-center justify-center">
49+
class="rounded bg-blue-900 font-medium text-xs flex-shrink-0 text-white w-5 h-5 flex items-center justify-center">
3950
{{ page.props.auth.user.current_team.name.slice(0, 1).toUpperCase() }}
4051
</div>
41-
<span class="text-sm flex-1 truncate font-semibold">
52+
<span class="text-xs flex-1 truncate font-medium">
4253
{{ page.props.auth.user.current_team.name }}
4354
</span>
4455
</div>
4556
<div class="w-[30px]">
46-
<button
47-
class="p-1 transition hover:bg-white/10 rounded-full flex items-center w-8 h-8">
48-
<ChevronDownIcon class="w-5 sm:w-full mt-[1px]"></ChevronDownIcon>
49-
</button>
57+
<div class="p-1 rounded-full flex items-center w-6 h-6">
58+
<ChevronDownIcon class="w-4 sm:w-full mt-[1px]"></ChevronDownIcon>
59+
</div>
5060
</div>
5161
</div>
52-
</template>
62+
</DropdownMenuTrigger>
5363

54-
<template #content>
64+
<DropdownMenuContent align="start">
5565
<div class="w-60">
56-
<!-- Organization Management -->
57-
<div class="block px-4 py-2 text-xs text-text-secondary">Manage Organization</div>
66+
<DropdownMenuLabel>Manage Organization</DropdownMenuLabel>
5867

59-
<!-- Organization Settings -->
60-
<DropdownLink :href="route('teams.show', page.props.auth.user.current_team.id)">
61-
Organization Settings
62-
</DropdownLink>
68+
<DropdownMenuItem as-child>
69+
<Link
70+
:href="route('teams.show', page.props.auth.user.current_team.id)"
71+
class="inline-flex items-center gap-2.5 w-full">
72+
<Cog6ToothIcon class="w-5 h-5 text-icon-default" />
73+
<span>Organization Settings</span>
74+
</Link>
75+
</DropdownMenuItem>
6376

64-
<DropdownLink v-if="canManageBilling() && isBillingActivated()" href="/billing">
65-
Billing
66-
</DropdownLink>
77+
<DropdownMenuItem v-if="canManageBilling() && isBillingActivated()" as-child>
78+
<Link href="/billing" class="inline-flex items-center w-full"> Billing </Link>
79+
</DropdownMenuItem>
6780

68-
<DropdownLink
69-
v-if="page.props.jetstream.canCreateTeams"
70-
:href="route('teams.create')">
71-
Create new organization
72-
</DropdownLink>
81+
<DropdownMenuItem v-if="page.props.jetstream.canCreateTeams" as-child>
82+
<Link
83+
:href="route('teams.create')"
84+
class="inline-flex items-center gap-2.5 w-full">
85+
<PlusCircleIcon class="w-5 h-5 text-icon-default" />
86+
<span>Create new organization</span>
87+
</Link>
88+
</DropdownMenuItem>
7389

74-
<!-- Organization Switcher -->
7590
<template v-if="page.props.auth.user.all_teams.length > 1">
7691
<div class="border-t border-card-background-separator" />
7792

78-
<div class="block px-4 py-2 text-xs text-text-secondary">
79-
Switch Organizations
80-
</div>
93+
<DropdownMenuLabel>Switch Organizations</DropdownMenuLabel>
8194

8295
<template v-for="team in page.props.auth.user.all_teams" :key="team.id">
8396
<form @submit.prevent="switchToTeam(team)">
84-
<DropdownLink as="button">
85-
<div class="flex items-center">
86-
<svg
97+
<DropdownMenuItem
98+
as-child
99+
class="inline-flex gap-2.5 items-center w-full">
100+
<button type="submit">
101+
<CheckCircleIcon
87102
v-if="team.id == page.props.auth.user.current_team_id"
88-
class="me-2 h-5 w-5 text-green-400"
89-
xmlns="http://www.w3.org/2000/svg"
90-
fill="none"
91-
viewBox="0 0 24 24"
92-
stroke-width="1.5"
93-
stroke="currentColor">
94-
<path
95-
stroke-linecap="round"
96-
stroke-linejoin="round"
97-
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
98-
</svg>
103+
class="h-5 w-5 text-green-400" />
104+
<ArrowRightIcon v-else class="h-5 w-5 text-icon-default" />
99105

100-
<div>
106+
<div class="w-full truncate text-left">
101107
{{ team.name }}
102108
</div>
103-
</div>
104-
</DropdownLink>
109+
</button>
110+
</DropdownMenuItem>
105111
</form>
106112
</template>
107113
</template>
108114
</div>
109-
</template>
110-
</Dropdown>
115+
</DropdownMenuContent>
116+
</DropdownMenu>
111117
</template>

‎resources/js/Components/UserSettingsIcon.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
DropdownMenuTrigger,
77
DropdownMenuContent,
88
DropdownMenuItem,
9+
DropdownMenuLabel,
910
} from '@/Components/ui/dropdown-menu';
1011
import {
1112
UserCircleIcon,
@@ -83,13 +84,13 @@ const openFeedback = () => {
8384
</DropdownMenuTrigger>
8485

8586
<DropdownMenuContent align="center" class="min-w-40">
86-
<div class="block px-2 py-2 text-xs text-gray-400">Manage Account</div>
87+
<DropdownMenuLabel>Manage Account</DropdownMenuLabel>
8788

8889
<DropdownMenuItem as-child>
8990
<Link
9091
:href="route('profile.show')"
9192
class="inline-flex items-center gap-2.5 w-full">
92-
<UserCircleIcon class="w-5 h-5 text-text-secondary" />
93+
<UserCircleIcon class="w-5 h-5 text-icon-default" />
9394
<span>Profile</span>
9495
</Link>
9596
</DropdownMenuItem>
@@ -98,7 +99,7 @@ const openFeedback = () => {
9899
<Link
99100
:href="route('api-tokens.index')"
100101
class="inline-flex items-center gap-2.5 w-full">
101-
<KeyIcon class="w-5 h-5 text-text-secondary" />
102+
<KeyIcon class="w-5 h-5 text-icon-default" />
102103
<span>API Tokens</span>
103104
</Link>
104105
</DropdownMenuItem>
@@ -108,15 +109,15 @@ const openFeedback = () => {
108109
type="button"
109110
class="inline-flex items-center gap-2.5 w-full"
110111
@click="openFeedback">
111-
<ChatBubbleLeftRightIcon class="w-5 h-5 text-text-secondary" />
112+
<ChatBubbleLeftRightIcon class="w-5 h-5 text-icon-default" />
112113
<span>Feedback</span>
113114
</button>
114115
</DropdownMenuItem>
115116

116117
<form class="w-full" @submit.prevent="logout">
117118
<DropdownMenuItem as-child class="inline-flex items-center gap-2.5 w-full">
118119
<button type="submit" data-testid="logout_button">
119-
<ArrowLeftOnRectangleIcon class="w-5 h-5 text-text-secondary" />
120+
<ArrowLeftOnRectangleIcon class="w-5 h-5 text-icon-default" />
120121
<span>Log Out</span>
121122
</button>
122123
</DropdownMenuItem>

‎resources/js/Components/ui/dropdown-menu/DropdownMenuLabel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
1919
<template>
2020
<DropdownMenuLabel
2121
v-bind="forwardedProps"
22-
:class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
22+
:class="cn('block px-2 py-2 text-xs text-gray-400', inset && 'pl-8', props.class)">
2323
<slot />
2424
</DropdownMenuLabel>
2525
</template>

0 commit comments

Comments
 (0)