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

feat - Compact sidebar (#7414)

Browse Source
This commit is contained in:
nitin
2024-10-15 17:32:28 +05:30
committed by GitHub
parent c0610419c2
commit a9deede9ba
26 changed files with 524 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
View File

@ -13,6 +13,8 @@ import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/us
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useFavorites } from '../hooks/useFavorites';
import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
import { NavigationDrawerItemsCollapsedContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsedContainer';
const StyledContainer = styled(NavigationDrawerSection)`
width: 100%;
@ -39,7 +41,6 @@ export const CurrentWorkspaceMemberFavorites = () => {
const { favorites, handleReorderFavorite } = useFavorites();
const loading = useIsPrefetchLoading();
const { toggleNavigationSection, isNavigationSectionOpenState } =
useNavigationSection('Favorites');
const isNavigationSectionOpen = useRecoilValue(isNavigationSectionOpenState);
@ -58,54 +59,65 @@ export const CurrentWorkspaceMemberFavorites = () => {
)
return <></>;
const isGroup = currentWorkspaceMemberFavorites.length > 1;
const draggableListContent = (
<DraggableList
onDragEnd={handleReorderFavorite}
draggableItems={
<>
{currentWorkspaceMemberFavorites.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
placeholderColorSeed={recordId}
avatarUrl={avatarUrl}
type={avatarType}
placeholder={labelIdentifier}
className="fav-avatar"
/>
)}
to={link}
/>
}
/>
);
})}
</>
}
/>
);
return (
<StyledContainer>
<NavigationDrawerSectionTitle
label="Favorites"
onClick={() => toggleNavigationSection()}
/>
{isNavigationSectionOpen && (
<DraggableList
onDragEnd={handleReorderFavorite}
draggableItems={
<>
{currentWorkspaceMemberFavorites.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
placeholderColorSeed={recordId}
avatarUrl={avatarUrl}
type={avatarType}
placeholder={labelIdentifier}
className="fav-avatar"
/>
)}
to={link}
/>
}
/>
);
})}
</>
}
<NavigationDrawerAnimatedCollapseWrapper>
<NavigationDrawerSectionTitle
label="Favorites"
onClick={() => toggleNavigationSection()}
/>
</NavigationDrawerAnimatedCollapseWrapper>
{isNavigationSectionOpen && (
<NavigationDrawerItemsCollapsedContainer isGroup={isGroup}>
{draggableListContent}
</NavigationDrawerItemsCollapsedContainer>
)}
</StyledContainer>
);