4366-feat(front): Clickable Ascending/Descending menu (#4389)

* feat: clickable menu

* Remove unused hover

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx

@@ -7,6 +7,7 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 const StyledHeader = styled.li`
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
+  cursor: pointer;
   display: flex;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -14,6 +15,10 @@ const StyledHeader = styled.li`
   padding: ${({ theme }) => theme.spacing(1)};
 
   user-select: none;
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+  }
 `;
 
 const StyledChildrenWrapper = styled.span`
@@ -41,12 +46,11 @@ export const DropdownMenuHeader = ({
   testId,
 }: DropdownMenuHeaderProps) => {
   return (
-    <StyledHeader data-testid={testId}>
+    <StyledHeader data-testid={testId} onClick={onClick}>
       {StartIcon && (
         <LightIconButton
           testId="dropdown-menu-header-end-icon"
           Icon={StartIcon}
-          onClick={onClick}
           accent="tertiary"
           size="small"
         />
@@ -56,7 +60,6 @@ export const DropdownMenuHeader = ({
         <StyledLightIconButton
           testId="dropdown-menu-header-end-icon"
           Icon={EndIcon}
-          onClick={onClick}
           accent="tertiary"
           size="small"
         />