zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

134 improvement add a button that allows closing the sidebar (#135)

Browse Source 
* Enhance sidebar navigation and layout configuration

- Added support for configurable sidebar collapsed style
- Updated layout components to use new sidebar configuration
- Added environment variable for sidebar trigger display
- Simplified page header and navigation components
- Improved sidebar responsiveness and user experience

* Refactor admin account page layout and action buttons

- Moved action buttons from sidebar to PageHeader for both personal and team account pages
- Updated button variants and styling for better visual hierarchy
- Improved spacing and layout of account page components
- Added border to PageHeader for better visual separation

* Update version updater dialog styling

- Replaced `space-x-4` with `gap-x-2` for better spacing
- Wrapped translation text in a `span` for improved layout
- Maintained consistent icon and text alignment in dialog title

* Refactor sidebar state management and configuration

- Simplified sidebar context and removed minimized state
- Updated layout components to use new sidebar open/closed state
- Modified sidebar navigation to handle collapsed state dynamically
- Added environment variable for sidebar trigger and collapsed style
- Improved sidebar responsiveness and rendering logic

* Remove sidebar configuration and environment variables

- Simplified sidebar context by removing `minimized` state in components
- Updated account selector components to use simplified sidebar state
- Removed unused helper functions in sidebar implementation
This commit is contained in:
Giancarlo Buomprisco
2025-02-04 08:45:16 +07:00
committed by GitHub
parent b319ceb5bb
commit 2a157e8baa
22 changed files with 295 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
apps/web/app/admin/_components/admin-sidebar.tsx
View File

@@ -15,7 +15,6 @@ import {
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarProvider,
} from '@kit/ui/shadcn-sidebar';
import { AppLogo } from '~/components/app-logo';
@@ -25,46 +24,44 @@ export function AdminSidebar() {
const path = usePathname();
return (
<SidebarProvider>
<Sidebar>
<SidebarHeader className={'m-2'}>
<AppLogo href={'/admin'} />
</SidebarHeader>
<Sidebar collapsible="icon">
<SidebarHeader className={'m-2'}>
<AppLogo href={'/admin'} className="max-w-full" />
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Admin</SidebarGroupLabel>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Admin</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuButton isActive={path === '/admin'} asChild>
<Link className={'flex gap-2.5'} href={'/admin'}>
<LayoutDashboard className={'h-4'} />
<span>Dashboard</span>
</Link>
</SidebarMenuButton>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuButton isActive={path === '/admin'} asChild>
<Link className={'flex gap-2.5'} href={'/admin'}>
<LayoutDashboard className={'h-4'} />
<span>Dashboard</span>
</Link>
</SidebarMenuButton>
<SidebarMenuButton
isActive={path.includes('/admin/accounts')}
asChild
<SidebarMenuButton
isActive={path.includes('/admin/accounts')}
asChild
>
<Link
className={'flex size-full gap-2.5'}
href={'/admin/accounts'}
>
<Link
className={'flex size-full gap-2.5'}
href={'/admin/accounts'}
>
<Users className={'h-4'} />
<span>Accounts</span>
</Link>
</SidebarMenuButton>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<Users className={'h-4'} />
<span>Accounts</span>
</Link>
</SidebarMenuButton>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<ProfileAccountDropdownContainer />
</SidebarFooter>
</Sidebar>
</SidebarProvider>
<SidebarFooter>
<ProfileAccountDropdownContainer />
</SidebarFooter>
</Sidebar>
);
}

7
apps/web/app/admin/accounts/[id]/page.tsx
View File

@@ -3,7 +3,6 @@ import { cache } from 'react';
import { AdminAccountPage } from '@kit/admin/components/admin-account-page';
import { AdminGuard } from '@kit/admin/components/admin-guard';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
import { PageBody } from '@kit/ui/page';
interface Params {
params: Promise<{
@@ -24,11 +23,7 @@ async function AccountPage(props: Params) {
const params = await props.params;
const account = await loadAccount(params.id);
return (
<PageBody className={'py-4'}>
<AdminAccountPage account={account} />
</PageBody>
);
return <AdminAccountPage account={account} />;
}
export default AdminGuard(AccountPage);

6
apps/web/app/admin/accounts/page.tsx
View File

@@ -3,6 +3,7 @@ import { ServerDataLoader } from '@makerkit/data-loader-supabase-nextjs';
import { AdminAccountsTable } from '@kit/admin/components/admin-accounts-table';
import { AdminGuard } from '@kit/admin/components/admin-guard';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
import { PageBody, PageHeader } from '@kit/ui/page';
interface SearchParams {
@@ -28,10 +29,7 @@ async function AccountsPage(props: AdminAccountsPageProps) {
return (
<>
<PageHeader
title={'Accounts'}
description={`Below is the list of all the accounts in your application.`}
/>
<PageHeader description={<AppBreadcrumbs />} />
<PageBody>
<ServerDataLoader

36
apps/web/app/admin/layout.tsx
View File

@@ -1,4 +1,9 @@
import { use } from 'react';
import { cookies } from 'next/headers';
import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
import { AdminSidebar } from '~/admin/_components/admin-sidebar';
import { AdminMobileNavigation } from '~/admin/_components/mobile-navigation';
@@ -10,17 +15,30 @@ export const metadata = {
export const dynamic = 'force-dynamic';
export default function AdminLayout(props: React.PropsWithChildren) {
const state = use(getLayoutState());
return (
<Page style={'sidebar'}>
<PageNavigation>
<AdminSidebar />
</PageNavigation>
<SidebarProvider defaultOpen={state.open}>
<Page style={'sidebar'}>
<PageNavigation>
<AdminSidebar />
</PageNavigation>
<PageMobileNavigation>
<AdminMobileNavigation />
</PageMobileNavigation>
<PageMobileNavigation>
<AdminMobileNavigation />
</PageMobileNavigation>
{props.children}
</Page>
{props.children}
</Page>
</SidebarProvider>
);
}
async function getLayoutState() {
const cookieStore = await cookies();
const sidebarOpenCookie = cookieStore.get('sidebar:state');
return {
open: sidebarOpenCookie?.value !== 'true',
};
}

5
apps/web/app/admin/page.tsx
View File

@@ -5,10 +5,7 @@ import { PageBody, PageHeader } from '@kit/ui/page';
function AdminPage() {
return (
<>
<PageHeader
title={'Super Admin'}
description={`Your SaaS stats at a glance`}
/>
<PageHeader description={`Super Admin`} />
<PageBody>
<AdminDashboard />

2
apps/web/app/home/(user)/_components/home-account-selector.tsx
View File

@@ -29,7 +29,7 @@ export function HomeAccountSelector(props: {
return (
<AccountSelector
collapsed={context?.minimized}
collapsed={!context?.open}
collisionPadding={props.collisionPadding ?? 20}
accounts={props.accounts}
features={features}

4
apps/web/app/home/(user)/_components/home-page-header.tsx
View File

@@ -7,8 +7,6 @@ export function HomeLayoutPageHeader(
}>,
) {
return (
<PageHeader title={props.title} description={props.description}>
{props.children}
</PageHeader>
<PageHeader description={props.description}>{props.children}</PageHeader>
);
}

11
apps/web/app/home/(user)/_components/home-sidebar.tsx
View File

@@ -20,24 +20,23 @@ import { HomeAccountSelector } from './home-account-selector';
interface HomeSidebarProps {
workspace: UserWorkspace;
minimized: boolean;
}
export function HomeSidebar(props: HomeSidebarProps) {
const { workspace, user, accounts } = props.workspace;
const collapsible = personalAccountNavigationConfig.sidebarCollapsedStyle;
return (
<Sidebar>
<Sidebar collapsible={collapsible}>
<SidebarHeader className={'h-16 justify-center'}>
<div className={'flex items-center justify-between gap-x-3'}>
<If
condition={featuresFlagConfig.enableTeamAccounts}
fallback={
<AppLogo
className={cn({
'max-w-full': props.minimized,
'py-2': !props.minimized,
})}
className={cn(
'py-2 group-data-[minimized=true]:max-w-full group-data-[minimized=true]:py-0',
)}
/>
}
>

39
apps/web/app/home/(user)/layout.tsx
View File

@@ -3,12 +3,7 @@ import { use } from 'react';
import { cookies } from 'next/headers';
import { UserWorkspaceContextProvider } from '@kit/accounts/components';
import {
Page,
PageLayoutStyle,
PageMobileNavigation,
PageNavigation,
} from '@kit/ui/page';
import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
import { AppLogo } from '~/components/app-logo';
@@ -22,9 +17,9 @@ import { HomeSidebar } from './_components/home-sidebar';
import { loadUserWorkspace } from './_lib/server/load-user-workspace';
function UserHomeLayout({ children }: React.PropsWithChildren) {
const style = use(getLayoutStyle());
const state = use(getLayoutState());
if (style === 'sidebar') {
if (state.style === 'sidebar') {
return <SidebarLayout>{children}</SidebarLayout>;
}
@@ -35,14 +30,16 @@ export default withI18n(UserHomeLayout);
function SidebarLayout({ children }: React.PropsWithChildren) {
const workspace = use(loadUserWorkspace());
const sidebarMinimized = personalAccountNavigationConfig.sidebarCollapsed;
const state = use(getLayoutState());
console.log('state', state);
return (
<UserWorkspaceContextProvider value={workspace}>
<SidebarProvider minimized={sidebarMinimized}>
<SidebarProvider defaultOpen={state.open}>
<Page style={'sidebar'}>
<PageNavigation>
<HomeSidebar workspace={workspace} minimized={sidebarMinimized} />
<HomeSidebar workspace={workspace} />
</PageNavigation>
<PageMobileNavigation className={'flex items-center justify-between'}>
@@ -90,11 +87,21 @@ function MobileNavigation({
);
}
async function getLayoutStyle() {
async function getLayoutState() {
const cookieStore = await cookies();
return (
(cookieStore.get('layout-style')?.value as PageLayoutStyle) ??
personalAccountNavigationConfig.style
);
const layoutStyleCookie = cookieStore.get('layout-style');
const sidebarOpenCookie = cookieStore.get('sidebar:state');
const sidebarOpenCookieValue = sidebarOpenCookie
? sidebarOpenCookie.value === 'false'
: personalAccountNavigationConfig.sidebarCollapsed;
const style =
layoutStyleCookie?.value ?? personalAccountNavigationConfig.style;
return {
open: sidebarOpenCookieValue,
style,
};
}

8
apps/web/app/home/[account]/_components/team-account-accounts-selector.tsx
View File

@@ -1,8 +1,11 @@
'use client';
import { useContext } from 'react';
import { useRouter } from 'next/navigation';
import { AccountSelector } from '@kit/accounts/account-selector';
import { SidebarContext } from '@kit/ui/shadcn-sidebar';
import featureFlagsConfig from '~/config/feature-flags.config';
import pathsConfig from '~/config/paths.config';
@@ -20,17 +23,16 @@ export function TeamAccountAccountsSelector(params: {
value: string | null;
image: string | null;
}>;
collapsed?: boolean;
}) {
const router = useRouter();
const ctx = useContext(SidebarContext);
return (
<AccountSelector
selectedAccount={params.selectedAccount}
accounts={params.accounts}
userId={params.userId}
collapsed={params.collapsed}
collapsed={!ctx?.open}
features={features}
onAccountChange={(value) => {
const path = value

4
apps/web/app/home/[account]/_components/team-account-layout-page-header.tsx
View File

@@ -8,8 +8,6 @@ export function TeamAccountLayoutPageHeader(
}>,
) {
return (
<PageHeader title={props.title} description={props.description}>
{props.children}
</PageHeader>
<PageHeader description={props.description}>{props.children}</PageHeader>
);
}

13
apps/web/app/home/[account]/_components/team-account-layout-sidebar-navigation.tsx
View File

@@ -1,13 +1,12 @@
import { z } from 'zod';
import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
import { SidebarNavigation } from '@kit/ui/shadcn-sidebar';
import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
export function TeamAccountLayoutSidebarNavigation({
account,
config,
}: React.PropsWithChildren<{
account: string;
config: z.infer<typeof NavigationConfigSchema>;
}>) {
const routes = getTeamAccountSidebarConfig(account);
return <SidebarNavigation config={routes} />;
return <SidebarNavigation config={config} />;
}

23
apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx
View File

@@ -1,5 +1,3 @@
'use client';
import type { User } from '@supabase/supabase-js';
import {
@@ -7,11 +5,10 @@ import {
SidebarContent,
SidebarFooter,
SidebarHeader,
useSidebar,
} from '@kit/ui/shadcn-sidebar';
import { cn } from '@kit/ui/utils';
import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
import { TeamAccountAccountsSelector } from '../_components/team-account-accounts-selector';
@@ -47,27 +44,21 @@ function SidebarContainer(props: {
}) {
const { account, accounts, user } = props;
const userId = user.id;
const { minimized } = useSidebar();
const className = cn(
'flex max-w-full items-center justify-between space-x-4',
{
'w-full justify-start space-x-0': minimized,
},
);
const config = getTeamAccountSidebarConfig(account);
const collapsible = config.sidebarCollapsedStyle;
return (
<Sidebar>
<Sidebar collapsible={collapsible}>
<SidebarHeader className={'h-16 justify-center'}>
<div className={className}>
<div className={'flex items-center justify-between gap-x-3'}>
<TeamAccountAccountsSelector
userId={userId}
selectedAccount={account}
accounts={accounts}
collapsed={minimized}
/>
<div className="group-data-[minimized=true]:hidden">
<div className={'group-data-[minimized=true]:hidden'}>
<TeamAccountNotifications
userId={userId}
accountId={props.accountId}
@@ -77,7 +68,7 @@ function SidebarContainer(props: {
</SidebarHeader>
<SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
<TeamAccountLayoutSidebarNavigation account={account} />
<TeamAccountLayoutSidebarNavigation config={config} />
</SidebarContent>
<SidebarFooter>

5
apps/web/app/home/[account]/billing/error.tsx
View File

@@ -20,10 +20,7 @@ export default function BillingErrorPage({
return (
<>
<PageHeader
title={<Trans i18nKey={'common:routes.billing'} />}
description={<AppBreadcrumbs />}
/>
<PageHeader description={<AppBreadcrumbs />} />
<PageBody>
<div className={'flex flex-col space-y-4'}>

27
apps/web/app/home/[account]/layout.tsx
View File

@@ -27,9 +27,9 @@ type TeamWorkspaceLayoutProps = React.PropsWithChildren<{
function TeamWorkspaceLayout({ children, params }: TeamWorkspaceLayoutProps) {
const account = use(params).account;
const style = use(getLayoutStyle(account));
const state = use(getLayoutState(account));
if (style === 'sidebar') {
if (state.style === 'sidebar') {
return <SidebarLayout account={account}>{children}</SidebarLayout>;
}
@@ -43,6 +43,7 @@ function SidebarLayout({
account: string;
}>) {
const data = use(loadTeamWorkspace(account));
const state = use(getLayoutState(account));
const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
label: name,
@@ -50,11 +51,9 @@ function SidebarLayout({
image: picture_url,
}));
const minimized = getTeamAccountSidebarConfig(account).sidebarCollapsed;
return (
<TeamAccountWorkspaceContextProvider value={data}>
<SidebarProvider minimized={minimized}>
<SidebarProvider defaultOpen={state.open}>
<Page style={'sidebar'}>
<PageNavigation>
<TeamAccountLayoutSidebar
@@ -123,13 +122,21 @@ function HeaderLayout({
);
}
async function getLayoutStyle(account: string) {
async function getLayoutState(account: string) {
const cookieStore = await cookies();
const sidebarOpenCookie = cookieStore.get('sidebar:state');
const layoutCookie = cookieStore.get('layout-style');
const layoutStyle = layoutCookie?.value as PageLayoutStyle;
const config = getTeamAccountSidebarConfig(account);
return (
(cookieStore.get('layout-style')?.value as PageLayoutStyle) ??
getTeamAccountSidebarConfig(account).style
);
const sidebarOpenCookieValue = sidebarOpenCookie
? sidebarOpenCookie.value === 'false'
: config.sidebarCollapsed;
return {
open: sidebarOpenCookieValue,
style: layoutStyle ?? config.style,
};
}
export default withI18n(TeamWorkspaceLayout);

1
apps/web/config/personal-account-navigation.config.tsx
View File

@@ -43,4 +43,5 @@ export const personalAccountNavigationConfig = NavigationConfigSchema.parse({
routes,
style: process.env.NEXT_PUBLIC_USER_NAVIGATION_STYLE,
sidebarCollapsed: process.env.NEXT_PUBLIC_HOME_SIDEBAR_COLLAPSED,
sidebarCollapsedStyle: process.env.NEXT_PUBLIC_SIDEBAR_COLLAPSED_STYLE,
});

1
apps/web/config/team-account-navigation.config.tsx
View File

@@ -49,6 +49,7 @@ export function getTeamAccountSidebarConfig(account: string) {
routes: getRoutes(account),
style: process.env.NEXT_PUBLIC_TEAM_NAVIGATION_STYLE,
sidebarCollapsed: process.env.NEXT_PUBLIC_TEAM_SIDEBAR_COLLAPSED,
sidebarCollapsedStyle: process.env.NEXT_PUBLIC_SIDEBAR_COLLAPSED_STYLE,
});
}

167
packages/features/admin/src/components/admin-account-page.tsx
View File

@@ -14,6 +14,7 @@ import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import { Heading } from '@kit/ui/heading';
import { If } from '@kit/ui/if';
import { PageBody, PageHeader } from '@kit/ui/page';
import { ProfileAvatar } from '@kit/ui/profile-avatar';
import {
Table,
@@ -61,38 +62,22 @@ async function PersonalAccountPage(props: { account: Account }) {
'banned_until' in data.user && data.user.banned_until !== 'none';
return (
<div className={'flex flex-col space-y-4'}>
<AppBreadcrumbs
values={{
[props.account.id]:
props.account.name ?? props.account.email ?? 'Account',
}}
/>
<div className={'flex items-center justify-between'}>
<div className={'flex items-center gap-x-4'}>
<div className={'flex items-center gap-x-2.5'}>
<ProfileAvatar
pictureUrl={props.account.picture_url}
displayName={props.account.name}
/>
<span className={'text-sm font-semibold capitalize'}>
{props.account.name}
</span>
</div>
<Badge variant={'outline'}>Personal Account</Badge>
<If condition={isBanned}>
<Badge variant={'destructive'}>Banned</Badge>
</If>
</div>
<div className={'flex gap-x-1'}>
<>
<PageHeader
className="border-b"
description={
<AppBreadcrumbs
values={{
[props.account.id]:
props.account.name ?? props.account.email ?? 'Account',
}}
/>
}
>
<div className={'flex gap-x-2.5'}>
<If condition={isBanned}>
<AdminReactivateUserDialog userId={props.account.id}>
<Button size={'sm'} variant={'ghost'}>
<Button size={'sm'} variant={'secondary'}>
<ShieldPlus className={'mr-1 h-4'} />
Reactivate
</Button>
@@ -101,15 +86,15 @@ async function PersonalAccountPage(props: { account: Account }) {
<If condition={!isBanned}>
<AdminBanUserDialog userId={props.account.id}>
<Button size={'sm'} variant={'ghost'}>
<Ban className={'mr-1 h-4'} />
<Button size={'sm'} variant={'secondary'}>
<Ban className={'text-destructive mr-1 h-3'} />
Ban
</Button>
</AdminBanUserDialog>
<AdminImpersonateUserDialog userId={props.account.id}>
<Button size={'sm'} variant={'ghost'}>
<VenetianMask className={'mr-1 h-4'} />
<Button size={'sm'} variant={'secondary'}>
<VenetianMask className={'mr-1 h-4 text-blue-500'} />
Impersonate
</Button>
</AdminImpersonateUserDialog>
@@ -122,20 +107,43 @@ async function PersonalAccountPage(props: { account: Account }) {
</Button>
</AdminDeleteUserDialog>
</div>
</div>
</PageHeader>
<div className={'flex flex-col gap-y-8'}>
<SubscriptionsTable accountId={props.account.id} />
<PageBody className={'space-y-6 py-4'}>
<div className={'flex items-center justify-between'}>
<div className={'flex items-center gap-x-4'}>
<div className={'flex items-center gap-x-2.5'}>
<ProfileAvatar
pictureUrl={props.account.picture_url}
displayName={props.account.name}
/>
<div className={'divider-divider-x flex flex-col gap-y-2.5'}>
<Heading level={6}>Teams</Heading>
<span className={'text-sm font-semibold capitalize'}>
{props.account.name}
</span>
</div>
<div>
<AdminMembershipsTable memberships={memberships} />
<Badge variant={'outline'}>Personal Account</Badge>
<If condition={isBanned}>
<Badge variant={'destructive'}>Banned</Badge>
</If>
</div>
</div>
</div>
</div>
<div className={'flex flex-col gap-y-8'}>
<SubscriptionsTable accountId={props.account.id} />
<div className={'divider-divider-x flex flex-col gap-y-2.5'}>
<Heading level={6}>Teams</Heading>
<div>
<AdminMembershipsTable memberships={memberships} />
</div>
</div>
</div>
</PageBody>
</>
);
}
@@ -145,50 +153,57 @@ async function TeamAccountPage(props: {
const members = await getMembers(props.account.slug ?? '');
return (
<div className={'flex flex-col gap-y-4'}>
<AppBreadcrumbs
values={{
[props.account.id]:
props.account.name ?? props.account.email ?? 'Account',
}}
/>
<div className={'flex justify-between'}>
<div className={'flex items-center gap-x-4'}>
<div className={'flex items-center gap-x-2.5'}>
<ProfileAvatar
pictureUrl={props.account.picture_url}
displayName={props.account.name}
/>
<span className={'text-sm font-semibold capitalize'}>
{props.account.name}
</span>
</div>
<Badge variant={'outline'}>Team Account</Badge>
</div>
<>
<PageHeader
className="border-b"
description={
<AppBreadcrumbs
values={{
[props.account.id]:
props.account.name ?? props.account.email ?? 'Account',
}}
/>
}
>
<AdminDeleteAccountDialog accountId={props.account.id}>
<Button size={'sm'} variant={'destructive'}>
<BadgeX className={'mr-1 h-4'} />
Delete
</Button>
</AdminDeleteAccountDialog>
</div>
</PageHeader>
<div>
<div className={'flex flex-col gap-y-8'}>
<SubscriptionsTable accountId={props.account.id} />
<PageBody className={'space-y-6 py-4'}>
<div className={'flex justify-between'}>
<div className={'flex items-center gap-x-4'}>
<div className={'flex items-center gap-x-2.5'}>
<ProfileAvatar
pictureUrl={props.account.picture_url}
displayName={props.account.name}
/>
<div className={'flex flex-col gap-y-2.5'}>
<Heading level={6}>Team Members</Heading>
<span className={'text-sm font-semibold capitalize'}>
{props.account.name}
</span>
</div>
<AdminMembersTable members={members} />
<Badge variant={'outline'}>Team Account</Badge>
</div>
</div>
</div>
</div>
<div>
<div className={'flex flex-col gap-y-8'}>
<SubscriptionsTable accountId={props.account.id} />
<div className={'flex flex-col gap-y-2.5'}>
<Heading level={6}>Team Members</Heading>
<AdminMembersTable members={members} />
</div>
</div>
</div>
</PageBody>
</>
);
}

3
packages/ui/src/makerkit/navigation-config.schema.ts
View File

@@ -40,8 +40,9 @@ export const NavigationConfigSchema = z.object({
style: z.enum(['custom', 'sidebar', 'header']).default('sidebar'),
sidebarCollapsed: z
.enum(['false', 'true'])
.default('false')
.default('true')
.optional()
.transform((value) => value === `true`),
sidebarCollapsedStyle: z.enum(['offcanvas', 'icon', 'none']).default('icon'),
routes: z.array(z.union([RouteGroup, Divider])),
});

30
packages/ui/src/makerkit/page.tsx
View File

@@ -1,6 +1,8 @@
import * as React from 'react';
import { cn } from '../lib/utils';
import { Separator } from '../shadcn/separator';
import { SidebarTrigger } from '../shadcn/sidebar';
import { If } from './if';
export type PageLayoutStyle = 'sidebar' | 'header' | 'custom';
@@ -12,6 +14,10 @@ type PageProps = React.PropsWithChildren<{
sticky?: boolean;
}>;
const ENABLE_SIDEBAR_TRIGGER = process.env.NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER
? process.env.NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER === 'true'
: true;
export function Page(props: PageProps) {
switch (props.style) {
case 'header':
@@ -118,7 +124,7 @@ export function PageNavigation(props: React.PropsWithChildren) {
export function PageDescription(props: React.PropsWithChildren) {
return (
<div className={'h-6'}>
<div className={'flex h-6 items-center'}>
<div className={'text-muted-foreground text-xs leading-none font-normal'}>
{props.children}
</div>
@@ -130,7 +136,7 @@ export function PageTitle(props: React.PropsWithChildren) {
return (
<h1
className={
'font-heading text-xl leading-none font-bold tracking-tight dark:text-white'
'font-heading text-base leading-none font-bold tracking-tight dark:text-white'
}
>
{props.children}
@@ -147,10 +153,12 @@ export function PageHeader({
title,
description,
className,
displaySidebarTrigger = ENABLE_SIDEBAR_TRIGGER,
}: React.PropsWithChildren<{
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
displaySidebarTrigger?: boolean;
}>) {
return (
<div
@@ -159,10 +167,20 @@ export function PageHeader({
className,
)}
>
<div className={'flex flex-col'}>
<If condition={description}>
<PageDescription>{description}</PageDescription>
</If>
<div className={'flex flex-col gap-y-2'}>
<div className="flex items-center gap-x-2.5">
{displaySidebarTrigger ? (
<SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground h-4.5 w-4.5 cursor-pointer" />
) : null}
<If condition={description}>
<If condition={displaySidebarTrigger}>
<Separator orientation="vertical" className="h-4 w-px" />
</If>
<PageDescription>{description}</PageDescription>
</If>
</div>
<If condition={title}>
<PageTitle>{title}</PageTitle>

6
packages/ui/src/makerkit/version-updater.tsx
View File

@@ -50,9 +50,11 @@ export function VersionUpdater(props: { intervalTimeInSecond?: number }) {
<AlertDialog open={showDialog} onOpenChange={setShowDialog}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className={'flex items-center space-x-4'}>
<AlertDialogTitle className={'flex items-center gap-x-2'}>
<RocketIcon className={'h-4'} />
<Trans i18nKey="common:newVersionAvailable" />
<span>
<Trans i18nKey="common:newVersionAvailable" />
</span>
</AlertDialogTitle>
<AlertDialogDescription>

164
packages/ui/src/shadcn/sidebar.tsx
View File

@@ -36,9 +36,9 @@ const SIDEBAR_COOKIE_NAME = 'sidebar:state';
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = '16rem';
const SIDEBAR_WIDTH_MOBILE = '18rem';
const SIDEBAR_WIDTH_ICON = '3rem';
const SIDEBAR_WIDTH_ICON = '4rem';
const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
const SIDEBAR_MINIMIZED_WIDTH = '4rem';
const SIDEBAR_MINIMIZED_WIDTH = SIDEBAR_WIDTH_ICON;
type SidebarContext = {
state: 'expanded' | 'collapsed';
@@ -46,12 +46,8 @@ type SidebarContext = {
setOpen: (open: boolean) => void;
openMobile: boolean;
setOpenMobile: (open: boolean) => void;
setMinimized: (minimized: boolean) => void;
isMobile: boolean;
toggleSidebar: () => void;
minimized: boolean;
startMinimized: boolean;
expandOnHover: boolean;
};
export const SidebarContext = React.createContext<SidebarContext | null>(null);
@@ -71,13 +67,10 @@ const SidebarProvider: React.FC<
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
minimized?: boolean;
expandOnHover?: boolean;
}
> = ({
ref,
defaultOpen = true,
minimized: isMinimized = false,
open: openProp,
onOpenChange: setOpenProp,
className,
@@ -87,11 +80,7 @@ const SidebarProvider: React.FC<
}) => {
const isMobile = useIsMobile();
const [openMobile, setOpenMobile] = React.useState(false);
const [minimized, setMinimized] = React.useState(isMinimized);
const expandOnHover =
props.expandOnHover ??
process.env.NEXT_PUBLIC_EXPAND_SIDEBAR_ON_HOVER === 'true';
const collapsibleStyle = process.env.NEXT_PUBLIC_SIDEBAR_COLLAPSIBLE_STYLE;
// This is the internal state of the sidebar.
// We use openProp and setOpenProp for control from outside the component.
@@ -136,7 +125,6 @@ const SidebarProvider: React.FC<
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = open ? 'expanded' : 'collapsed';
const startMinimized = isMinimized;
const contextValue = React.useMemo<SidebarContext>(
() => ({
@@ -144,43 +132,33 @@ const SidebarProvider: React.FC<
open,
setOpen,
isMobile,
minimized,
setMinimized,
expandOnHover,
openMobile,
setOpenMobile,
toggleSidebar,
startMinimized,
}),
[
state,
open,
setOpen,
isMobile,
openMobile,
setOpenMobile,
toggleSidebar,
expandOnHover,
minimized,
setMinimized,
startMinimized,
],
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
);
const sidebarWidth = !open
? collapsibleStyle === 'icon'
? SIDEBAR_WIDTH_ICON
: collapsibleStyle === 'offcanvas'
? 0
: SIDEBAR_MINIMIZED_WIDTH
: SIDEBAR_WIDTH;
return (
<SidebarContext.Provider value={contextValue}>
<TooltipProvider delayDuration={0}>
<div
style={
{
'--sidebar-width': minimized
? SIDEBAR_MINIMIZED_WIDTH
: SIDEBAR_WIDTH,
'--sidebar-width': sidebarWidth,
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
...style,
} as React.CSSProperties
}
data-minimized={minimized}
data-minimized={!open}
className={cn(
'group text-sidebar-foreground has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
className,
@@ -212,42 +190,7 @@ const Sidebar: React.FC<
ref,
...props
}) => {
const {
isMobile,
state,
openMobile,
setOpenMobile,
minimized,
setMinimized,
expandOnHover,
startMinimized,
} = useSidebar();
useSidebar();
const isExpandedRef = React.useRef<boolean>(false);
const onMouseEnter =
startMinimized && expandOnHover
? () => {
setMinimized(false);
isExpandedRef.current = true;
}
: undefined;
const onMouseLeave =
startMinimized && expandOnHover
? () => {
if (!isRadixPopupOpen()) {
setMinimized(true);
isExpandedRef.current = false;
} else {
onRadixPopupClose(() => {
setMinimized(true);
isExpandedRef.current = false;
});
}
}
: undefined;
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
if (collapsible === 'none') {
return (
@@ -256,7 +199,7 @@ const Sidebar: React.FC<
'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
className,
{
[SIDEBAR_MINIMIZED_WIDTH]: minimized,
[SIDEBAR_MINIMIZED_WIDTH]: !open,
},
)}
ref={ref}
@@ -301,8 +244,6 @@ const Sidebar: React.FC<
data-collapsible={state === 'collapsed' ? collapsible : ''}
data-variant={variant}
data-side={side}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{/* This is what handles the sidebar gap on desktop */}
<div
@@ -569,7 +510,10 @@ const SidebarMenu: React.FC<React.ComponentProps<'ul'>> = ({
}) => (
<ul
data-sidebar="menu"
className={cn('flex w-full min-w-0 flex-col gap-1', className)}
className={cn(
'flex w-full min-w-0 flex-col gap-1 group-data-[minimized=true]:items-center',
className,
)}
{...props}
/>
);
@@ -581,7 +525,10 @@ const SidebarMenuItem: React.FC<React.ComponentProps<'li'>> = ({
}) => (
<li
data-sidebar="menu-item"
className={cn('group/menu-item relative', className)}
className={cn(
'group/menu-item relative flex group-data-[collapsible=icon]:justify-center',
className,
)}
{...props}
/>
);
@@ -625,7 +572,7 @@ const SidebarMenuButton: React.FC<
...props
}) => {
const Comp = asChild ? Slot : 'button';
const { isMobile, minimized } = useSidebar();
const { isMobile, open } = useSidebar();
const { t } = useTranslation();
const button = (
@@ -656,7 +603,7 @@ const SidebarMenuButton: React.FC<
<TooltipContent
side="right"
align="center"
hidden={isMobile || !minimized}
hidden={isMobile || open}
{...tooltip}
/>
</Tooltip>
@@ -806,7 +753,7 @@ export function SidebarNavigation({
config: SidebarConfig;
}>) {
const currentPath = usePathname() ?? '';
const { minimized } = useSidebar();
const { open } = useSidebar();
return (
<>
@@ -847,15 +794,12 @@ export function SidebarNavigation({
<If
condition={item.collapsible}
fallback={
<SidebarGroupLabel className={cn({ hidden: minimized })}>
<SidebarGroupLabel className={cn({ hidden: !open })}>
<Trans i18nKey={item.label} defaults={item.label} />
</SidebarGroupLabel>
}
>
<SidebarGroupLabel
className={cn({ hidden: minimized })}
asChild
>
<SidebarGroupLabel className={cn({ hidden: !open })} asChild>
<CollapsibleTrigger>
<Trans i18nKey={item.label} defaults={item.label} />
<ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
@@ -910,15 +854,15 @@ export function SidebarNavigation({
<div
className={cn('flex items-center gap-2', {
'mx-auto w-full gap-0 [&>svg]:flex-1 [&>svg]:shrink-0':
minimized,
!open,
})}
>
{child.Icon}
<span
className={cn(
'w-auto transition-opacity duration-300',
'transition-width w-auto transition-opacity duration-500',
{
'w-0 opacity-0': minimized,
'w-0 opacity-0': !open,
},
)}
>
@@ -927,11 +871,12 @@ export function SidebarNavigation({
defaults={child.label}
/>
</span>
<ChevronDown
className={cn(
'ml-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-180',
{
'hidden size-0': minimized,
'hidden size-0': !open,
},
)}
/>
@@ -958,8 +903,7 @@ export function SidebarNavigation({
>
<Link
className={cn('flex items-center', {
'mx-auto w-full gap-0! [&>svg]:flex-1':
minimized,
'mx-auto w-full gap-0! [&>svg]:flex-1': !open,
})}
href={path}
>
@@ -968,7 +912,7 @@ export function SidebarNavigation({
className={cn(
'w-auto transition-opacity duration-300',
{
'w-0 opacity-0': minimized,
'w-0 opacity-0': !open,
},
)}
>
@@ -992,7 +936,7 @@ export function SidebarNavigation({
{(children) => (
<SidebarMenuSub
className={cn({
'mx-0 px-1.5': minimized,
'mx-0 px-1.5': !open,
})}
>
{children.map((child) => {
@@ -1023,7 +967,7 @@ export function SidebarNavigation({
'flex items-center',
{
'mx-auto w-full gap-0! [&>svg]:flex-1':
minimized,
!open,
},
)}
href={child.path}
@@ -1033,8 +977,7 @@ export function SidebarNavigation({
className={cn(
'w-auto transition-opacity duration-300',
{
'w-0 opacity-0':
minimized,
'w-0 opacity-0': !open,
},
)}
>
@@ -1065,7 +1008,7 @@ export function SidebarNavigation({
</SidebarGroupContent>
</SidebarGroup>
<If condition={minimized && !isLast}>
<If condition={!open && !isLast}>
<SidebarSeparator />
</If>
</Container>
@@ -1102,30 +1045,3 @@ export {
SidebarTrigger,
useSidebar,
};
function getRadixPopup() {
return document.querySelector('[data-radix-popper-content-wrapper]');
}
function isRadixPopupOpen() {
return getRadixPopup() !== null;
}
function onRadixPopupClose(callback: () => void) {
const element = getRadixPopup();
if (element) {
const observer = new MutationObserver(() => {
if (!getRadixPopup()) {
callback();
observer.disconnect();
}
});
observer.observe(element.parentElement!, {
childList: true,
subtree: true,
});
}
}