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,
});
}