e5658f7d06
Settings lived on its own fixed row at the bottom of the sidebar. It's a secondary destination, so it now sits inside the user dropdown (above Profile), where it groups naturally with Profile / Language / Log out and frees a fixed row of sidebar space. - UserMenuContent: Settings item added above Profile. - AppSidebar: footer Settings block removed, along with the now-unused IconSettings, settingsHub and useActiveUrl/urlIsActive.
268 lines
No EOL
9.7 KiB
Vue
268 lines
No EOL
9.7 KiB
Vue
<script setup lang="ts">
|
|
import { Link, router, usePage } from '@inertiajs/vue3';
|
|
import {
|
|
IconAffiliate,
|
|
IconAlertTriangle,
|
|
IconBolt,
|
|
IconBrandX,
|
|
IconCalendar,
|
|
IconChartBar,
|
|
IconChevronRight,
|
|
IconClock,
|
|
IconFileCheck,
|
|
IconFileText,
|
|
IconGift,
|
|
IconHash,
|
|
IconLifebuoy,
|
|
IconPhoto,
|
|
IconPencil,
|
|
IconPlus,
|
|
IconTag,
|
|
} from '@tabler/icons-vue';
|
|
import { trans } from 'laravel-vue-i18n';
|
|
import { computed } from 'vue';
|
|
|
|
import { create as createPost, index as postsIndex } from '@/actions/App/Http/Controllers/App/PostController';
|
|
import NavMain from '@/components/NavMain.vue';
|
|
import NavSupport from '@/components/NavSupport.vue';
|
|
import NavUser from '@/components/NavUser.vue';
|
|
import { Avatar } from '@/components/ui/avatar';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar';
|
|
import { useWorkspaceRole } from '@/composables/useWorkspaceRole';
|
|
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';
|
|
import { index as labels } from '@/routes/app/labels';
|
|
import { index as signatures } from '@/routes/app/signatures';
|
|
import { create as createWorkspaceRoute, switchMethod } from '@/routes/app/workspaces';
|
|
import type { NavItem } from '@/types';
|
|
|
|
interface Workspace {
|
|
id: string;
|
|
name: string;
|
|
logo_url: string | null;
|
|
}
|
|
|
|
const page = usePage();
|
|
const currentWorkspace = computed<Workspace | null>(() => page.props.auth.currentWorkspace as Workspace | null);
|
|
const workspaces = computed<Workspace[]>(() => page.props.auth.workspaces as Workspace[]);
|
|
const subscriptionPastDue = computed<boolean>(() => Boolean(page.props.auth.subscriptionPastDue));
|
|
|
|
const { canCreatePost, canManageAccounts, canManageAutomations, canCreateWorkspace } = useWorkspaceRole();
|
|
|
|
const mainNavItems = computed<NavItem[]>(() => [
|
|
{
|
|
title: trans('sidebar.posts.calendar'),
|
|
href: calendar.url(),
|
|
icon: IconCalendar,
|
|
},
|
|
{
|
|
title: trans('sidebar.analytics'),
|
|
href: analytics.url(),
|
|
icon: IconChartBar,
|
|
},
|
|
...(canManageAutomations.value
|
|
? [
|
|
{
|
|
title: trans('sidebar.automations'),
|
|
href: automations.url(),
|
|
icon: IconBolt,
|
|
badge: 'Beta',
|
|
},
|
|
]
|
|
: []),
|
|
]);
|
|
|
|
const postsNavItems = computed<NavItem[]>(() => [
|
|
{
|
|
title: trans('sidebar.posts.all'),
|
|
href: postsIndex.url(),
|
|
icon: IconFileText,
|
|
excludeActive: [postsIndex.url('scheduled'), postsIndex.url('published'), postsIndex.url('draft')],
|
|
},
|
|
{
|
|
title: trans('sidebar.posts.scheduled'),
|
|
href: postsIndex.url('scheduled'),
|
|
icon: IconClock,
|
|
},
|
|
{
|
|
title: trans('sidebar.posts.posted'),
|
|
href: postsIndex.url('published'),
|
|
icon: IconFileCheck,
|
|
},
|
|
{
|
|
title: trans('sidebar.posts.drafts'),
|
|
href: postsIndex.url('draft'),
|
|
icon: IconPencil,
|
|
},
|
|
]);
|
|
|
|
const workspaceNavItems = computed<NavItem[]>(() => [
|
|
...(canManageAccounts.value
|
|
? [
|
|
{
|
|
title: trans('sidebar.workspace.connections'),
|
|
href: accounts.url(),
|
|
icon: IconAffiliate,
|
|
},
|
|
]
|
|
: []),
|
|
...(canCreatePost.value
|
|
? [
|
|
{
|
|
title: trans('sidebar.workspace.signatures'),
|
|
href: signatures.url(),
|
|
icon: IconHash,
|
|
},
|
|
{
|
|
title: trans('sidebar.workspace.labels'),
|
|
href: labels.url(),
|
|
icon: IconTag,
|
|
},
|
|
{
|
|
title: trans('sidebar.workspace.assets'),
|
|
href: assets.url(),
|
|
icon: IconPhoto,
|
|
},
|
|
]
|
|
: []),
|
|
]);
|
|
|
|
const supportNavItems = computed(() => [
|
|
{
|
|
title: trans('sidebar.support.referral'),
|
|
href: 'https://affiliates.trypost.it/',
|
|
icon: IconGift,
|
|
},
|
|
{
|
|
title: trans('sidebar.support.stay_updated'),
|
|
href: 'https://x.com/trypostit',
|
|
icon: IconBrandX,
|
|
},
|
|
{
|
|
title: trans('sidebar.support.docs'),
|
|
href: 'https://docs.trypost.it',
|
|
icon: IconLifebuoy,
|
|
},
|
|
]);
|
|
|
|
const switchWorkspace = (workspaceId: string) => {
|
|
router.post(switchMethod.url(workspaceId), {}, {
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
const handleCreateWorkspace = () => {
|
|
router.visit(createWorkspaceRoute.url());
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="offcanvas">
|
|
<SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SidebarMenuButton size="lg"
|
|
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
|
|
<Avatar :src="currentWorkspace?.logo_url" :name="currentWorkspace?.name ?? '?'"
|
|
class="h-8 w-8 shrink-0 rounded-md border-2 border-foreground"
|
|
fallback-class="bg-violet-100 text-violet-700 font-bold" />
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-semibold">
|
|
{{ currentWorkspace?.name ?? $t('sidebar.select_workspace') }}
|
|
</span>
|
|
</div>
|
|
<IconChevronRight class="ml-auto size-4" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56"
|
|
align="start" side="right" :side-offset="4">
|
|
<DropdownMenuLabel>
|
|
{{ $t('sidebar.workspaces') }}
|
|
</DropdownMenuLabel>
|
|
<div class="space-y-0.5">
|
|
<DropdownMenuItem v-for="workspace in workspaces" :key="workspace.id"
|
|
:class="workspace.id === currentWorkspace?.id ? 'bg-accent text-accent-foreground' : ''"
|
|
@click="switchWorkspace(workspace.id)">
|
|
<Avatar :src="workspace.logo_url" :name="workspace.name"
|
|
class="h-6 w-6 shrink-0 rounded-md border-2 border-foreground" fallback-class="text-[10px] bg-violet-100 text-violet-700 font-bold" />
|
|
{{ workspace.name }}
|
|
</DropdownMenuItem>
|
|
</div>
|
|
<template v-if="canCreateWorkspace">
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem @click="handleCreateWorkspace">
|
|
<IconPlus class="size-4" />
|
|
{{ $t('sidebar.create_workspace') }}
|
|
</DropdownMenuItem>
|
|
</template>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarHeader>
|
|
|
|
<SidebarContent class="gap-px">
|
|
<!-- Create Post Button -->
|
|
<div v-if="currentWorkspace && canCreatePost" class="px-2 py-2">
|
|
<Link :href="createPost.url()" class="block">
|
|
<Button class="w-full">
|
|
{{ $t('sidebar.create_post') }}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<NavMain v-if="currentWorkspace" :items="mainNavItems" />
|
|
<NavMain v-if="currentWorkspace" :items="postsNavItems" :label="$t('sidebar.groups.posts')" />
|
|
<NavMain v-if="currentWorkspace && workspaceNavItems.length" :items="workspaceNavItems" :label="$t('sidebar.groups.workspace')" />
|
|
<NavSupport v-if="currentWorkspace" :items="supportNavItems" :label="$t('sidebar.groups.others')" />
|
|
</SidebarContent>
|
|
|
|
<SidebarFooter>
|
|
<div
|
|
v-if="subscriptionPastDue"
|
|
dusk="past-due-notice"
|
|
class="mx-1 mb-1 rounded-md border-2 border-destructive bg-destructive/10 p-3"
|
|
>
|
|
<div class="flex items-center gap-2 text-destructive">
|
|
<IconAlertTriangle class="size-4 shrink-0" />
|
|
<span class="text-sm font-semibold">{{ $t('billing.past_due_notice.title') }}</span>
|
|
</div>
|
|
<p class="mt-1 text-xs text-muted-foreground">
|
|
{{ $t('billing.past_due_notice.description') }}
|
|
</p>
|
|
<Button
|
|
as="a"
|
|
:href="portal.url()"
|
|
variant="destructive"
|
|
size="sm"
|
|
class="mt-2 w-full"
|
|
dusk="past-due-cta"
|
|
>
|
|
{{ $t('billing.past_due_notice.cta') }}
|
|
</Button>
|
|
</div>
|
|
<NavUser />
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
</template> |