Navbar customization v2 (#18026)
Adds color support for navigation menu items. --------- Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com> Co-authored-by: Devessier <baptiste@devessier.fr> Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Abdul Rahman
+41
-29
@@ -1,3 +1,4 @@
|
||||
import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
|
||||
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
|
||||
import { NAVIGATION_DRAWER_COLLAPSED_WIDTH } from '@/ui/layout/resizable-panel/constants/NavigationDrawerCollapsedWidth';
|
||||
import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
|
||||
@@ -7,10 +8,12 @@ import { type NavigationDrawerSubItemState } from '@/ui/navigation/navigation-dr
|
||||
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
|
||||
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
||||
import isPropValid from '@emotion/is-prop-valid';
|
||||
import { css, useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { t } from '@lingui/core/macro';
|
||||
import { isNonEmptyString } from '@sniptt/guards';
|
||||
import { type ReactNode } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
@@ -29,6 +32,7 @@ import {
|
||||
type TriggerEventType,
|
||||
useMouseDownNavigation,
|
||||
} from 'twenty-ui/utilities';
|
||||
import { FeatureFlagKey } from '~/generated-metadata/graphql';
|
||||
|
||||
const DEFAULT_INDENTATION_LEVEL = 1;
|
||||
|
||||
@@ -43,7 +47,7 @@ export type NavigationDrawerItemProps = {
|
||||
to?: string;
|
||||
onClick?: () => void;
|
||||
Icon?: IconComponent | ((props: TablerIconsProps) => JSX.Element);
|
||||
iconBackgroundColor?: string;
|
||||
iconColor?: string | null;
|
||||
active?: boolean;
|
||||
danger?: boolean;
|
||||
soon?: boolean;
|
||||
@@ -217,7 +221,10 @@ const StyledSpacer = styled.span`
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
const StyledIcon = styled.div<{ $backgroundColor?: string }>`
|
||||
const StyledIcon = styled.div<{
|
||||
$backgroundColor?: string;
|
||||
$borderColor?: string;
|
||||
}>`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
@@ -225,13 +232,15 @@ const StyledIcon = styled.div<{ $backgroundColor?: string }>`
|
||||
justify-content: center;
|
||||
margin-right: ${({ theme }) => theme.spacing(2)};
|
||||
|
||||
${({ theme, $backgroundColor }) =>
|
||||
${({ theme, $backgroundColor, $borderColor }) =>
|
||||
$backgroundColor &&
|
||||
css`
|
||||
background-color: ${$backgroundColor};
|
||||
border-radius: ${theme.border.radius.xs};
|
||||
height: ${theme.spacing(4.5)};
|
||||
width: ${theme.spacing(4.5)};
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
height: ${theme.spacing(4)};
|
||||
width: ${theme.spacing(4)};
|
||||
${$borderColor ? `border: 1px solid ${$borderColor};` : ''}
|
||||
`}
|
||||
`;
|
||||
|
||||
@@ -286,7 +295,7 @@ export const NavigationDrawerItem = ({
|
||||
secondaryLabel,
|
||||
indentationLevel = DEFAULT_INDENTATION_LEVEL,
|
||||
Icon,
|
||||
iconBackgroundColor,
|
||||
iconColor,
|
||||
to,
|
||||
onClick,
|
||||
active,
|
||||
@@ -308,6 +317,9 @@ export const NavigationDrawerItem = ({
|
||||
const theme = useTheme();
|
||||
const isMobile = useIsMobile();
|
||||
const isSettingsPage = useIsSettingsPage();
|
||||
const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled(
|
||||
FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED,
|
||||
);
|
||||
const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
|
||||
useAtomState(isNavigationDrawerExpandedState);
|
||||
|
||||
@@ -379,30 +391,30 @@ export const NavigationDrawerItem = ({
|
||||
</NavigationDrawerAnimatedCollapseWrapper>
|
||||
)}
|
||||
|
||||
{Icon && (
|
||||
<StyledIcon $backgroundColor={iconBackgroundColor}>
|
||||
<Icon
|
||||
style={{
|
||||
minWidth: iconBackgroundColor
|
||||
? theme.spacing(3.5)
|
||||
: theme.icon.size.md,
|
||||
}}
|
||||
size={
|
||||
iconBackgroundColor ? theme.spacing(3.5) : theme.icon.size.md
|
||||
}
|
||||
stroke={theme.icon.stroke.md}
|
||||
color={
|
||||
iconBackgroundColor
|
||||
? theme.grayScale.gray1
|
||||
: showBreadcrumb &&
|
||||
!isSettingsPage &&
|
||||
!isNavigationDrawerExpanded
|
||||
{Icon &&
|
||||
(isNavigationMenuItemEditingEnabled &&
|
||||
isNonEmptyString(iconColor) ? (
|
||||
<StyledIcon>
|
||||
<NavigationMenuItemStyleIcon Icon={Icon} color={iconColor} />
|
||||
</StyledIcon>
|
||||
) : (
|
||||
<StyledIcon>
|
||||
<Icon
|
||||
style={{
|
||||
minWidth: theme.icon.size.md,
|
||||
}}
|
||||
size={theme.icon.size.md}
|
||||
stroke={theme.icon.stroke.md}
|
||||
color={
|
||||
showBreadcrumb &&
|
||||
!isSettingsPage &&
|
||||
!isNavigationDrawerExpanded
|
||||
? theme.font.color.light
|
||||
: 'currentColor'
|
||||
}
|
||||
/>
|
||||
</StyledIcon>
|
||||
)}
|
||||
}
|
||||
/>
|
||||
</StyledIcon>
|
||||
))}
|
||||
|
||||
<StyledLabelParent>
|
||||
<OverflowingTextWithTooltip
|
||||
|
||||
+2
-2
@@ -10,7 +10,7 @@ export const NavigationDrawerSubItem = ({
|
||||
label,
|
||||
secondaryLabel,
|
||||
Icon,
|
||||
iconBackgroundColor,
|
||||
iconColor,
|
||||
to,
|
||||
onClick,
|
||||
active,
|
||||
@@ -32,7 +32,7 @@ export const NavigationDrawerSubItem = ({
|
||||
indentationLevel={2}
|
||||
subItemState={subItemState}
|
||||
Icon={Icon}
|
||||
iconBackgroundColor={iconBackgroundColor}
|
||||
iconColor={iconColor}
|
||||
to={to}
|
||||
onClick={onClick}
|
||||
active={active}
|
||||
|
||||
Reference in New Issue
Block a user