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

feat: add command menu item to layout customization (#18764)

Browse Source 
figma
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=93630-365000&t=QesAkY3JOyI9D3UU-0


https://github.com/user-attachments/assets/cf3b354d-0b08-41ae-91ae-386054b5cb2e



https://github.com/user-attachments/assets/73bfd676-f823-44c9-a70d-107c20523664

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2026-03-26 20:34:03 +05:30
committed by GitHub
parent c7f6036a47
commit afeef8e04a
74 changed files with 2518 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+11 -6
View File
@@ -6,16 +6,16 @@ import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawe
import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { AnimatePresence } from 'framer-motion';
import { isDefined } from 'twenty-shared/utils';
import {
type IconComponent,
IconX,
OverflowingTextWithTooltip,
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { isDefined } from 'twenty-shared/utils';
import {
MOBILE_VIEWPORT,
ThemeContext,
@@ -34,7 +34,7 @@ const StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
min-height: ${PAGE_BAR_MIN_HEIGHT}px;
padding-bottom: ${themeCssVariables.spacing[3]};
padding-left: ${({ isMobile }) =>
isMobile ? themeCssVariables.spacing[3] : 0};
isMobile ? themeCssVariables.spacing[3] : themeCssVariables.spacing[4]};
padding-right: ${themeCssVariables.spacing[3]};
padding-top: ${themeCssVariables.spacing[3]};
`;
@@ -42,10 +42,11 @@ const StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
const StyledLeftContainer = styled.div`
align-items: center;
display: flex;
flex: 0 1 auto;
flex-direction: row;
gap: ${themeCssVariables.spacing[1]};
min-width: 0;
overflow-x: hidden;
width: 100%;
@media (max-width: ${MOBILE_VIEWPORT}px) {
padding-left: ${themeCssVariables.spacing[1]};
}
@@ -71,9 +72,13 @@ const StyledTopBarIconStyledTitleContainer = styled.div`
`;
const StyledPageActionContainer = styled.div`
display: inline-flex;
flex: 1 0 auto;
align-items: center;
display: flex;
flex: 1 1 0;
gap: ${themeCssVariables.spacing[2]};
justify-content: flex-end;
min-width: 0;
`;
const StyledIconContainer = styled.div`