Footer (#224)

* renaming Footer to DebugFooter

* basic footer layout and positioning

* Footer positioning

* Addedd Logo component

* Footer containing logos

* Change position of Footer

* Style images in Footer

* Add menuitems to Footer

* Fix some thinks after review

---------

Co-authored-by: matushl <[email protected]>

src/components/PageLayout/DebugFooter/DebugFooter.module.scss

@@ -0,0 +1,13 @@
+.debugFooter {
+  position: fixed;
+  left: 25%;
+  right: 0;
+  bottom: 0;
+
+  background-color: black;
+  color: white;
+
+  display: flex;
+  flex-direction: row;
+  gap: 40px;
+}

src/components/PageLayout/DebugFooter/DebugFooter.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  debugFooter: string
+}
+
+export type ClassNames = keyof Styles
+
+declare const styles: Styles
+
+export default styles

src/components/PageLayout/DebugFooter/DebugFooter.tsx

@@ -0,0 +1,27 @@
+import {useQuery} from '@tanstack/react-query'
+import axios from 'axios'
+import {FC} from 'react'
+
+import {Profile} from '@/types/api/personal'
+import {AuthContainer} from '@/utils/AuthContainer'
+
+import styles from './DebugFooter.module.scss'
+
+export const DebugFooter: FC = () => {
+  const {isAuthed} = AuthContainer.useContainer()
+
+  const {data} = useQuery({
+    queryKey: ['personal', 'profiles', 'myprofile'],
+    queryFn: () => axios.get<Profile>(`/api/personal/profiles/myprofile`),
+    enabled: isAuthed,
+  })
+  const profile = data?.data
+
+  return (
+    <div className={styles.debugFooter}>
+      <span>Debug info: </span>
+      <span>user name: {profile?.first_name + ' ' + profile?.last_name} </span>
+      <span>isAuthed: {`${isAuthed}`}</span>
+    </div>
+  )
+}

src/components/PageLayout/Footer/Footer.module.scss

@@ -1,13 +1,34 @@
-.footer {
-  position: fixed;
-  left: 25%;
-  right: 0;
-  bottom: 0;
-
+.container {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   background-color: black;
   color: white;
+  // bottom offset because of sticky debug footer
+  padding-bottom: 1rem;
+}
 
-  display: flex;
-  flex-direction: row;
-  gap: 40px;
+.content {
+  grid-column-start: 2;
+  grid-column-end: 4;
 }
+
+.menuItem {
+  background-color: transparent;
+
+  a {
+    border-color: white;
+    color: white;
+    background-color: inherit;
+  }
+}
+
+.menuItem:hover {
+  background-color: white;
+
+  a {
+    color: black;
+    border-color: black;
+    background-color: inherit;
+  }
+}

src/components/PageLayout/Footer/Footer.module.scss.d.ts

@@ -1,5 +1,7 @@
 export type Styles = {
-  footer: string
+  container: string
+  content: string
+  menuItem: string
 }
 
 export type ClassNames = keyof Styles

src/components/PageLayout/Footer/Footer.tsx

@@ -1,27 +1,61 @@
+import {Stack} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {FC} from 'react'
 
-import {Profile} from '@/types/api/personal'
-import {AuthContainer} from '@/utils/AuthContainer'
+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 {isAuthed} = AuthContainer.useContainer()
+  const {seminar, seminarId} = useSeminarInfo()
 
-  const {data} = useQuery({
-    queryKey: ['personal', 'profiles', 'myprofile'],
-    queryFn: () => axios.get<Profile>(`/api/personal/profiles/myprofile`),
-    enabled: isAuthed,
+  const {
+    data: menuItemsData,
+    isLoading: menuItemsIsLoading,
+    error: menuItemsError,
+  } = useQuery({
+    queryKey: ['cms', 'menu-item', 'on-site', seminarId],
+    queryFn: () => axios.get<MenuItemShort[]>(`/api/cms/menu-item/on-site/${seminarId}`),
   })
-  const profile = data?.data
+  const menuItems = menuItemsData?.data ?? []
+
+  const {
+    data: logosData,
+    isLoading: logosIsLoading,
+    error: logosError,
+  } = useQuery({
+    queryKey: ['cms', 'logo'],
+    queryFn: () => axios.get<ILogo[]>('/api/cms/logo'),
+  })
+  const logos = logosData?.data.filter((logo) => !logo.disabled) ?? []
 
   return (
-    <div className={styles.footer}>
-      <span>Debug info: </span>
-      <span>user name: {profile?.first_name + ' ' + profile?.last_name} </span>
-      <span>isAuthed: {`${isAuthed}`}</span>
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <Stack direction="row" m={2} gap={2} justifyContent="center" sx={{flexWrap: 'wrap'}}>
+          {menuItemsIsLoading && <Loading />}
+          {menuItems.map((item) => (
+            <div key={item.id} className={styles.menuItem}>
+              <Link variant="button2" href={`/${seminar}${item.url}`}>
+                {item.caption}
+              </Link>
+            </div>
+          ))}
+          {menuItemsError && <p>{menuItemsError.message}</p>}
+        </Stack>
+        <Stack direction="row" m={2} mt={5} gap={2} justifyContent="center" sx={{flexWrap: 'wrap'}}>
+          {logosIsLoading && <Loading />}
+          {logos.map((logo) => (
+            <Logo key={logo.id} {...logo} />
+          ))}
+          {logosError && <p>{logosError.message}</p>}
+        </Stack>
+      </div>
     </div>
   )
 }

src/components/PageLayout/Footer/Logo.tsx

@@ -0,0 +1,22 @@
+import {Box} from '@mui/material'
+import {FC} from 'react'
+
+export interface ILogo {
+  id: number
+  name: string
+  disabled: string
+  image: string
+}
+
+export const Logo: FC<ILogo> = ({name, image}) => {
+  return (
+    <Box
+      component={'img'}
+      src={image}
+      alt={name}
+      sx={{
+        maxHeight: '9rem',
+      }}
+    />
+  )
+}

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<MenuItemInterface[]>(`/api/cms/menu-item/on-site/${seminarId}`),
+    queryFn: () => axios.get<MenuItemShort[]>(`/api/cms/menu-item/on-site/${seminarId}`),
   })
   const menuItems = menuItemsData?.data ?? []
 

src/components/PageLayout/PageLayout.module.scss

@@ -1,8 +1,12 @@
 .pageContainer {
   min-height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .grid {
+  flex: 1;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   // bottom offset because of sticky debug footer

src/components/PageLayout/PageLayout.tsx

@@ -6,6 +6,7 @@ import {BannerContainer} from '@/utils/BannerContainer'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 import {Seminar, useSeminarInfo} from '@/utils/useSeminarInfo'
 
+import {DebugFooter} from './DebugFooter/DebugFooter'
 import {Footer} from './Footer/Footer'
 import {MenuMain} from './MenuMain/MenuMain'
 import styles from './PageLayout.module.scss'
@@ -41,8 +42,8 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
           <div className={styles.pageContainer}>
             <TopGrid />
             <MenuMain />
+            <StromLogo />
             <div className={styles.grid}>
-              <StromLogo />
               <div
                 className={clsx(
                   styles.mainContent,
@@ -55,6 +56,7 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
               </div>
             </div>
             <Footer />
+            <DebugFooter />
           </div>
         </BannerContainer.Provider>
       </PageTitleContainer.Provider>