Navbar customization improvements (#17863)

- Add folder icon editing support
- And other navbar customization fixes/improvements.

---------

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: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx

@@ -1,9 +1,11 @@
+import { COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE } from '@/command-menu/constants/CommandMenuSearchBarHeightMobile';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedStateV2 } from '@/command-menu/states/isCommandMenuOpenedStateV2';
+import { isNavigationMenuInEditModeStateV2 } from '@/navigation-menu-item/states/isNavigationMenuInEditModeStateV2';
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
 import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
-import { useTheme } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { i18n } from '@lingui/core';
 import { t } from '@lingui/core/macro';
@@ -12,8 +14,20 @@ import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
 import { AnimatedButton } from 'twenty-ui/input';
 import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
 
-const StyledButtonWrapper = styled.div`
+const StyledButtonWrapper = styled.div<{
+  alignWithCommandMenuTopBar: boolean;
+}>`
   z-index: ${RootStackingContextZIndices.CommandMenuButton};
+  ${({ alignWithCommandMenuTopBar, theme }) =>
+    alignWithCommandMenuTopBar &&
+    css`
+      align-items: center;
+      display: flex;
+      height: ${COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE}px;
+      position: fixed;
+      right: ${theme.spacing(3)};
+      top: 0;
+    `}
 `;
 
 const StyledTooltipWrapper = styled.div`
@@ -109,9 +123,15 @@ const AnimatedIcon = ({
 export const PageHeaderToggleCommandMenuButton = () => {
   const { toggleCommandMenu } = useCommandMenu();
   const isCommandMenuOpened = useRecoilValueV2(isCommandMenuOpenedStateV2);
+  const isNavigationMenuInEditMode = useRecoilValueV2(
+    isNavigationMenuInEditModeStateV2,
+  );
 
   const isMobile = useIsMobile();
 
+  const alignWithCommandMenuTopBar =
+    isMobile && isNavigationMenuInEditMode && isCommandMenuOpened;
+
   const ariaLabel = isCommandMenuOpened
     ? t`Close command menu`
     : t`Open command menu`;
@@ -119,7 +139,9 @@ export const PageHeaderToggleCommandMenuButton = () => {
   const theme = useTheme();
 
   return (
-    <StyledButtonWrapper>
+    <StyledButtonWrapper
+      alignWithCommandMenuTopBar={alignWithCommandMenuTopBar}
+    >
       <div id="toggle-command-menu-button">
         <AnimatedButton
           animatedSvg={

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -356,6 +356,7 @@ export const NavigationDrawerItem = ({
         as={
           to ? (isExternalLink ? 'a' : Link) : rightOptions ? 'div' : undefined
         }
+        role={to ? undefined : rightOptions ? 'button' : undefined}
         to={isExternalLink ? undefined : to}
         href={isExternalLink ? to : undefined}
         target={isExternalLink ? '_blank' : undefined}