2a157e8baa
* 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
108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import { use } from 'react';
|
|
|
|
import { cookies } from 'next/headers';
|
|
|
|
import { UserWorkspaceContextProvider } from '@kit/accounts/components';
|
|
import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
|
|
import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
|
|
|
|
import { AppLogo } from '~/components/app-logo';
|
|
import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
|
|
import { withI18n } from '~/lib/i18n/with-i18n';
|
|
|
|
// home imports
|
|
import { HomeMenuNavigation } from './_components/home-menu-navigation';
|
|
import { HomeMobileNavigation } from './_components/home-mobile-navigation';
|
|
import { HomeSidebar } from './_components/home-sidebar';
|
|
import { loadUserWorkspace } from './_lib/server/load-user-workspace';
|
|
|
|
function UserHomeLayout({ children }: React.PropsWithChildren) {
|
|
const state = use(getLayoutState());
|
|
|
|
if (state.style === 'sidebar') {
|
|
return <SidebarLayout>{children}</SidebarLayout>;
|
|
}
|
|
|
|
return <HeaderLayout>{children}</HeaderLayout>;
|
|
}
|
|
|
|
export default withI18n(UserHomeLayout);
|
|
|
|
function SidebarLayout({ children }: React.PropsWithChildren) {
|
|
const workspace = use(loadUserWorkspace());
|
|
const state = use(getLayoutState());
|
|
|
|
console.log('state', state);
|
|
|
|
return (
|
|
<UserWorkspaceContextProvider value={workspace}>
|
|
<SidebarProvider defaultOpen={state.open}>
|
|
<Page style={'sidebar'}>
|
|
<PageNavigation>
|
|
<HomeSidebar workspace={workspace} />
|
|
</PageNavigation>
|
|
|
|
<PageMobileNavigation className={'flex items-center justify-between'}>
|
|
<MobileNavigation workspace={workspace} />
|
|
</PageMobileNavigation>
|
|
|
|
{children}
|
|
</Page>
|
|
</SidebarProvider>
|
|
</UserWorkspaceContextProvider>
|
|
);
|
|
}
|
|
|
|
function HeaderLayout({ children }: React.PropsWithChildren) {
|
|
const workspace = use(loadUserWorkspace());
|
|
|
|
return (
|
|
<UserWorkspaceContextProvider value={workspace}>
|
|
<Page style={'header'}>
|
|
<PageNavigation>
|
|
<HomeMenuNavigation workspace={workspace} />
|
|
</PageNavigation>
|
|
|
|
<PageMobileNavigation className={'flex items-center justify-between'}>
|
|
<MobileNavigation workspace={workspace} />
|
|
</PageMobileNavigation>
|
|
|
|
{children}
|
|
</Page>
|
|
</UserWorkspaceContextProvider>
|
|
);
|
|
}
|
|
|
|
function MobileNavigation({
|
|
workspace,
|
|
}: {
|
|
workspace: Awaited<ReturnType<typeof loadUserWorkspace>>;
|
|
}) {
|
|
return (
|
|
<>
|
|
<AppLogo />
|
|
|
|
<HomeMobileNavigation workspace={workspace} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
async function getLayoutState() {
|
|
const cookieStore = await cookies();
|
|
|
|
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,
|
|
};
|
|
}
|