Files
myeasycms-v2/apps/web/app/home/(user)/_components/home-menu-navigation.tsx
giancarlo aa01436f0d Add feature flag for team accounts in home-menu-navigation
In the home-menu-navigation.tsx file, a feature flag for displaying the Team Accounts section has been implemented leveraging the 'If' component and the flags from the feature-flags.config file. Now, the display of the HomeAccountSelector depends on the status of the 'enableTeamAccounts' flag.
2024-05-10 00:39:48 +07:00

67 lines
1.9 KiB
TypeScript

import {
BorderedNavigationMenu,
BorderedNavigationMenuItem,
} from '@kit/ui/bordered-navigation-menu';
import { If } from '@kit/ui/if';
import { AppLogo } from '~/components/app-logo';
import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
import featuresFlagConfig from '~/config/feature-flags.config';
import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
// home imports
import { HomeAccountSelector } from '../_components/home-account-selector';
import { UserNotifications } from '../_components/user-notifications';
import { type UserWorkspace } from '../_lib/server/load-user-workspace';
export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
const { workspace, user, accounts } = props.workspace;
const routes = personalAccountNavigationConfig.routes.reduce<
Array<{
path: string;
label: string;
Icon?: React.ReactNode;
end?: boolean | undefined;
}>
>((acc, item) => {
if ('children' in item) {
return [...acc, ...item.children];
}
if ('divider' in item) {
return acc;
}
return [...acc, item];
}, []);
return (
<div className={'flex w-full flex-1 justify-between'}>
<div className={'flex items-center space-x-8'}>
<AppLogo />
<BorderedNavigationMenu>
{routes.map((route) => (
<BorderedNavigationMenuItem {...route} key={route.path} />
))}
</BorderedNavigationMenu>
</div>
<div className={'flex justify-end space-x-2.5'}>
<If condition={featuresFlagConfig.enableTeamAccounts}>
<HomeAccountSelector accounts={accounts} collapsed={false} />
</If>
<UserNotifications userId={user.id} />
<ProfileAccountDropdownContainer
collapsed={true}
user={user}
account={workspace}
/>
</div>
</div>
);
}