Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Collapsible menu #5846

Merged
merged 7 commits into from
Jun 14, 2024
Merged

Collapsible menu #5846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3fbaf4b
POC collapsible menu
FelixMalfait Jun 12, 2024
e4c684c
Use recoil for state
FelixMalfait Jun 13, 2024
e5c0d75
Recoil family state
FelixMalfait Jun 13, 2024
0ac81e6
Collapsible favorites
FelixMalfait Jun 13, 2024
709d6b6
Update settings nav menu
FelixMalfait Jun 13, 2024
25a2faf
fix family state
FelixMalfait Jun 13, 2024
8dd02b3
Fix style
FelixMalfait Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 52 additions & 41 deletions packages/twenty-front/src/modules/favorites/components/Favorites.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { Avatar } from 'twenty-ui';

import { FavoritesSkeletonLoader } from '@/favorites/components/FavoritesSkeletonLoader';
Expand All @@ -8,6 +9,7 @@ import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableLi
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';

import { useFavorites } from '../hooks/useFavorites';
Expand Down Expand Up @@ -36,6 +38,10 @@ export const Favorites = () => {
const { favorites, handleReorderFavorite } = useFavorites();
const loading = useIsPrefetchLoading();

const { toggleNavigationSection, isNavigationSectionOpenState } =
useNavigationSection('Favorites');
const isNavigationSectionOpen = useRecoilValue(isNavigationSectionOpenState);

if (loading) {
return <FavoritesSkeletonLoader />;
}
Expand All @@ -44,48 +50,53 @@ export const Favorites = () => {

return (
<StyledContainer>
<NavigationDrawerSectionTitle label="Favorites" />
<DraggableList
onDragEnd={handleReorderFavorite}
draggableItems={
<>
{favorites.map((favorite, index) => {
const {
id,
labelIdentifier,
avatarUrl,
avatarType,
link,
recordId,
} = favorite;

return (
<DraggableItem
key={id}
draggableId={id}
index={index}
itemComponent={
<StyledNavigationDrawerItem
key={id}
label={labelIdentifier}
Icon={() => (
<StyledAvatar
entityId={recordId}
avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
type={avatarType}
placeholder={labelIdentifier}
className="fav-avatar"
/>
)}
to={link}
/>
}
/>
);
})}
</>
}
<NavigationDrawerSectionTitle
label="Favorites"
onClick={() => toggleNavigationSection()}
/>
{isNavigationSectionOpen && (
<DraggableList
onDragEnd={handleReorderFavorite}
draggableItems={
<>
{favorites.map((favorite, index) => {
const {
id,
labelIdentifier,
avatarUrl,
avatarType,
link,
recordId,
} = favorite;

return (
<DraggableItem
key={id}
draggableId={id}
index={index}
itemComponent={
<StyledNavigationDrawerItem
key={id}
label={labelIdentifier}
Icon={() => (
<StyledAvatar
entityId={recordId}
avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
type={avatarType}
placeholder={labelIdentifier}
className="fav-avatar"
/>
)}
to={link}
/>
}
/>
);
})}
</>
}
/>
)}
</StyledContainer>
);
};
7 changes: 2 additions & 5 deletions packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { Favorites } from '@/favorites/components/Favorites';
import { ObjectMetadataNavItems } from '@/object-metadata/components/ObjectMetadataNavItems';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

Expand Down Expand Up @@ -56,10 +55,8 @@ export const MainNavigationDrawerItems = () => {

<Favorites />

<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" />
<ObjectMetadataNavItems />
</NavigationDrawerSection>
<ObjectMetadataNavItems isRemote={false} />
<ObjectMetadataNavItems isRemote={true} />
</>
);
};
123 changes: 74 additions & 49 deletions packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useLocation } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { useIcons } from 'twenty-ui';

import { ObjectMetadataNavItemsSkeletonLoader } from '@/object-metadata/components/ObjectMetadataNavItemsSkeletonLoader';
Expand All @@ -7,11 +8,21 @@ import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { View } from '@/views/types/View';
import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';

