replace createMenuItem by MenuItem component

src/components/Navigation/MainMenu.tsx

@@ -4,10 +4,23 @@ import classnames from "classnames"
 import { isUserConnected, routerSelector } from "../../store/auth"
 import styles from "./styles.module.scss"
 
-const MainMenu: FC = (): JSX.Element | null => {
+interface MenuItemProps {
-    const connected = useSelector(isUserConnected)
+    name: string
-    const router = useSelector(routerSelector)
+    pathname: string
+}
 
+const MenuItem: FC<MenuItemProps> = ({ name, pathname }): JSX.Element => {
+    const router = useSelector(routerSelector)
+    const isActive = (router as any)?.location?.pathname === pathname
+    return (
+        <li className={classnames(styles.mainMenuItem, isActive ? styles.active : null)}>
+            <a href={pathname}>{name}</a>
+        </li>
+    )
+}
+
+const MainMenu: FC = (): JSX.Element => {
+    const connected = useSelector(isUserConnected)
     const [opened, setOpened] = useState(false)
 
     const onOpen = useCallback(() => {
@@ -18,16 +31,7 @@ const MainMenu: FC = (): JSX.Element | null => {
         setOpened(false)
     }, [setOpened])
 
-    if (!connected) return null
+    if (!connected) return <div />
-
-    function createMenuItem(name: string, pathname: string): JSX.Element {
-        const isActive = (router as any)?.location?.pathname === pathname
-        return (
-            <li className={classnames(styles.mainMenuItem, isActive ? styles.active : null)}>
-                <a href={pathname}>{name}</a>
-            </li>
-        )
-    }
 
     return (
         <nav>
@@ -35,9 +39,9 @@ const MainMenu: FC = (): JSX.Element | null => {
                 ☰
             </button>
             <ul className={classnames(styles.mainMenu, opened && styles.opened)}>
-                {createMenuItem("Questions", "/")}
+                <MenuItem name="Questions" pathname="/" />
-                {createMenuItem("Annonces", "/annonces")}
+                <MenuItem name="Annonces" pathname="/annonces" />
-                {createMenuItem("Mon profil", "/profil")}
+                <MenuItem name="Mon profil" pathname="/profil" />
                 <button type="button" className={styles.close} onClick={onClose}>
                     ×
                 </button>