784bc78ed0
Closes: #8549 It was quite complex to get this right. So, I went through Notion's website to see how they implemented it. Instead of using `display: none` or having a space reserved for the Icon, I used clip-path & opacity trick to achieve the desired behaviour. This maintains accessibility and helps in label or ObjectName to take the full space. Also, truncation now works for label & objectName as a whole instead of separately, as seen in my previous PR. **Caveats** The only problem that now remains is not having `NavigationDrawerAnimatedCollapseWrapper`. Having it on top of any text or div won't let the flex or truncation property work. [Screencast from 2024-11-28 13-37-31.webm](https://github.com/user-attachments/assets/29255cd2-3f15-4b1d-b1e1-c041c70052e5) --------- Co-authored-by: ehconitin <nitinkoche03@gmail.com> Co-authored-by: martmull <martmull@hotmail.fr>
44 lines
858 B
TypeScript
44 lines
858 B
TypeScript
import {
|
|
NavigationDrawerItem,
|
|
NavigationDrawerItemProps,
|
|
} from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
|
|
|
|
type NavigationDrawerSubItemProps = NavigationDrawerItemProps;
|
|
|
|
export const NavigationDrawerSubItem = ({
|
|
className,
|
|
label,
|
|
objectName,
|
|
Icon,
|
|
to,
|
|
onClick,
|
|
active,
|
|
danger,
|
|
soon,
|
|
count,
|
|
keyboard,
|
|
subItemState,
|
|
rightOptions,
|
|
isDragging,
|
|
}: NavigationDrawerSubItemProps) => {
|
|
return (
|
|
<NavigationDrawerItem
|
|
className={className}
|
|
label={label}
|
|
objectName={objectName}
|
|
indentationLevel={2}
|
|
subItemState={subItemState}
|
|
Icon={Icon}
|
|
to={to}
|
|
onClick={onClick}
|
|
active={active}
|
|
danger={danger}
|
|
soon={soon}
|
|
count={count}
|
|
keyboard={keyboard}
|
|
rightOptions={rightOptions}
|
|
isDragging={isDragging}
|
|
/>
|
|
);
|
|
};
|