export const ObjectMetadataNavItems = () => {
export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
const { toggleNavigationSection, isNavigationSectionOpenState } =
useNavigationSection('Objects' + (isRemote ? 'Remote' : 'Workspace'));
const isNavigationSectionOpen = useRecoilValue(isNavigationSectionOpenState);

const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
const filteredActiveObjectMetadataItems = activeObjectMetadataItems.filter(
(item) => (isRemote ? item.isRemote : !item.isRemote),
);
const { getIcon } = useIcons();
const currentPath = useLocation().pathname;

Expand All @@ -23,55 +34,69 @@ export const ObjectMetadataNavItems = () => {
}

return (
<>
{[
...activeObjectMetadataItems
.filter((item) =>
['person', 'company', 'opportunity'].includes(item.nameSingular),
)
.sort((objectMetadataItemA, objectMetadataItemB) => {
const order = ['person', 'company', 'opportunity'];
const indexA = order.indexOf(objectMetadataItemA.nameSingular);
const indexB = order.indexOf(objectMetadataItemB.nameSingular);
if (indexA === -1 || indexB === -1) {
return objectMetadataItemA.nameSingular.localeCompare(
objectMetadataItemB.nameSingular,
);
}
return indexA - indexB;
}),
...activeObjectMetadataItems
.filter(
(item) =>
!['person', 'company', 'opportunity'].includes(item.nameSingular),
)
.sort((objectMetadataItemA, objectMetadataItemB) => {
return new Date(objectMetadataItemA.createdAt) <
new Date(objectMetadataItemB.createdAt)
? 1
: -1;
}),
].map((objectMetadataItem) => {
const objectMetadataViews = getObjectMetadataItemViews(
objectMetadataItem.id,
views,
);
const viewId = objectMetadataViews[0]?.id;
filteredActiveObjectMetadataItems.length > 0 && (
<NavigationDrawerSection>
<NavigationDrawerSectionTitle
label={isRemote ? 'Remote' : 'Workspace'}
onClick={() => toggleNavigationSection()}
/>

{isNavigationSectionOpen &&
[
...filteredActiveObjectMetadataItems
.filter((item) =>
['person', 'company', 'opportunity'].includes(
item.nameSingular,
),
)
.sort((objectMetadataItemA, objectMetadataItemB) => {
const order = ['person', 'company', 'opportunity'];
const indexA = order.indexOf(objectMetadataItemA.nameSingular);
const indexB = order.indexOf(objectMetadataItemB.nameSingular);
if (indexA === -1 || indexB === -1) {
return objectMetadataItemA.nameSingular.localeCompare(
objectMetadataItemB.nameSingular,
);
}
return indexA - indexB;
}),
...filteredActiveObjectMetadataItems
.filter(
(item) =>
!['person', 'company', 'opportunity'].includes(
item.nameSingular,
),
)
.sort((objectMetadataItemA, objectMetadataItemB) => {
return new Date(objectMetadataItemA.createdAt) <
new Date(objectMetadataItemB.createdAt)
? 1
: -1;
}),
].map((objectMetadataItem) => {
const objectMetadataViews = getObjectMetadataItemViews(
objectMetadataItem.id,
views,
);
const viewId = objectMetadataViews[0]?.id;

const navigationPath = `/objects/${objectMetadataItem.namePlural}${
viewId ? `?view=${viewId}` : ''
}`;
const navigationPath = `/objects/${objectMetadataItem.namePlural}${
viewId ? `?view=${viewId}` : ''
}`;

return (
<NavigationDrawerItem
key={objectMetadataItem.id}
label={objectMetadataItem.labelPlural}
to={navigationPath}
active={currentPath === `/objects/${objectMetadataItem.namePlural}`}
Icon={getIcon(objectMetadataItem.icon)}
/>
);
})}
</>
return (
<NavigationDrawerItem
key={objectMetadataItem.id}
label={objectMetadataItem.labelPlural}
to={navigationPath}
active={
currentPath === `/objects/${objectMetadataItem.namePlural}`
}
Icon={getIcon(objectMetadataItem.icon)}
/>
);
})}
</NavigationDrawerSection>
)
);
};
19 changes: 16 additions & 3 deletions ...t/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,40 @@ import styled from '@emotion/styled';

import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
import { NavigationDrawerSectionTitleSkeletonLoader } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

type NavigationDrawerSectionTitleProps = {
onClick?: () => void;
label: string;
};

const StyledTitle = styled.div`
const StyledTitle = styled.div<{ onClick?: () => void }>`
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.light};
display: flex;
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
height: ${({ theme }) => theme.spacing(4)};
padding: ${({ theme }) => theme.spacing(1)};
padding-top: 0;

${({ onClick, theme }) =>
!isUndefinedOrNull(onClick)
? `&:hover {
cursor: pointer;
background-color:${theme.background.transparent.light};
}`
: ''}
`;

export const NavigationDrawerSectionTitle = ({
onClick,
label,
}: NavigationDrawerSectionTitleProps) => {
const loading = useIsPrefetchLoading();

if (loading) {
return <NavigationDrawerSectionTitleSkeletonLoader />;
}
return <StyledTitle>{label}</StyledTitle>;
return <StyledTitle onClick={onClick}>{label}</StyledTitle>;
};
60 changes: 60 additions & 0 deletions ...es/twenty-front/src/modules/ui/navigation/navigation-drawer/hooks/useNavigationSection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { useRecoilCallback } from 'recoil';

import { isNavigationSectionOpenComponentState } from '@/ui/navigation/navigation-drawer/states/isNavigationSectionOpenComponentState';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';

export const useNavigationSection = (scopeId: string) => {
const closeNavigationSection = useRecoilCallback(
({ set }) =>
() => {
set(
isNavigationSectionOpenComponentState({
scopeId,
}),
false,
);
},
[scopeId],
);

const openNavigationSection = useRecoilCallback(
({ set }) =>
() => {
set(
isNavigationSectionOpenComponentState({
scopeId,
}),
true,
);
},
[scopeId],
);

const toggleNavigationSection = useRecoilCallback(
({ snapshot }) =>
() => {
const isNavigationSectionOpen = snapshot
.getLoadable(isNavigationSectionOpenComponentState({ scopeId }))
.getValue();
FelixMalfait marked this conversation as resolved.
Show resolved Hide resolved

if (isNavigationSectionOpen) {
closeNavigationSection();
} else {
openNavigationSection();
}
},
[closeNavigationSection, openNavigationSection, scopeId],
);

const isNavigationSectionOpenState = extractComponentState(
isNavigationSectionOpenComponentState,
scopeId,
);

return {
isNavigationSectionOpenState,
closeNavigationSection,
openNavigationSection,
toggleNavigationSection,
};
};
Loading
Loading