admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Created a breadcrumb for left nav menu sub items (#6762)

Browse Source 
Closes https://github.com/twentyhq/twenty/issues/6484

<img width="270" alt="image"
src="https://github.com/user-attachments/assets/3cfd7a5a-5239-4998-87f7-a9b45e3b5229">
This commit is contained in:
Lucas Bordeau
2024-08-30 15:10:18 +02:00
committed by GitHub
parent 09ac8e3274
commit 26eba76fb5
16 changed files with 450 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
View File

@ -5,6 +5,7 @@ import {
IconCalendarEvent,
IconCode,
IconColorSwatch,
IconComponent,
IconCurrencyDollar,
IconDoorEnter,
IconFunction,
@ -19,12 +20,26 @@ import {
import { useAuth } from '@/auth/hooks/useAuth';
import { billingState } from '@/client-config/states/billingState';
import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import {
NavigationDrawerItem,
NavigationDrawerItemIndentationLevel,
} from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { getNavigationSubItemState } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemState';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { matchPath, resolvePath, useLocation } from 'react-router-dom';
type SettingsNavigationItem = {
label: string;
path: SettingsPath;
Icon: IconComponent;
matchSubPages?: boolean;
indentationLevel?: NavigationDrawerItemIndentationLevel;
};
export const SettingsNavigationDrawerItems = () => {
const { signOut } = useAuth();
@ -38,6 +53,39 @@ export const SettingsNavigationDrawerItems = () => {
const isBillingPageEnabled =
billing?.isBillingEnabled && !isFreeAccessEnabled;
// TODO: Refactor this part to only have arrays of navigation items
const currentPathName = useLocation().pathname;
const accountSubSettings: SettingsNavigationItem[] = [
{
label: 'Emails',
path: SettingsPath.AccountsEmails,
Icon: IconMail,
matchSubPages: true,
indentationLevel: 2,
},
{
label: 'Calendars',
path: SettingsPath.AccountsCalendars,
Icon: IconCalendarEvent,
matchSubPages: true,
indentationLevel: 2,
},
];
const selectedIndex = accountSubSettings.findIndex((accountSubSetting) => {
const href = getSettingsPagePath(accountSubSetting.path);
const pathName = resolvePath(href).pathname;
return matchPath(
{
path: pathName,
end: !accountSubSetting.matchSubPages,
},
currentPathName,
);
});
return (
<>
<NavigationDrawerSection>
@ -58,23 +106,21 @@ export const SettingsNavigationDrawerItems = () => {
path={SettingsPath.Accounts}
Icon={IconAt}
/>
<SettingsNavigationDrawerItem
level={2}
label="Emails"
path={SettingsPath.AccountsEmails}
Icon={IconMail}
matchSubPages
/>
<SettingsNavigationDrawerItem
level={2}
label="Calendars"
path={SettingsPath.AccountsCalendars}
Icon={IconCalendarEvent}
matchSubPages
/>
{accountSubSettings.map((navigationItem, index) => (
<SettingsNavigationDrawerItem
label={navigationItem.label}
path={navigationItem.path}
Icon={navigationItem.Icon}
indentationLevel={navigationItem.indentationLevel}
subItemState={getNavigationSubItemState({
arrayLength: accountSubSettings.length,
index,
selectedIndex,
})}
/>
))}
</NavigationDrawerItemGroup>
</NavigationDrawerSection>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" />
<SettingsNavigationDrawerItem
@ -125,7 +171,6 @@ export const SettingsNavigationDrawerItems = () => {
/>
)}
</NavigationDrawerSection>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Other" />
<SettingsNavigationDrawerItem