diff --git a/src/components/PageLayout/Footer/Footer.module.scss b/src/components/PageLayout/Footer/Footer.module.scss index 8c1c41ca..44f5a7da 100644 --- a/src/components/PageLayout/Footer/Footer.module.scss +++ b/src/components/PageLayout/Footer/Footer.module.scss @@ -11,4 +11,25 @@ .content { grid-column-start: 2; grid-column-end: 4; +} + +.menuItem { + background-color: transparent; + + a { + padding: 0px 5px; + border-bottom: 5px solid white; + color: white; + background-color: inherit; + } +} + +.menuItem:hover { + background-color: white; + + a { + color: black; + border-color: black; + background-color: inherit; + } } \ No newline at end of file diff --git a/src/components/PageLayout/Footer/Footer.module.scss.d.ts b/src/components/PageLayout/Footer/Footer.module.scss.d.ts index 879fe708..028117b1 100644 --- a/src/components/PageLayout/Footer/Footer.module.scss.d.ts +++ b/src/components/PageLayout/Footer/Footer.module.scss.d.ts @@ -1,6 +1,7 @@ export type Styles = { container: string content: string + menuItem: string } export type ClassNames = keyof Styles diff --git a/src/components/PageLayout/Footer/Footer.tsx b/src/components/PageLayout/Footer/Footer.tsx index 665379a0..2afe68d6 100644 --- a/src/components/PageLayout/Footer/Footer.tsx +++ b/src/components/PageLayout/Footer/Footer.tsx @@ -3,31 +3,57 @@ import {useQuery} from '@tanstack/react-query' import axios from 'axios' import {FC} from 'react' +import {Link} from '@/components/Clickable/Link' import {Loading} from '@/components/Loading/Loading' import {ILogo, Logo} from '@/components/PageLayout/Footer/Logo' +import {MenuItemShort} from '@/types/api/cms' +import {useSeminarInfo} from '@/utils/useSeminarInfo' import styles from './Footer.module.scss' export const Footer: FC = () => { + const {seminar, seminarId} = useSeminarInfo() + + const { + data: menuItemsData, + isLoading: menuItemsIsLoading, + error: menuItemsError, + } = useQuery({ + queryKey: ['cms', 'menu-item', 'on-site', seminarId], + queryFn: () => axios.get(`/api/cms/menu-item/on-site/${seminarId}`), + }) + const menuItems = menuItemsData?.data ?? [] + const { - data: postsData, + data: logosData, isLoading: logosIsLoading, - error: postsError, + error: logosError, } = useQuery({ queryKey: ['cms', 'logo'], queryFn: () => axios.get('/api/cms/logo'), }) - const logos = postsData?.data.filter((logo) => !logo.disabled) ?? [] + const logos = logosData?.data.filter((logo) => !logo.disabled) ?? [] return (
+ + {menuItemsIsLoading && } + {menuItems.map((item) => ( +
+ + {item.caption} + +
+ ))} + {menuItemsError &&

{menuItemsError.message}

} +
{logosIsLoading && } {logos.map((logo) => ( ))} - {postsError &&

{postsError.message}

} + {logosError &&

{logosError.message}

}
diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx index e5c53e84..dd2a710b 100644 --- a/src/components/PageLayout/MenuMain/MenuMain.tsx +++ b/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() @@ -31,7 +26,7 @@ export const MenuMain: FC = () => { const {data: menuItemsData, isLoading: menuItemsIsLoading} = useQuery({ queryKey: ['cms', 'menu-item', 'on-site', seminarId], - queryFn: () => axios.get(`/api/cms/menu-item/on-site/${seminarId}`), + queryFn: () => axios.get(`/api/cms/menu-item/on-site/${seminarId}`), }) const menuItems = menuItemsData?.data ?? []