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

Sidebar: make it possible to set the sidebar as collapsed (#72)

Browse Source 
* Sidebar: make it possible to set the sidebar as collapsed
This commit is contained in:
Giancarlo Buomprisco
2024-10-14 11:31:18 +02:00
committed by GitHub
parent d137df2675
commit b2c27eb25b
19 changed files with 221 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/app/(marketing)/_components/site-header-account-section.tsx
View File

@@ -52,6 +52,7 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
if (userData) {
return (
<PersonalAccountDropdown
showProfileName={false}
paths={paths}
features={features}
user={userData}

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

@@ -20,7 +20,7 @@ export function AdminSidebar(props: { user: User }) {
</SidebarContent>
<SidebarContent className={'mt-5'}>
<SidebarGroup label={'Admin'} collapsible={false}>
<SidebarGroup label={'Admin'}>
<SidebarItem end path={'/admin'} Icon={<Home className={'h-4'} />}>
Home
</SidebarItem>
@@ -35,7 +35,7 @@ export function AdminSidebar(props: { user: User }) {
</SidebarContent>
<SidebarContent className={'absolute bottom-4'}>
<ProfileAccountDropdownContainer user={props.user} collapsed={false} />
<ProfileAccountDropdownContainer user={props.user} />
</SidebarContent>
</Sidebar>
);

7
apps/web/app/home/(user)/_components/home-account-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/sidebar';
import featureFlagsConfig from '~/config/feature-flags.config';
import pathsConfig from '~/config/paths.config';
@@ -19,13 +22,13 @@ export function HomeAccountSelector(props: {
}>;
userId: string;
collapsed: boolean;
}) {
const router = useRouter();
const { collapsed } = useContext(SidebarContext);
return (
<AccountSelector
collapsed={props.collapsed}
collapsed={collapsed}
accounts={props.accounts}
features={features}
userId={props.userId}

2
apps/web/app/home/(user)/_components/home-menu-navigation.tsx
View File

@@ -53,14 +53,12 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
<HomeAccountSelector
userId={user.id}
accounts={accounts}
collapsed={false}
/>
</If>
<UserNotifications userId={user.id} />
<ProfileAccountDropdownContainer
collapsed={true}
user={user}
account={workspace}
/>

1
apps/web/app/home/(user)/_components/home-mobile-navigation.tsx
View File

@@ -71,7 +71,6 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
<HomeAccountSelector
userId={props.workspace.user.id}
accounts={props.workspace.accounts}
collapsed={false}
/>
</DropdownMenuGroup>

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

@@ -11,25 +11,28 @@ import { UserNotifications } from '~/home/(user)/_components/user-notifications'
import type { UserWorkspace } from '../_lib/server/load-user-workspace';
import { HomeAccountSelector } from './home-account-selector';
export function HomeSidebar(props: { workspace: UserWorkspace }) {
interface HomeSidebarProps {
workspace: UserWorkspace;
}
export function HomeSidebar(props: HomeSidebarProps) {
const { workspace, user, accounts } = props.workspace;
const collapsed = personalAccountNavigationConfig.sidebarCollapsed;
return (
<Sidebar>
<Sidebar collapsed={collapsed}>
<SidebarContent className={'h-16 justify-center'}>
<div className={'flex items-center justify-between space-x-2'}>
<If
condition={featuresFlagConfig.enableTeamAccounts}
fallback={<AppLogo className={'py-2'} />}
>
<HomeAccountSelector
userId={user.id}
collapsed={false}
accounts={accounts}
/>
<HomeAccountSelector userId={user.id} accounts={accounts} />
</If>
<UserNotifications userId={user.id} />
<div className={'hidden group-aria-[expanded=true]/sidebar:block'}>
<UserNotifications userId={user.id} />
</div>
</div>
</SidebarContent>
@@ -40,7 +43,6 @@ export function HomeSidebar(props: { workspace: UserWorkspace }) {
<div className={'absolute bottom-4 left-0 w-full'}>
<SidebarContent>
<ProfileAccountDropdownContainer
collapsed={false}
user={user}
account={workspace}
/>

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

@@ -39,6 +39,7 @@ function UserHomeLayout({ children }: React.PropsWithChildren) {
<PageMobileNavigation className={'flex items-center justify-between'}>
<AppLogo />
<HomeMobileNavigation workspace={workspace} />
</PageMobileNavigation>
@@ -56,4 +57,4 @@ function getLayoutStyle() {
(cookies().get('layout-style')?.value as PageLayoutStyle) ??
personalAccountNavigationConfig.style
);
}
}

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

@@ -20,6 +20,8 @@ export function TeamAccountAccountsSelector(params: {
value: string | null;
image: string | null;
}>;
collapsed?: boolean;
}) {
const router = useRouter();
@@ -28,7 +30,7 @@ export function TeamAccountAccountsSelector(params: {
selectedAccount={params.selectedAccount}
accounts={params.accounts}
userId={params.userId}
collapsed={false}
collapsed={params.collapsed}
features={features}
onAccountChange={(value) => {
const path = value

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

@@ -1,8 +1,14 @@
import { User } from '@supabase/supabase-js';
'use client';
import { Sidebar, SidebarContent } from '@kit/ui/sidebar';
import { useContext } from 'react';
import type { User } from '@supabase/supabase-js';
import { Sidebar, SidebarContent, SidebarContext } from '@kit/ui/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';
@@ -18,11 +24,12 @@ export function TeamAccountLayoutSidebar(props: {
account: string;
accountId: string;
accounts: AccountModel[];
collapsed: boolean;
user: User;
}) {
const collapsed = getTeamAccountSidebarConfig(props.account).sidebarCollapsed;
return (
<Sidebar>
<Sidebar collapsed={collapsed}>
<SidebarContainer
account={props.account}
accountId={props.accountId}
@@ -37,28 +44,40 @@ function SidebarContainer(props: {
account: string;
accountId: string;
accounts: AccountModel[];
collapsible?: boolean;
user: User;
}) {
const { account, accounts, user } = props;
const userId = user.id;
const { collapsed } = useContext(SidebarContext);
const className = cn(
'flex max-w-full items-center justify-between space-x-4',
{
'w-full justify-start space-x-0': collapsed,
},
);
return (
<>
<SidebarContent className={'h-16 justify-center'}>
<div
className={'flex max-w-full items-center justify-between space-x-4'}
>
<div className={className}>
<TeamAccountAccountsSelector
userId={userId}
selectedAccount={account}
accounts={accounts}
collapsed={collapsed}
/>
<TeamAccountNotifications
userId={userId}
accountId={props.accountId}
/>
<div
className={cn({
hidden: collapsed,
})}
>
<TeamAccountNotifications
userId={userId}
accountId={props.accountId}
/>
</div>
</div>
</SidebarContent>
@@ -70,7 +89,6 @@ function SidebarContainer(props: {
<SidebarContent>
<ProfileAccountDropdownContainer
user={props.user}
collapsed={false}
/>
</SidebarContent>
</div>

1
apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx
View File

@@ -62,7 +62,6 @@ export function TeamAccountNavigationMenu(props: {
<TeamAccountNotifications accountId={account.id} userId={user.id} />
<ProfileAccountDropdownContainer
collapsed={true}
user={user}
account={account}
/>

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

@@ -21,7 +21,7 @@ import { TeamAccountLayoutSidebar } from './_components/team-account-layout-side
import { TeamAccountNavigationMenu } from './_components/team-account-navigation-menu';
import { loadTeamWorkspace } from './_lib/server/team-account-workspace.loader';
interface Params {
interface TeamWorkspaceLayoutParams {
account: string;
}
@@ -29,7 +29,7 @@ function TeamWorkspaceLayout({
children,
params,
}: React.PropsWithChildren<{
params: Params;
params: TeamWorkspaceLayoutParams;
}>) {
const data = use(loadTeamWorkspace(params.account));
const style = getLayoutStyle(params.account);
@@ -45,7 +45,6 @@ function TeamWorkspaceLayout({
<PageNavigation>
<If condition={style === 'sidebar'}>
<TeamAccountLayoutSidebar
collapsed={false}
account={params.account}
accountId={data.account.id}
accounts={accounts}