fix(mobile): close menu after navigation (#414)

Co-authored-by: moshe vilner <shootermv@gmail.com>
Co-authored-by: Noam Gaash <noam.gaash@applitools.com>

src/layout/sidebar/menu/Menu.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import './menu.scss'
 import { useTranslation } from 'react-i18next'
 import { PAGES } from 'src/routes'
 
 import type { MenuProps } from 'antd'
 import { Menu } from 'antd'
+import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
 import { LanguageToggle } from 'src/pages/EasterEgg/LanguageToggle'
-
 type MenuItem = Required<MenuProps>['items'][number]
 function getItem(
   label: React.ReactNode,
@@ -25,9 +25,15 @@ function getItem(
 
 const MainMenu = () => {
   const { t } = useTranslation()
+  const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
   const items: MenuItem[] = PAGES.map((itm) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return getItem(<Link to={t(itm.path as any)}>{t(itm.label as any)}</Link>, itm.path, itm.icon)
+    return getItem(
+      <Link to={itm.path} onClick={() => setDrawerOpen(false)}>
+        {t(itm.label)}
+      </Link>,
+      itm.path,
+      itm.icon,
+    )
   })
 
   const location = useLocation()

src/routes/MainRoute.tsx

@@ -43,7 +43,7 @@ export const MainRoute = () => {
 
   useEffect(() => {
     const page = PAGES.find((page) => page.path === location.pathname)
-    if (page?.searchParamsRequired) {
+    if (page && 'searchParamsRequired' in page && page.searchParamsRequired) {
       const params = new URLSearchParams({ timestamp: search.timestamp.toString() })
 
       if (search.operatorId) {

src/routes/index.tsx

@@ -88,7 +88,7 @@ export const PAGES = [
     icon: <DollarOutlined />,
     element: null,
   },
-]
+] as const
 
 const HIDDEN_PAGES = [
   {
@@ -103,10 +103,10 @@ const HIDDEN_PAGES = [
     icon: <InfoCircleOutlined />,
     element: <DataResearch />,
   },
-]
+] as const
 
 const getRoutesList = () => {
-  const pages = PAGES.concat(HIDDEN_PAGES)
+  const pages = [...PAGES, ...HIDDEN_PAGES]
   const RedirectToDashboard = () => <Navigate to={pages[0].path} replace />
   const routes = pages.filter((r) => r.element)
   return (