Fixes always active menu route

src/components/PageLayout/MenuMain/MenuMain.tsx

@@ -9,18 +9,13 @@ import {FC, useState} from 'react'
 import {CloseButton} from '@/components/CloseButton/CloseButton'
 import {Loading} from '@/components/Loading/Loading'
 import Menu from '@/svg/menu.svg'
+import {MenuItemShort} from '@/types/api/cms'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Authentication} from '../Authentication/Authentication'
 import styles from './MenuMain.module.scss'
 
-interface MenuItemInterface {
-  id: number
-  caption: string
-  url: string
-}
-
 export const MenuMain: FC = () => {
   const {seminar, seminarId} = useSeminarInfo()
 
@@ -30,8 +25,8 @@ export const MenuMain: FC = () => {
   const toggleMenu = () => setIsVisible((currentIsVisible) => !currentIsVisible)
 
   const {data: menuItemsData, isLoading: menuItemsIsLoading} = useQuery({
-    queryKey: ['cms', 'menu-item', 'on-site', seminarId],
-    queryFn: () => axios.get<MenuItemInterface[]>(`/api/cms/menu-item/on-site/${seminarId}`),
+    queryKey: ['cms', 'menu-item', 'on-site', seminarId, '?menu'],
+    queryFn: () => axios.get<MenuItemShort[]>(`/api/cms/menu-item/on-site/${seminarId}?type=menu`),
   })
   const menuItems = menuItemsData?.data ?? []
 
@@ -95,9 +90,16 @@ const MenuMainItem: FC<{caption: string; url: string}> = ({caption, url}) => {
   // potrebne koncove lomitko pre porovnanie s URLkami z BE
   const pathWithSlash = `${router.asPath}/`
 
-  // ak sme na `/matik/vysledky/44/leto/2`, orezme to na dlzku `url`, v zavere porovnajme
-  // (teda v podstate zistime, ci `pathWithSlash` zacina znakmi `url`)
-  const active = pathWithSlash.slice(0, url.length) === url
+  let active
+
+  const urlArray = url.split('/')
+  if (urlArray.length === 3 && urlArray[0] === '' && urlArray[2] === '') {
+    // riesi case ked url je napr. /strom/ a teda nestaci porovnanie so .startsWith
+    // urlArray je tak v tvare ['', 'strom', ''] co overuje dlzka 3 a zaciatok/koniec ako ''
+    active = pathWithSlash === url
+  } else {
+    active = pathWithSlash.startsWith(url)
+  }
 
   return (
     <div className={clsx(styles.menuItem, active && styles.active)}>