From b6790251991d0879a1d917b19bb831f86298724c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 2 Aug 2023 14:45:28 +0200
Subject: [PATCH 01/14] Modify DropdownDropdown, NavbarItem, DropdownLink &
 NavDropdown

---
 .../material-kit/Navbar/common/NavbarItem.tsx |  2 --
 .../listNavDropdown/DropdownDropdown.tsx      | 32 ++++++++++++-------
 .../desktop/listNavDropdown/DropdownLink.tsx  |  2 ++
 .../desktop/navDropdown/NavDropdown.tsx       |  5 +--
 4 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/material-kit/Navbar/common/NavbarItem.tsx b/src/components/material-kit/Navbar/common/NavbarItem.tsx
index 9a48d8fae..68d205fdf 100644
--- a/src/components/material-kit/Navbar/common/NavbarItem.tsx
+++ b/src/components/material-kit/Navbar/common/NavbarItem.tsx
@@ -103,12 +103,10 @@ const Title = ({
 
     <MKTypography
       variant="button"
-      // variant="body2"
       fontWeight="regular"
       textTransform="capitalize"
       color="inherit"
       sx={{
-        // fontWeight: 'bold',
         ml: 1,
         mr: 0.25,
         alignSelf: 'center',
diff --git a/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownDropdown.tsx b/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownDropdown.tsx
index 166991fea..4788c4df6 100644
--- a/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownDropdown.tsx
@@ -25,7 +25,7 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
-import React, { FC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 
 import { Theme } from '@mui/material';
 import { KeyboardArrowDown } from '@mui/icons-material';
@@ -45,11 +45,12 @@ type DropdownDropdownProps = {
   onMouseLeave: () => void;
 };
 
-export const DropdownDropdown: FC<DropdownDropdownProps> = ({
-  content,
-  hoverStyle,
+const DropdownItem: FC<PropsWithChildren<DropdownDropdownProps>> = ({
+  content: { name, description },
   onMouseEnter,
   onMouseLeave,
+  hoverStyle,
+  children,
 }) => (
   <MKTypography
     display="flex"
@@ -57,9 +58,9 @@ export const DropdownDropdown: FC<DropdownDropdownProps> = ({
     alignItems="center"
     variant="button"
     textTransform="capitalize"
-    minWidth={content.description ? '14rem' : '12rem'}
-    fontWeight={content.description ? 'bold' : 'regular'}
-    py={content.description ? 1 : 0.625}
+    minWidth={description ? '14rem' : '12rem'}
+    fontWeight={description ? 'bold' : 'regular'}
+    py={description ? 1 : 0.625}
     px={2}
     sx={({ palette }: Theme) => ({
       borderRadius: borders.radius.md,
@@ -70,9 +71,9 @@ export const DropdownDropdown: FC<DropdownDropdownProps> = ({
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
   >
-    {content.description ? (
+    {description ? (
       <MKBox>
-        {content.name}
+        {name}
 
         <MKTypography
           display="block"
@@ -80,12 +81,19 @@ export const DropdownDropdown: FC<DropdownDropdownProps> = ({
           fontWeight="regular"
           sx={{ transition: 'all 300ms linear' }}
         >
-          {content.description}
+          {description}
         </MKTypography>
       </MKBox>
     ) : (
-      content.name
+      name
     )}
+
+    {children}
+  </MKTypography>
+);
+
+export const DropdownDropdown: FC<DropdownDropdownProps> = props => (
+  <DropdownItem {...props}>
     <KeyboardArrowDown
       fontSize="small"
       sx={{
@@ -94,5 +102,5 @@ export const DropdownDropdown: FC<DropdownDropdownProps> = ({
         mr: -0.5,
       }}
     />
-  </MKTypography>
+  </DropdownItem>
 );
diff --git a/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownLink.tsx b/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownLink.tsx
index e5dcfafd3..96b1a45f4 100644
--- a/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownLink.tsx
+++ b/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownLink.tsx
@@ -82,3 +82,5 @@ export const DropdownLink: FC<DropdownLinkProps> = ({
     )}
   </Link>
 );
+
+// export const DropdownLink: FC<DropdownLinkProps> = <DropdownItem {...menu} />;
diff --git a/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx b/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx
index 13a1b23bd..6998d8840 100644
--- a/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 /**
  =========================================================
  * Material Kit 2 React - v2.0.0
@@ -34,7 +33,6 @@ import { MKBox, MKBoxProps, MKTypography } from '../../..';
 
 export type NavDropdownProps = {
   expandedNavDropdownElement?: EventTarget & HTMLSpanElement;
-  expandedNavDropdownName?: string;
   dropdownStyle?: React.PropsWithoutRef<MKBoxProps>;
   onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
   onMouseLeave: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -42,7 +40,6 @@ export type NavDropdownProps = {
 
 export const NavDropdown: FC<PropsWithChildren<NavDropdownProps>> = ({
   expandedNavDropdownElement,
-  expandedNavDropdownName,
   dropdownStyle,
   onMouseEnter,
   onMouseLeave,
@@ -54,7 +51,7 @@ export const NavDropdown: FC<PropsWithChildren<NavDropdownProps>> = ({
     <Popper
       anchorEl={expandedNavDropdownElement}
       popperRef={null}
-      open={!!expandedNavDropdownName}
+      open={!!expandedNavDropdownElement}
       placement="bottom"
       transition
       style={{ zIndex: 10 }}

From 2d0b4d721c7795e655c7abf8b06994446b9c6827 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 5 May 2023 17:52:25 +0200
Subject: [PATCH 02/14] Extract & clean ColumnDropdownMenu

---
 .../Navbar/desktop/columnNavDropdown/index.tsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/components/material-kit/Navbar/desktop/columnNavDropdown/index.tsx

diff --git a/src/components/material-kit/Navbar/desktop/columnNavDropdown/index.tsx b/src/components/material-kit/Navbar/desktop/columnNavDropdown/index.tsx
new file mode 100644
index 000000000..3028d9393
--- /dev/null
+++ b/src/components/material-kit/Navbar/desktop/columnNavDropdown/index.tsx
@@ -0,0 +1,16 @@
+/**
+ * Copyright 2023 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { ColumnNavDropdown } from './ColumnNavDropdown';

From d808ddb88b149d32fb883d2ccf8e890db2b61c99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 5 May 2023 18:13:47 +0200
Subject: [PATCH 03/14] Split ColumnDropdownMenu

---
 .../desktop/columnNavDropdown/Column.tsx      |  1 +
 .../columnNavDropdown/ColumnNavDropdown.tsx   |  6 +-
 .../Navbar/desktop/columnNavDropdown/Row.tsx  | 95 +++++++++++++++++++
 3 files changed, 98 insertions(+), 4 deletions(-)
 create mode 100644 src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx

diff --git a/src/components/material-kit/Navbar/desktop/columnNavDropdown/Column.tsx b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Column.tsx
index f940d961c..ec05fb412 100644
--- a/src/components/material-kit/Navbar/desktop/columnNavDropdown/Column.tsx
+++ b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Column.tsx
@@ -49,6 +49,7 @@ export const Column: FC<ColumnProps> = ({
   <Grid item xs={12 / rowsPerColumn} sx={{ position: 'relative' }}>
     {isNotFirstColumn && (
       <Divider
+        key={`divider-${index}`}
         orientation="vertical"
         sx={{
           position: 'absolute',
diff --git a/src/components/material-kit/Navbar/desktop/columnNavDropdown/ColumnNavDropdown.tsx b/src/components/material-kit/Navbar/desktop/columnNavDropdown/ColumnNavDropdown.tsx
index 7dd316f38..856504236 100644
--- a/src/components/material-kit/Navbar/desktop/columnNavDropdown/ColumnNavDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/columnNavDropdown/ColumnNavDropdown.tsx
@@ -39,21 +39,19 @@ import { HoverStyle } from '../../common';
 
 type ColumnNavDropdownProps = {
   content: HeaderMenu[];
-  name: string;
   hoverStyle: HoverStyle;
   rowsPerColumn?: number;
 };
 
 export const ColumnNavDropdown: FC<ColumnNavDropdownProps> = ({
   content,
-  name,
   hoverStyle,
   rowsPerColumn = 3,
 }) => (
-  <Grid key={name} container spacing={3} py={1} px={1.5}>
+  <Grid container spacing={3} py={1} px={1.5}>
     {splitArrayByColumns(content, rowsPerColumn).map((menus, index) => (
       <Column
-        key={`divider-${index}`}
+        key={`column-${index}`}
         rowsPerColumn={rowsPerColumn}
         content={menus}
         hoverStyle={hoverStyle}
diff --git a/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx
new file mode 100644
index 000000000..205ea0c29
--- /dev/null
+++ b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright 2023 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ =========================================================
+ * Material Kit 2 React - v2.0.0
+ =========================================================
+ * Product Page: https://www.creative-tim.com/product/material-kit-react
+ * Copyright 2021 Creative Tim (https://www.creative-tim.com)
+ Coded by www.creative-tim.com
+ =========================================================
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+import React, { Fragment } from 'react';
+
+import { Theme } from '@mui/material';
+
+import { Link, LinkContent } from '../../../../Link';
+import { MKTypography } from '../../..';
+import { getHoverConfiguration, HoverStyle } from '../../common';
+import { HeaderMenu, isHeaderMenuWithItems } from '../../../../Header';
+
+type MenuProps = { index: number; name: string };
+const Menu = ({ index, name }: MenuProps): JSX.Element => (
+  <MKTypography
+    display="block"
+    variant="button"
+    fontWeight="bold"
+    textTransform="capitalize"
+    py={1}
+    px={0.5}
+    mt={index !== 0 ? 2 : 0}
+  >
+    {name}
+  </MKTypography>
+);
+
+type SubMenuProps = {
+  item: LinkContent;
+  hoverStyle: HoverStyle;
+};
+
+const SubMenu = ({ item, hoverStyle }: SubMenuProps): JSX.Element => (
+  <Link
+    component={MKTypography}
+    type={item.type}
+    url={item.url}
+    key={item.name}
+    minWidth="11.25rem"
+    display="block"
+    variant="button"
+    textTransform="capitalize"
+    fontWeight="regular"
+    py={0.625}
+    px={2}
+    sx={({ palette, borders: { borderRadius } }: Theme) => ({
+      borderRadius: borderRadius.md,
+      cursor: 'pointer',
+      transition: 'all 300ms linear',
+      ...getHoverConfiguration(palette, hoverStyle),
+    })}
+  >
+    {item.name}
+  </Link>
+);
+
+type RowProps = {
+  menu: HeaderMenu;
+  index: number;
+  hoverStyle: HoverStyle;
+};
+export const Row = ({ menu, index, hoverStyle }: RowProps): JSX.Element => (
+  <Fragment key={menu.name}>
+    <Menu index={index} name={menu.name} />
+
+    {isHeaderMenuWithItems(menu) &&
+      menu.items.map(item => (
+        <SubMenu key={item.name} item={item} hoverStyle={hoverStyle} />
+      ))}
+  </Fragment>
+);

From 32eaa84bcdae5cb646ef771441970ee4df860ede Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 11:20:28 +0200
Subject: [PATCH 04/14] Extract ListDropdownMenus

---
 .../Navbar/desktop/columnNavDropdown/Row.tsx       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx
index 205ea0c29..3477c7541 100644
--- a/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx
+++ b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx
@@ -25,7 +25,7 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import { Theme } from '@mui/material';
 
@@ -34,8 +34,8 @@ import { MKTypography } from '../../..';
 import { getHoverConfiguration, HoverStyle } from '../../common';
 import { HeaderMenu, isHeaderMenuWithItems } from '../../../../Header';
 
-type MenuProps = { index: number; name: string };
-const Menu = ({ index, name }: MenuProps): JSX.Element => (
+type MenuProps = { isFirstRow: boolean; name: string };
+const Menu = ({ isFirstRow, name }: MenuProps): JSX.Element => (
   <MKTypography
     display="block"
     variant="button"
@@ -43,7 +43,7 @@ const Menu = ({ index, name }: MenuProps): JSX.Element => (
     textTransform="capitalize"
     py={1}
     px={0.5}
-    mt={index !== 0 ? 2 : 0}
+    mt={isFirstRow ? 0 : 2}
   >
     {name}
   </MKTypography>
@@ -84,12 +84,12 @@ type RowProps = {
   hoverStyle: HoverStyle;
 };
 export const Row = ({ menu, index, hoverStyle }: RowProps): JSX.Element => (
-  <Fragment key={menu.name}>
-    <Menu index={index} name={menu.name} />
+  <>
+    <Menu isFirstRow={index === 0} name={menu.name} />
 
     {isHeaderMenuWithItems(menu) &&
       menu.items.map(item => (
         <SubMenu key={item.name} item={item} hoverStyle={hoverStyle} />
       ))}
-  </Fragment>
+  </>
 );

From 0468d07659af660a02ed10124703e469a2c64322 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 11:32:27 +0200
Subject: [PATCH 05/14] Split ListDropdownMenu component

---
 .../Navbar/desktop/columnNavDropdown/index.tsx   | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 src/components/material-kit/Navbar/desktop/columnNavDropdown/index.tsx

diff --git a/src/components/material-kit/Navbar/desktop/columnNavDropdown/index.tsx b/src/components/material-kit/Navbar/desktop/columnNavDropdown/index.tsx
deleted file mode 100644
index 3028d9393..000000000
--- a/src/components/material-kit/Navbar/desktop/columnNavDropdown/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright 2023 Bonitasoft S.A.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { ColumnNavDropdown } from './ColumnNavDropdown';

From e8d9a7e36c1f520a0db9a3607668873c6316708e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 11:43:22 +0200
Subject: [PATCH 06/14] Move Row on its own file

---
 .../material-kit/Navbar/desktop/Dropdown.tsx  |  4 +-
 .../desktop/columnNavDropdown/Column.tsx      |  2 +-
 .../DropdownDropdown.tsx                      |  8 +--
 .../Navbar/desktop/dropdownDropdown/index.tsx | 16 +++++
 .../listNavDropdown/ListNavDropdown.tsx       |  6 +-
 .../Navbar/desktop/listNavDropdown/Row.tsx    | 72 +++++++++++++++++++
 6 files changed, 98 insertions(+), 10 deletions(-)
 rename src/components/material-kit/Navbar/desktop/{ => dropdownDropdown}/DropdownDropdown.tsx (93%)
 create mode 100644 src/components/material-kit/Navbar/desktop/dropdownDropdown/index.tsx
 create mode 100644 src/components/material-kit/Navbar/desktop/listNavDropdown/Row.tsx

diff --git a/src/components/material-kit/Navbar/desktop/Dropdown.tsx b/src/components/material-kit/Navbar/desktop/Dropdown.tsx
index 9648bcb94..50b500708 100644
--- a/src/components/material-kit/Navbar/desktop/Dropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/Dropdown.tsx
@@ -31,7 +31,7 @@ import { ColumnNavDropdown } from './columnNavDropdown';
 import { ListNavDropdown } from './listNavDropdown';
 
 import { NavDropdown } from './navDropdown';
-import { DropdownDropdown } from './DropdownDropdown';
+import { DropdownDropdown } from './dropdownDropdown';
 import { HoverStyle } from '../common';
 
 import {
@@ -86,8 +86,8 @@ export const Dropdown: FC<DropdownProps> = ({
           withColumns ? (
             // Render the dropdown menu that should be display as columns
             <ColumnNavDropdown
+              key={name}
               content={menus}
-              name={name}
               rowsPerColumn={rowsPerColumn}
               hoverStyle={hoverStyle}
             />
diff --git a/src/components/material-kit/Navbar/desktop/columnNavDropdown/Column.tsx b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Column.tsx
index ec05fb412..8319c20fb 100644
--- a/src/components/material-kit/Navbar/desktop/columnNavDropdown/Column.tsx
+++ b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Column.tsx
@@ -49,7 +49,7 @@ export const Column: FC<ColumnProps> = ({
   <Grid item xs={12 / rowsPerColumn} sx={{ position: 'relative' }}>
     {isNotFirstColumn && (
       <Divider
-        key={`divider-${index}`}
+        // key={`divider-${content.}`}
         orientation="vertical"
         sx={{
           position: 'absolute',
diff --git a/src/components/material-kit/Navbar/desktop/DropdownDropdown.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
similarity index 93%
rename from src/components/material-kit/Navbar/desktop/DropdownDropdown.tsx
rename to src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
index 4b47bffd0..9f9271838 100644
--- a/src/components/material-kit/Navbar/desktop/DropdownDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
@@ -29,12 +29,12 @@ import React, { Dispatch, SetStateAction } from 'react';
 
 import { Grow, Popper } from '@mui/material';
 
-import { DropdownLink } from './DropdownLink';
-import { MKBox, MKBoxProps } from '../..';
+import { DropdownLink } from '../DropdownLink';
+import { MKBox, MKBoxProps } from '../../..';
 
-import { HeaderMenuWithItems } from '../../../Header';
+import { HeaderMenuWithItems } from '../../../../Header';
 
-import { HoverStyle } from '../common';
+import { HoverStyle } from '../../common';
 
 export type DropdownDropdownProps = {
   content: HeaderMenuWithItems[];
diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/index.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/index.tsx
new file mode 100644
index 000000000..9b9256bbb
--- /dev/null
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/index.tsx
@@ -0,0 +1,16 @@
+/**
+ * Copyright 2023 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './DropdownDropdown';
diff --git a/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx b/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
index 135a57895..20b7eda1f 100644
--- a/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
@@ -27,13 +27,13 @@
 
 import React, { Dispatch, FC, SetStateAction } from 'react';
 
+import { DropdownLink } from './DropdownLink';
+import { DropdownDropdown } from './DropdownDropdown';
+
 import { HeaderMenu, isHeaderMenuWithItems } from '../../../../Header';
 
 import { HoverStyle } from '../../common';
 
-import { DropdownDropdown } from './DropdownDropdown';
-import { DropdownLink } from './DropdownLink';
-
 type ListNavDropdownProps = {
   content: HeaderMenu[];
   setDropdownDropdownElement: Dispatch<
diff --git a/src/components/material-kit/Navbar/desktop/listNavDropdown/Row.tsx b/src/components/material-kit/Navbar/desktop/listNavDropdown/Row.tsx
new file mode 100644
index 000000000..46a4fc26a
--- /dev/null
+++ b/src/components/material-kit/Navbar/desktop/listNavDropdown/Row.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright 2023 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ =========================================================
+ * Material Kit 2 React - v2.0.0
+ =========================================================
+ * Product Page: https://www.creative-tim.com/product/material-kit-react
+ * Copyright 2021 Creative Tim (https://www.creative-tim.com)
+ Coded by www.creative-tim.com
+ =========================================================
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+import React, { Dispatch, SetStateAction } from 'react';
+
+import { HoverStyle } from '../../common';
+import { HeaderMenu, isHeaderMenuWithItems } from '../../../../Header';
+
+import { DropdownDropdown } from './DropdownDropdown';
+import { DropdownLink } from './DropdownLink';
+
+export type RowProps = {
+  menu: HeaderMenu;
+  setDropdownDropdownElement: Dispatch<
+    SetStateAction<(EventTarget & HTMLSpanElement) | undefined>
+  >;
+  setDropdownDropdownName: Dispatch<SetStateAction<string | undefined>>;
+  hoverStyle: HoverStyle;
+};
+export const Row = ({
+  menu,
+  hoverStyle,
+  setDropdownDropdownElement,
+  setDropdownDropdownName,
+}: RowProps): JSX.Element =>
+  isHeaderMenuWithItems(menu) ? (
+    <DropdownDropdown
+      key={menu.name}
+      content={menu}
+      hoverStyle={hoverStyle}
+      onMouseEnter={({
+        currentTarget,
+      }: React.MouseEvent<HTMLSpanElement | HTMLLinkElement>) => {
+        if (menu.isCollapsed) {
+          setDropdownDropdownElement(currentTarget ?? undefined);
+          setDropdownDropdownName(menu.name);
+        }
+      }}
+      onMouseLeave={() => {
+        if (menu.isCollapsed) {
+          setDropdownDropdownElement(undefined);
+          setDropdownDropdownName(undefined);
+        }
+      }}
+    />
+  ) : (
+    <DropdownLink key={menu.name} content={menu} hoverStyle={hoverStyle} />
+  );

From 9853c6d05a581a76cbd95428081412218f778fbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 12:07:32 +0200
Subject: [PATCH 07/14] Extratc Row on its own file

---
 .../Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx    | 2 +-
 .../Navbar/desktop/{ => dropdownDropdown}/DropdownLink.tsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/material-kit/Navbar/desktop/{ => dropdownDropdown}/DropdownLink.tsx (94%)

diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
index 9f9271838..5b490b7b8 100644
--- a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
@@ -29,7 +29,7 @@ import React, { Dispatch, SetStateAction } from 'react';
 
 import { Grow, Popper } from '@mui/material';
 
-import { DropdownLink } from '../DropdownLink';
+import { DropdownLink } from './DropdownLink';
 import { MKBox, MKBoxProps } from '../../..';
 
 import { HeaderMenuWithItems } from '../../../../Header';
diff --git a/src/components/material-kit/Navbar/desktop/DropdownLink.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownLink.tsx
similarity index 94%
rename from src/components/material-kit/Navbar/desktop/DropdownLink.tsx
rename to src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownLink.tsx
index 6246fc36e..5f60e6f48 100644
--- a/src/components/material-kit/Navbar/desktop/DropdownLink.tsx
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownLink.tsx
@@ -31,9 +31,9 @@ import { Theme } from '@mui/material';
 import { KeyboardArrowDown } from '@mui/icons-material';
 
 import { borders } from '../../../../assets/theme';
-import { Link, LinkContent } from '../../..';
-import { MKBox, MKTypography } from '../..';
-import { HoverStyle, getHoverConfiguration } from '../common';
+import { Link, LinkContent } from '../../../..';
+import { MKBox, MKTypography } from '../../..';
+import { HoverStyle, getHoverConfiguration } from '../../common';
 
 type DropdownLinkProps = {
   content: LinkContent;

From d830fe6dd1b6d1cc673849c287ced0fa339ee5f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 15:54:33 +0200
Subject: [PATCH 08/14] Make NavDropdown et NavLink as common components

---
 .../Navbar/common/NavDropdown.tsx             | 69 +++++++++++++++++++
 .../material-kit/Navbar/common/NavLink.tsx    |  5 +-
 .../material-kit/Navbar/common/index.tsx      |  1 +
 .../material-kit/Navbar/desktop/NavbarNav.tsx |  7 +-
 .../Navbar/mobile/NavDropdown.tsx             | 35 +++++-----
 .../material-kit/Navbar/mobile/NavbarNav.tsx  | 42 ++++++++---
 6 files changed, 128 insertions(+), 31 deletions(-)
 create mode 100644 src/components/material-kit/Navbar/common/NavDropdown.tsx

diff --git a/src/components/material-kit/Navbar/common/NavDropdown.tsx b/src/components/material-kit/Navbar/common/NavDropdown.tsx
new file mode 100644
index 000000000..c85e5f5f9
--- /dev/null
+++ b/src/components/material-kit/Navbar/common/NavDropdown.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2023 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ =========================================================
+ * Material Kit 2 React - v2.0.0
+ =========================================================
+ * Product Page: https://www.creative-tim.com/product/material-kit-react
+ * Copyright 2021 Creative Tim (https://www.creative-tim.com)
+ Coded by www.creative-tim.com
+ =========================================================
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+import React, { PropsWithChildren } from 'react';
+
+import { HeaderRouteWithMenus } from '../../../Header';
+
+import { NavbarItem, HoverStyle } from '../common';
+
+type NavDropdownProps = HeaderRouteWithMenus & {
+  isMobileView: boolean;
+  isCollapsed: boolean;
+  isCollapsible: boolean;
+  hoverStyle: HoverStyle;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+export const NavDropdown = ({
+  name,
+  icon,
+  isMobileView,
+  isCollapsed,
+  isCollapsible,
+  hoverStyle,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  children,
+}: PropsWithChildren<NavDropdownProps>): JSX.Element => (
+  <NavbarItem
+    key={name}
+    name={name}
+    icon={icon}
+    isCollapsed={isCollapsed}
+    isCollapsible={isCollapsible}
+    isMobileView={isMobileView}
+    hoverStyle={hoverStyle}
+    onClick={onClick}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+  >
+    {children}
+  </NavbarItem>
+);
diff --git a/src/components/material-kit/Navbar/common/NavLink.tsx b/src/components/material-kit/Navbar/common/NavLink.tsx
index 03350f784..66ef9e4fc 100644
--- a/src/components/material-kit/Navbar/common/NavLink.tsx
+++ b/src/components/material-kit/Navbar/common/NavLink.tsx
@@ -36,7 +36,10 @@ type NavLinkProps = HeaderRouteAsLink & {
   hoverStyle: HoverStyle;
 };
 
-export const NavLink: FC<NavLinkProps> = ({ hoverStyle, ...route }) => (
+export const NavLink = ({
+  hoverStyle,
+  ...route
+}: NavLinkProps): JSX.Element => (
   <Link
     component={NavbarItem}
     type={route.type}
diff --git a/src/components/material-kit/Navbar/common/index.tsx b/src/components/material-kit/Navbar/common/index.tsx
index 4e59dd8e1..6b0d3a5bd 100644
--- a/src/components/material-kit/Navbar/common/index.tsx
+++ b/src/components/material-kit/Navbar/common/index.tsx
@@ -18,3 +18,4 @@ export { BrandLink } from './BrandLink';
 export { NavbarItem, NavbarItemProps } from './NavbarItem';
 export { HoverStyle, getHoverConfiguration } from './HoverStyle';
 export { NavLink } from './NavLink';
+export { NavDropdown } from './NavDropdown';
diff --git a/src/components/material-kit/Navbar/desktop/NavbarNav.tsx b/src/components/material-kit/Navbar/desktop/NavbarNav.tsx
index 388d45607..bfe9f53fc 100644
--- a/src/components/material-kit/Navbar/desktop/NavbarNav.tsx
+++ b/src/components/material-kit/Navbar/desktop/NavbarNav.tsx
@@ -27,7 +27,7 @@
 
 import React, { Dispatch, SetStateAction } from 'react';
 
-import { NavbarItem, HoverStyle, NavLink } from '../common';
+import { NavbarItem, HoverStyle, NavLink, NavDropdown } from '../common';
 
 import { HeaderRoute, isHeaderRouteWithMenus } from '../../../Header';
 import { MKBox } from '../..';
@@ -60,10 +60,8 @@ export const NavbarNav = ({
     {content.map(route =>
       isHeaderRouteWithMenus(route) ? (
         <NavbarItem
-          key={route.name}
-          name={route.name}
+          //key={route.name}
           hoverStyle={hoverStyle}
-          icon={route.icon}
           isCollapsible={!!route.menus}
           isCollapsed={route.name === expandedNavDropdownName}
           onMouseEnter={({
@@ -76,6 +74,7 @@ export const NavbarNav = ({
             setExpandedNavDropdownElement(undefined);
             setExpandedNavDropdownName(undefined);
           }}
+          {...route}
         />
       ) : (
         <NavLink key={route.name} hoverStyle={hoverStyle} {...route} />
diff --git a/src/components/material-kit/Navbar/mobile/NavDropdown.tsx b/src/components/material-kit/Navbar/mobile/NavDropdown.tsx
index f7c683c73..47be34270 100644
--- a/src/components/material-kit/Navbar/mobile/NavDropdown.tsx
+++ b/src/components/material-kit/Navbar/mobile/NavDropdown.tsx
@@ -25,40 +25,43 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
-import { HeaderRouteWithMenus, isHeaderMenuWithItems } from '../../../Header';
-
-import { MKBox } from '../..';
+import { HeaderRouteWithMenus } from '../../../Header';
 
 import { NavbarItem, HoverStyle } from '../common';
-import { DropdownDropdown } from './DropdownDropdown';
-import { DropdownLink } from './DropdownLink';
 
-type NavDropdownProps = Omit<
-  HeaderRouteWithMenus,
-  'withColumns' | 'rowsPerColumn'
-> & {
-  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+type NavDropdownProps = HeaderRouteWithMenus & {
+  isMobileView: boolean;
   isCollapsed: boolean;
+  isCollapsible: boolean;
   hoverStyle: HoverStyle;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 export const NavDropdown = ({
   name,
   icon,
-  menus,
+  isMobileView,
   isCollapsed,
-  onClick,
+  isCollapsible,
   hoverStyle,
-}: NavDropdownProps): JSX.Element => (
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  children,
+}: PropsWithChildren<NavDropdownProps>): JSX.Element => (
   <NavbarItem
     key={name}
     name={name}
     icon={icon}
-    onClick={onClick}
     isCollapsed={isCollapsed}
-    isCollapsible
+    isCollapsible={isCollapsible}
     hoverStyle={hoverStyle}
+    onClick={onClick}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
   >
     <MKBox sx={{ height: '15rem', maxHeight: '15rem', overflowY: 'scroll' }}>
       {menus.map((menu, id) => (
diff --git a/src/components/material-kit/Navbar/mobile/NavbarNav.tsx b/src/components/material-kit/Navbar/mobile/NavbarNav.tsx
index 10cb4e395..b5204de3a 100644
--- a/src/components/material-kit/Navbar/mobile/NavbarNav.tsx
+++ b/src/components/material-kit/Navbar/mobile/NavbarNav.tsx
@@ -29,14 +29,18 @@ import React, { useState } from 'react';
 // @mui material components
 import { Collapse } from '@mui/material';
 
+import { DropdownDropdown } from './DropdownDropdown';
+import { DropdownLink } from './DropdownLink';
+
 // Material Kit 2 React components
 import { MKBox, MKBoxProps } from '../..';
-import { HoverStyle, NavLink } from '../common';
-
-import { HeaderRoute, isHeaderRouteWithMenus } from '../../../Header';
+import { HoverStyle, NavLink, NavDropdown } from '../common';
 
-// Material Kit 2 React example components
-import { NavDropdown } from './NavDropdown';
+import {
+  HeaderRoute,
+  isHeaderMenuWithItems,
+  isHeaderRouteWithMenus,
+} from '../../../Header';
 
 export const NavbarNav = ({
   content,
@@ -53,18 +57,36 @@ export const NavbarNav = ({
           const isCollapsed = route.name === collapse;
           return isHeaderRouteWithMenus(route) ? (
             <NavDropdown
-              key={route.name}
-              name={route.name}
-              icon={route.icon}
-              menus={route.menus}
+              // key={route.name}
+              isMobileView={true}
               isCollapsed={isCollapsed}
+              isCollapsible={true}
               onClick={() =>
                 setExpandedNavDropdownElement(
                   isCollapsed ? undefined : route.name,
                 )
               }
               hoverStyle={hoverStyle}
-            />
+              {...route}
+            >
+              <MKBox
+                sx={{
+                  height: '15rem',
+                  maxHeight: '15rem',
+                  overflowY: 'scroll',
+                }}
+              >
+                {route.menus.map((menu, id) => (
+                  <MKBox key={menu.name} px={2}>
+                    {isHeaderMenuWithItems(menu) ? (
+                      <DropdownDropdown {...menu} hoverStyle={hoverStyle} />
+                    ) : (
+                      <DropdownLink id={id} {...menu} hoverStyle={hoverStyle} />
+                    )}
+                  </MKBox>
+                ))}
+              </MKBox>
+            </NavDropdown>
           ) : (
             <NavLink key={route.name} hoverStyle={hoverStyle} {...route} />
           );

From 8a6abb1578f18734a8043af423a3cfa24468f610 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 16:06:16 +0200
Subject: [PATCH 09/14] Rename NestedDropdownMenu to DropdownDropdown

---
 .../Navbar/desktop/dropdownDropdown/Row.tsx   | 99 +++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/components/material-kit/Navbar/desktop/dropdownDropdown/Row.tsx

diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/Row.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/Row.tsx
new file mode 100644
index 000000000..5ae87a2f8
--- /dev/null
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/Row.tsx
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2023 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ =========================================================
+ * Material Kit 2 React - v2.0.0
+ =========================================================
+ * Product Page: https://www.creative-tim.com/product/material-kit-react
+ * Copyright 2021 Creative Tim (https://www.creative-tim.com)
+ Coded by www.creative-tim.com
+ =========================================================
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+import React from 'react';
+
+import { KeyboardArrowDown } from '@mui/icons-material';
+import { Theme } from '@mui/material';
+
+import { getHoverConfiguration, HoverStyle } from '../../common';
+import { MKTypography, MKBox } from '../../..';
+import { Link, LinkContent } from '../../../..';
+
+export type RowProps = {
+  isCollapsed?: boolean;
+  hoverStyle: HoverStyle;
+} & LinkContent;
+export const Row = ({
+  description,
+  name,
+  url,
+  type,
+  hoverStyle,
+  isCollapsed = false,
+}: RowProps): JSX.Element => (
+  <Link
+    component={MKTypography}
+    key={name}
+    type={type}
+    url={url}
+    display="flex"
+    justifyContent="space-between"
+    alignItems="center"
+    variant="button"
+    textTransform="capitalize"
+    minWidth={description ? '14rem' : '12rem'}
+    color={'primary'}
+    fontWeight={description ? 'bold' : 'regular'}
+    py={description ? 1 : 0.625}
+    px={2}
+    sx={({ palette, borders: { borderRadius } }: Theme) => ({
+      borderRadius: borderRadius.md,
+      cursor: 'pointer',
+      transition: 'all 300ms linear',
+      ...getHoverConfiguration(palette, hoverStyle),
+    })}
+  >
+    {description ? (
+      <MKBox>
+        {name}
+        <MKTypography
+          display="block"
+          variant="button"
+          color="text"
+          fontWeight="regular"
+          sx={{ transition: 'all 300ms linear' }}
+        >
+          {description}
+        </MKTypography>
+      </MKBox>
+    ) : (
+      name
+    )}
+
+    {isCollapsed && (
+      <KeyboardArrowDown
+        fontSize="small"
+        sx={{
+          fontWeight: 'normal',
+          verticalAlign: 'middle',
+          mr: -0.5,
+        }}
+      />
+    )}
+  </Link>
+);

From 401e0f43f3f0d6ea7ebf548295c62c22e0fee0d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 16:37:47 +0200
Subject: [PATCH 10/14] Move some usage of SetStateAction

---
 .../material-kit/Navbar/desktop/Dropdown.tsx  | 11 ++++++-----
 .../dropdownDropdown/DropdownDropdown.tsx     | 19 ++++++-------------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/components/material-kit/Navbar/desktop/Dropdown.tsx b/src/components/material-kit/Navbar/desktop/Dropdown.tsx
index 50b500708..8198106ec 100644
--- a/src/components/material-kit/Navbar/desktop/Dropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/Dropdown.tsx
@@ -70,9 +70,7 @@ export const Dropdown: FC<DropdownProps> = ({
       <NavDropdown
         expandedNavDropdownElement={expandedNavDropdownElement}
         dropdownStyle={dropdownStyle}
-        onMouseEnter={() => {
-          setExpandedNavDropdownElement(expandedNavDropdownElement);
-        }}
+        onMouseEnter={() => setExpandedNavDropdownElement(expandedNavDropdownElement)} // TODO: unnecessary ?
         onMouseLeave={() => {
           if (!dropdownDropdownName) {
             setExpandedNavDropdownName(undefined);
@@ -117,10 +115,13 @@ export const Dropdown: FC<DropdownProps> = ({
         }
         dropdownDropdownElement={dropdownDropdownElement}
         dropdownDropdownName={dropdownDropdownName}
-        setDropdownDropdownElement={setDropdownDropdownElement}
-        setDropdownDropdownName={setDropdownDropdownName}
         dropdownStyle={dropdownStyle}
         hoverStyle={hoverStyle}
+        onMouseEnter={() => setDropdownDropdownElement(dropdownDropdownElement)} // TODO: unnecessary ?
+        onMouseLeave={() => {
+          setDropdownDropdownElement(undefined);
+          setDropdownDropdownName(undefined);
+        }}
       />
     </>
   );
diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
index 5b490b7b8..6e202af94 100644
--- a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
@@ -40,22 +40,20 @@ export type DropdownDropdownProps = {
   content: HeaderMenuWithItems[];
   dropdownDropdownElement?: EventTarget & HTMLSpanElement;
   dropdownDropdownName?: string;
-  setDropdownDropdownElement: Dispatch<
-    SetStateAction<(EventTarget & HTMLSpanElement) | undefined>
-  >;
-  setDropdownDropdownName: Dispatch<SetStateAction<string | undefined>>;
   dropdownStyle?: React.PropsWithoutRef<MKBoxProps>;
   hoverStyle: HoverStyle;
+  onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onMouseLeave: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 
 export const DropdownDropdown = ({
   content,
   dropdownDropdownElement,
   dropdownDropdownName,
-  setDropdownDropdownElement,
-  setDropdownDropdownName,
   dropdownStyle,
   hoverStyle,
+  onMouseEnter,
+  onMouseLeave,
 }: DropdownDropdownProps): JSX.Element => (
   <Popper
     anchorEl={dropdownDropdownElement}
@@ -64,13 +62,8 @@ export const DropdownDropdown = ({
     placement="right-start"
     transition
     style={{ zIndex: 10 }}
-    onMouseEnter={() => {
-      setDropdownDropdownElement(dropdownDropdownElement);
-    }}
-    onMouseLeave={() => {
-      setDropdownDropdownElement(undefined);
-      setDropdownDropdownName(undefined);
-    }}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
   >
     {({ TransitionProps }) => (
       <Grow {...TransitionProps} style={{ transformOrigin: 'left top' }}>

From 5f5eec7c8986b1154187308faf049f9751085282 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 16:39:00 +0200
Subject: [PATCH 11/14] Remove unnecessary action

---
 src/components/material-kit/Navbar/desktop/Dropdown.tsx        | 2 --
 .../Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx       | 3 ---
 .../material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx    | 3 ---
 3 files changed, 8 deletions(-)

diff --git a/src/components/material-kit/Navbar/desktop/Dropdown.tsx b/src/components/material-kit/Navbar/desktop/Dropdown.tsx
index 8198106ec..1e51329c0 100644
--- a/src/components/material-kit/Navbar/desktop/Dropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/Dropdown.tsx
@@ -70,7 +70,6 @@ export const Dropdown: FC<DropdownProps> = ({
       <NavDropdown
         expandedNavDropdownElement={expandedNavDropdownElement}
         dropdownStyle={dropdownStyle}
-        onMouseEnter={() => setExpandedNavDropdownElement(expandedNavDropdownElement)} // TODO: unnecessary ?
         onMouseLeave={() => {
           if (!dropdownDropdownName) {
             setExpandedNavDropdownName(undefined);
@@ -117,7 +116,6 @@ export const Dropdown: FC<DropdownProps> = ({
         dropdownDropdownName={dropdownDropdownName}
         dropdownStyle={dropdownStyle}
         hoverStyle={hoverStyle}
-        onMouseEnter={() => setDropdownDropdownElement(dropdownDropdownElement)} // TODO: unnecessary ?
         onMouseLeave={() => {
           setDropdownDropdownElement(undefined);
           setDropdownDropdownName(undefined);
diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
index 6e202af94..70a4a965a 100644
--- a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
@@ -42,7 +42,6 @@ export type DropdownDropdownProps = {
   dropdownDropdownName?: string;
   dropdownStyle?: React.PropsWithoutRef<MKBoxProps>;
   hoverStyle: HoverStyle;
-  onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
   onMouseLeave: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 
@@ -52,7 +51,6 @@ export const DropdownDropdown = ({
   dropdownDropdownName,
   dropdownStyle,
   hoverStyle,
-  onMouseEnter,
   onMouseLeave,
 }: DropdownDropdownProps): JSX.Element => (
   <Popper
@@ -62,7 +60,6 @@ export const DropdownDropdown = ({
     placement="right-start"
     transition
     style={{ zIndex: 10 }}
-    onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
   >
     {({ TransitionProps }) => (
diff --git a/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx b/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx
index 6998d8840..c26c2d759 100644
--- a/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/navDropdown/NavDropdown.tsx
@@ -34,14 +34,12 @@ import { MKBox, MKBoxProps, MKTypography } from '../../..';
 export type NavDropdownProps = {
   expandedNavDropdownElement?: EventTarget & HTMLSpanElement;
   dropdownStyle?: React.PropsWithoutRef<MKBoxProps>;
-  onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
   onMouseLeave: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 
 export const NavDropdown: FC<PropsWithChildren<NavDropdownProps>> = ({
   expandedNavDropdownElement,
   dropdownStyle,
-  onMouseEnter,
   onMouseLeave,
   children,
 }) => {
@@ -75,7 +73,6 @@ export const NavDropdown: FC<PropsWithChildren<NavDropdownProps>> = ({
           },
         },
       ]}
-      onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
       {({ TransitionProps }) => (

From ff2379ad77fe70f13da31c46ee5c1b77219c9123 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 17:00:18 +0200
Subject: [PATCH 12/14] Split dropdown elements for list

---
 src/components/Header.tsx                     |  3 +-
 .../dropdownDropdown/DropdownDropdown.tsx     |  2 +-
 .../listNavDropdown/ListNavDropdown.tsx       |  2 +-
 .../Navbar/desktop/listNavDropdown/Row.tsx    | 72 -------------------
 4 files changed, 3 insertions(+), 76 deletions(-)
 delete mode 100644 src/components/material-kit/Navbar/desktop/listNavDropdown/Row.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ef57cb285..5dad45bcb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -76,9 +76,8 @@ export type HeaderMenuWithItems = Pick<LinkContent, 'name' | 'description'> & {
   isCollapsed?: boolean; // TODO Modify the code to remove this property
   items: LinkContent[];
 };
-
 export type HeaderMenu =
-  | LinkContent // dropdown-item
+  | LinkContent // dropdown-link
   | HeaderMenuWithItems; //dropdown-menu
 
 export const isHeaderMenuWithItems = (
diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
index 70a4a965a..a63df52ed 100644
--- a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
@@ -25,7 +25,7 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
-import React, { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 
 import { Grow, Popper } from '@mui/material';
 
diff --git a/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx b/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
index 20b7eda1f..25bb16821 100644
--- a/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
@@ -60,7 +60,7 @@ export const ListNavDropdown: FC<ListNavDropdownProps> = ({
             currentTarget,
           }: React.MouseEvent<HTMLSpanElement | HTMLLinkElement>) => {
             if (menu.isCollapsed) {
-              setDropdownDropdownElement(currentTarget ?? undefined);
+              setDropdownDropdownElement(currentTarget);
               setDropdownDropdownName(menu.name);
             }
           }}
diff --git a/src/components/material-kit/Navbar/desktop/listNavDropdown/Row.tsx b/src/components/material-kit/Navbar/desktop/listNavDropdown/Row.tsx
deleted file mode 100644
index 46a4fc26a..000000000
--- a/src/components/material-kit/Navbar/desktop/listNavDropdown/Row.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright 2023 Bonitasoft S.A.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- =========================================================
- * Material Kit 2 React - v2.0.0
- =========================================================
- * Product Page: https://www.creative-tim.com/product/material-kit-react
- * Copyright 2021 Creative Tim (https://www.creative-tim.com)
- Coded by www.creative-tim.com
- =========================================================
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- */
-
-import React, { Dispatch, SetStateAction } from 'react';
-
-import { HoverStyle } from '../../common';
-import { HeaderMenu, isHeaderMenuWithItems } from '../../../../Header';
-
-import { DropdownDropdown } from './DropdownDropdown';
-import { DropdownLink } from './DropdownLink';
-
-export type RowProps = {
-  menu: HeaderMenu;
-  setDropdownDropdownElement: Dispatch<
-    SetStateAction<(EventTarget & HTMLSpanElement) | undefined>
-  >;
-  setDropdownDropdownName: Dispatch<SetStateAction<string | undefined>>;
-  hoverStyle: HoverStyle;
-};
-export const Row = ({
-  menu,
-  hoverStyle,
-  setDropdownDropdownElement,
-  setDropdownDropdownName,
-}: RowProps): JSX.Element =>
-  isHeaderMenuWithItems(menu) ? (
-    <DropdownDropdown
-      key={menu.name}
-      content={menu}
-      hoverStyle={hoverStyle}
-      onMouseEnter={({
-        currentTarget,
-      }: React.MouseEvent<HTMLSpanElement | HTMLLinkElement>) => {
-        if (menu.isCollapsed) {
-          setDropdownDropdownElement(currentTarget ?? undefined);
-          setDropdownDropdownName(menu.name);
-        }
-      }}
-      onMouseLeave={() => {
-        if (menu.isCollapsed) {
-          setDropdownDropdownElement(undefined);
-          setDropdownDropdownName(undefined);
-        }
-      }}
-    />
-  ) : (
-    <DropdownLink key={menu.name} content={menu} hoverStyle={hoverStyle} />
-  );

From 2ca40d95e8e26be4d53302acd277fe1f93ecb02d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Fri, 12 May 2023 17:37:00 +0200
Subject: [PATCH 13/14] Remove unnecessary property

---
 src/components/Header.tsx                     |  6 +-
 .../{listNavDropdown => }/DropdownLink.tsx    |  8 +-
 .../dropdownDropdown/DropdownDropdown.tsx     |  3 +-
 .../Navbar/desktop/dropdownDropdown/Row.tsx   | 99 -------------------
 .../listNavDropdown/ListNavDropdown.tsx       | 12 +--
 5 files changed, 10 insertions(+), 118 deletions(-)
 rename src/components/material-kit/Navbar/desktop/{listNavDropdown => }/DropdownLink.tsx (91%)
 delete mode 100644 src/components/material-kit/Navbar/desktop/dropdownDropdown/Row.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 5dad45bcb..0476eb978 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -70,11 +70,7 @@ export const isHeaderRouteWithMenus = (
  * @field description To define the description of a route under its name
  */
 export type HeaderMenuWithItems = Pick<LinkContent, 'name' | 'description'> & {
-  /**
-   * To define that the item should open a dropdown for its collapse items
-   */
-  isCollapsed?: boolean; // TODO Modify the code to remove this property
-  items: LinkContent[];
+  items: Omit<LinkContent, 'description'>[];
 };
 export type HeaderMenu =
   | LinkContent // dropdown-link
diff --git a/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownLink.tsx b/src/components/material-kit/Navbar/desktop/DropdownLink.tsx
similarity index 91%
rename from src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownLink.tsx
rename to src/components/material-kit/Navbar/desktop/DropdownLink.tsx
index 96b1a45f4..4b67ae5fb 100644
--- a/src/components/material-kit/Navbar/desktop/listNavDropdown/DropdownLink.tsx
+++ b/src/components/material-kit/Navbar/desktop/DropdownLink.tsx
@@ -29,11 +29,11 @@ import React, { FC } from 'react';
 
 import { Theme } from '@mui/material';
 
-import { borders } from '../../../../../assets/theme';
+import { borders } from '../../../../assets/theme';
 
-import { Link, LinkContent } from '../../../..';
-import { MKBox, MKTypography } from '../../..';
-import { getHoverConfiguration, HoverStyle } from '../../common';
+import { Link, LinkContent } from '../../..';
+import { MKBox, MKTypography } from '../..';
+import { getHoverConfiguration, HoverStyle } from '../common';
 
 type DropdownLinkProps = {
   content: LinkContent;
diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
index a63df52ed..5b132e68a 100644
--- a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
@@ -72,11 +72,10 @@ export const DropdownDropdown = ({
             px={1}
             mt={2}
           >
-            {content.map(({ items, isCollapsed }) =>
+            {content.map(({ items }) =>
               items.map(link => (
                 <DropdownLink
                   content={link}
-                  isCollapsed={isCollapsed}
                   hoverStyle={hoverStyle}
                 />
               )),
diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/Row.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/Row.tsx
deleted file mode 100644
index 5ae87a2f8..000000000
--- a/src/components/material-kit/Navbar/desktop/dropdownDropdown/Row.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright 2023 Bonitasoft S.A.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- =========================================================
- * Material Kit 2 React - v2.0.0
- =========================================================
- * Product Page: https://www.creative-tim.com/product/material-kit-react
- * Copyright 2021 Creative Tim (https://www.creative-tim.com)
- Coded by www.creative-tim.com
- =========================================================
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- */
-
-import React from 'react';
-
-import { KeyboardArrowDown } from '@mui/icons-material';
-import { Theme } from '@mui/material';
-
-import { getHoverConfiguration, HoverStyle } from '../../common';
-import { MKTypography, MKBox } from '../../..';
-import { Link, LinkContent } from '../../../..';
-
-export type RowProps = {
-  isCollapsed?: boolean;
-  hoverStyle: HoverStyle;
-} & LinkContent;
-export const Row = ({
-  description,
-  name,
-  url,
-  type,
-  hoverStyle,
-  isCollapsed = false,
-}: RowProps): JSX.Element => (
-  <Link
-    component={MKTypography}
-    key={name}
-    type={type}
-    url={url}
-    display="flex"
-    justifyContent="space-between"
-    alignItems="center"
-    variant="button"
-    textTransform="capitalize"
-    minWidth={description ? '14rem' : '12rem'}
-    color={'primary'}
-    fontWeight={description ? 'bold' : 'regular'}
-    py={description ? 1 : 0.625}
-    px={2}
-    sx={({ palette, borders: { borderRadius } }: Theme) => ({
-      borderRadius: borderRadius.md,
-      cursor: 'pointer',
-      transition: 'all 300ms linear',
-      ...getHoverConfiguration(palette, hoverStyle),
-    })}
-  >
-    {description ? (
-      <MKBox>
-        {name}
-        <MKTypography
-          display="block"
-          variant="button"
-          color="text"
-          fontWeight="regular"
-          sx={{ transition: 'all 300ms linear' }}
-        >
-          {description}
-        </MKTypography>
-      </MKBox>
-    ) : (
-      name
-    )}
-
-    {isCollapsed && (
-      <KeyboardArrowDown
-        fontSize="small"
-        sx={{
-          fontWeight: 'normal',
-          verticalAlign: 'middle',
-          mr: -0.5,
-        }}
-      />
-    )}
-  </Link>
-);
diff --git a/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx b/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
index 25bb16821..52335ae7d 100644
--- a/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
@@ -59,16 +59,12 @@ export const ListNavDropdown: FC<ListNavDropdownProps> = ({
           onMouseEnter={({
             currentTarget,
           }: React.MouseEvent<HTMLSpanElement | HTMLLinkElement>) => {
-            if (menu.isCollapsed) {
-              setDropdownDropdownElement(currentTarget);
-              setDropdownDropdownName(menu.name);
-            }
+            setDropdownDropdownElement(currentTarget);
+            setDropdownDropdownName(menu.name);
           }}
           onMouseLeave={() => {
-            if (menu.isCollapsed) {
-              setDropdownDropdownElement(undefined);
-              setDropdownDropdownName(undefined);
-            }
+            setDropdownDropdownElement(undefined);
+            setDropdownDropdownName(undefined);
           }}
         />
       ) : (

From a27e27c292fb4f91e5872a32365c2ca4080c74b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souchet=20C=C3=A9line?= <celine.souchet@bonitasoft.com>
Date: Wed, 2 Aug 2023 13:03:04 +0200
Subject: [PATCH 14/14] Fix

---
 .../Navbar/common/NavDropdown.tsx             |  3 -
 .../material-kit/Navbar/common/NavLink.tsx    |  5 +-
 .../Navbar/desktop/DropdownLink.tsx           | 16 ++-
 .../material-kit/Navbar/desktop/NavbarNav.tsx |  2 +-
 .../Navbar/desktop/columnNavDropdown/Row.tsx  |  6 +-
 .../dropdownDropdown/DropdownDropdown.tsx     |  7 +-
 .../desktop/dropdownDropdown/DropdownLink.tsx | 99 -------------------
 .../listNavDropdown/ListNavDropdown.tsx       |  2 +-
 .../Navbar/mobile/NavDropdown.tsx             | 10 +-
 .../material-kit/Navbar/mobile/NavbarNav.tsx  | 12 ++-
 10 files changed, 39 insertions(+), 123 deletions(-)
 delete mode 100644 src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownLink.tsx

diff --git a/src/components/material-kit/Navbar/common/NavDropdown.tsx b/src/components/material-kit/Navbar/common/NavDropdown.tsx
index c85e5f5f9..b302ae620 100644
--- a/src/components/material-kit/Navbar/common/NavDropdown.tsx
+++ b/src/components/material-kit/Navbar/common/NavDropdown.tsx
@@ -32,7 +32,6 @@ import { HeaderRouteWithMenus } from '../../../Header';
 import { NavbarItem, HoverStyle } from '../common';
 
 type NavDropdownProps = HeaderRouteWithMenus & {
-  isMobileView: boolean;
   isCollapsed: boolean;
   isCollapsible: boolean;
   hoverStyle: HoverStyle;
@@ -43,7 +42,6 @@ type NavDropdownProps = HeaderRouteWithMenus & {
 export const NavDropdown = ({
   name,
   icon,
-  isMobileView,
   isCollapsed,
   isCollapsible,
   hoverStyle,
@@ -58,7 +56,6 @@ export const NavDropdown = ({
     icon={icon}
     isCollapsed={isCollapsed}
     isCollapsible={isCollapsible}
-    isMobileView={isMobileView}
     hoverStyle={hoverStyle}
     onClick={onClick}
     onMouseEnter={onMouseEnter}
diff --git a/src/components/material-kit/Navbar/common/NavLink.tsx b/src/components/material-kit/Navbar/common/NavLink.tsx
index 66ef9e4fc..03350f784 100644
--- a/src/components/material-kit/Navbar/common/NavLink.tsx
+++ b/src/components/material-kit/Navbar/common/NavLink.tsx
@@ -36,10 +36,7 @@ type NavLinkProps = HeaderRouteAsLink & {
   hoverStyle: HoverStyle;
 };
 
-export const NavLink = ({
-  hoverStyle,
-  ...route
-}: NavLinkProps): JSX.Element => (
+export const NavLink: FC<NavLinkProps> = ({ hoverStyle, ...route }) => (
   <Link
     component={NavbarItem}
     type={route.type}
diff --git a/src/components/material-kit/Navbar/desktop/DropdownLink.tsx b/src/components/material-kit/Navbar/desktop/DropdownLink.tsx
index 4b67ae5fb..3cd072867 100644
--- a/src/components/material-kit/Navbar/desktop/DropdownLink.tsx
+++ b/src/components/material-kit/Navbar/desktop/DropdownLink.tsx
@@ -28,6 +28,7 @@
 import React, { FC } from 'react';
 
 import { Theme } from '@mui/material';
+import { KeyboardArrowDown } from '@mui/icons-material';
 
 import { borders } from '../../../../assets/theme';
 
@@ -38,11 +39,13 @@ import { getHoverConfiguration, HoverStyle } from '../common';
 type DropdownLinkProps = {
   content: LinkContent;
   hoverStyle: HoverStyle;
+  isCollapsed?: boolean;
 };
 
 export const DropdownLink: FC<DropdownLinkProps> = ({
   content,
   hoverStyle,
+  isCollapsed = false,
 }) => (
   <Link
     component={MKTypography}
@@ -78,7 +81,18 @@ export const DropdownLink: FC<DropdownLinkProps> = ({
         </MKTypography>
       </MKBox>
     ) : (
-      content.name
+      name
+    )}
+
+    {isCollapsed && (
+      <KeyboardArrowDown
+        fontSize="small"
+        sx={{
+          fontWeight: 'normal',
+          verticalAlign: 'middle',
+          mr: -0.5,
+        }}
+      />
     )}
   </Link>
 );
diff --git a/src/components/material-kit/Navbar/desktop/NavbarNav.tsx b/src/components/material-kit/Navbar/desktop/NavbarNav.tsx
index bfe9f53fc..440980bd0 100644
--- a/src/components/material-kit/Navbar/desktop/NavbarNav.tsx
+++ b/src/components/material-kit/Navbar/desktop/NavbarNav.tsx
@@ -27,7 +27,7 @@
 
 import React, { Dispatch, SetStateAction } from 'react';
 
-import { NavbarItem, HoverStyle, NavLink, NavDropdown } from '../common';
+import { NavbarItem, HoverStyle, NavLink } from '../common';
 
 import { HeaderRoute, isHeaderRouteWithMenus } from '../../../Header';
 import { MKBox } from '../..';
diff --git a/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx
index 3477c7541..d884d7172 100644
--- a/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx
+++ b/src/components/material-kit/Navbar/desktop/columnNavDropdown/Row.tsx
@@ -29,6 +29,8 @@ import React from 'react';
 
 import { Theme } from '@mui/material';
 
+import { borders } from '../../../../../assets/theme';
+
 import { Link, LinkContent } from '../../../../Link';
 import { MKTypography } from '../../..';
 import { getHoverConfiguration, HoverStyle } from '../../common';
@@ -67,8 +69,8 @@ const SubMenu = ({ item, hoverStyle }: SubMenuProps): JSX.Element => (
     fontWeight="regular"
     py={0.625}
     px={2}
-    sx={({ palette, borders: { borderRadius } }: Theme) => ({
-      borderRadius: borderRadius.md,
+    sx={({ palette }: Theme) => ({
+      borderRadius: borders.radius.md,
       cursor: 'pointer',
       transition: 'all 300ms linear',
       ...getHoverConfiguration(palette, hoverStyle),
diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
index 5b132e68a..b73b23b72 100644
--- a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownDropdown.tsx
@@ -29,7 +29,7 @@ import React from 'react';
 
 import { Grow, Popper } from '@mui/material';
 
-import { DropdownLink } from './DropdownLink';
+import { DropdownLink } from '../DropdownLink';
 import { MKBox, MKBoxProps } from '../../..';
 
 import { HeaderMenuWithItems } from '../../../../Header';
@@ -74,10 +74,7 @@ export const DropdownDropdown = ({
           >
             {content.map(({ items }) =>
               items.map(link => (
-                <DropdownLink
-                  content={link}
-                  hoverStyle={hoverStyle}
-                />
+                <DropdownLink content={link} hoverStyle={hoverStyle} />
               )),
             )}
           </MKBox>
diff --git a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownLink.tsx b/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownLink.tsx
deleted file mode 100644
index 5f60e6f48..000000000
--- a/src/components/material-kit/Navbar/desktop/dropdownDropdown/DropdownLink.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright 2023 Bonitasoft S.A.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- =========================================================
- * Material Kit 2 React - v2.0.0
- =========================================================
- * Product Page: https://www.creative-tim.com/product/material-kit-react
- * Copyright 2021 Creative Tim (https://www.creative-tim.com)
- Coded by www.creative-tim.com
- =========================================================
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- */
-
-import React from 'react';
-
-import { Theme } from '@mui/material';
-import { KeyboardArrowDown } from '@mui/icons-material';
-
-import { borders } from '../../../../assets/theme';
-import { Link, LinkContent } from '../../../..';
-import { MKBox, MKTypography } from '../../..';
-import { HoverStyle, getHoverConfiguration } from '../../common';
-
-type DropdownLinkProps = {
-  content: LinkContent;
-  isCollapsed?: boolean;
-  hoverStyle: HoverStyle;
-};
-
-export const DropdownLink = ({
-  content: { description, name, url, type },
-  hoverStyle,
-  isCollapsed = false,
-}: DropdownLinkProps): JSX.Element => (
-  <Link
-    component={MKTypography}
-    key={name}
-    type={type}
-    url={url}
-    display="flex"
-    justifyContent="space-between"
-    alignItems="center"
-    variant="button"
-    textTransform="capitalize"
-    minWidth={description ? '14rem' : '12rem'}
-    color={'primary'}
-    fontWeight={description ? 'bold' : 'regular'}
-    py={description ? 1 : 0.625}
-    px={2}
-    sx={({ palette }: Theme) => ({
-      borderRadius: borders.radius.md,
-      cursor: 'pointer',
-      transition: 'all 300ms linear',
-      ...getHoverConfiguration(palette, hoverStyle),
-    })}
-  >
-    {description ? (
-      <MKBox>
-        {name}
-        <MKTypography
-          display="block"
-          variant="button"
-          color="text"
-          fontWeight="regular"
-          sx={{ transition: 'all 300ms linear' }}
-        >
-          {description}
-        </MKTypography>
-      </MKBox>
-    ) : (
-      name
-    )}
-
-    {isCollapsed && (
-      <KeyboardArrowDown
-        fontSize="small"
-        sx={{
-          fontWeight: 'normal',
-          verticalAlign: 'middle',
-          mr: -0.5,
-        }}
-      />
-    )}
-  </Link>
-);
diff --git a/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx b/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
index 52335ae7d..093a8cfbf 100644
--- a/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
+++ b/src/components/material-kit/Navbar/desktop/listNavDropdown/ListNavDropdown.tsx
@@ -27,7 +27,7 @@
 
 import React, { Dispatch, FC, SetStateAction } from 'react';
 
-import { DropdownLink } from './DropdownLink';
+import { DropdownLink } from '../DropdownLink';
 import { DropdownDropdown } from './DropdownDropdown';
 
 import { HeaderMenu, isHeaderMenuWithItems } from '../../../../Header';
diff --git a/src/components/material-kit/Navbar/mobile/NavDropdown.tsx b/src/components/material-kit/Navbar/mobile/NavDropdown.tsx
index 47be34270..5ece203ca 100644
--- a/src/components/material-kit/Navbar/mobile/NavDropdown.tsx
+++ b/src/components/material-kit/Navbar/mobile/NavDropdown.tsx
@@ -27,12 +27,15 @@
 
 import React, { PropsWithChildren } from 'react';
 
-import { HeaderRouteWithMenus } from '../../../Header';
+import { DropdownDropdown } from './DropdownDropdown';
+import { DropdownLink } from './DropdownLink';
+
+import { MKBox } from '../../..';
+import { HeaderRouteWithMenus, isHeaderMenuWithItems } from '../../../Header';
 
 import { NavbarItem, HoverStyle } from '../common';
 
 type NavDropdownProps = HeaderRouteWithMenus & {
-  isMobileView: boolean;
   isCollapsed: boolean;
   isCollapsible: boolean;
   hoverStyle: HoverStyle;
@@ -43,14 +46,13 @@ type NavDropdownProps = HeaderRouteWithMenus & {
 export const NavDropdown = ({
   name,
   icon,
-  isMobileView,
   isCollapsed,
   isCollapsible,
   hoverStyle,
   onClick,
   onMouseEnter,
   onMouseLeave,
-  children,
+  menus,
 }: PropsWithChildren<NavDropdownProps>): JSX.Element => (
   <NavbarItem
     key={name}
diff --git a/src/components/material-kit/Navbar/mobile/NavbarNav.tsx b/src/components/material-kit/Navbar/mobile/NavbarNav.tsx
index b5204de3a..8aad238be 100644
--- a/src/components/material-kit/Navbar/mobile/NavbarNav.tsx
+++ b/src/components/material-kit/Navbar/mobile/NavbarNav.tsx
@@ -58,7 +58,6 @@ export const NavbarNav = ({
           return isHeaderRouteWithMenus(route) ? (
             <NavDropdown
               // key={route.name}
-              isMobileView={true}
               isCollapsed={isCollapsed}
               isCollapsible={true}
               onClick={() =>
@@ -79,9 +78,16 @@ export const NavbarNav = ({
                 {route.menus.map((menu, id) => (
                   <MKBox key={menu.name} px={2}>
                     {isHeaderMenuWithItems(menu) ? (
-                      <DropdownDropdown {...menu} hoverStyle={hoverStyle} />
+                      <DropdownDropdown
+                        content={menu}
+                        hoverStyle={hoverStyle}
+                      />
                     ) : (
-                      <DropdownLink id={id} {...menu} hoverStyle={hoverStyle} />
+                      <DropdownLink
+                        id={id}
+                        content={menu}
+                        hoverStyle={hoverStyle}
+                      />
                     )}
                   </MKBox>
                 ))}