menu

src/pages/course-list/course-list.tsx

@@ -16,10 +16,33 @@ import {
   FormHelperText,
   FormErrorMessage,
   useToast,
+  useColorMode,
 } from '@chakra-ui/react'
 import { useForm, Controller } from 'react-hook-form'
 
+const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
+
+const loadServiceMenu = () => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.src = MENU_SCRIPT_URL
+    script.onload = () => setTimeout(() => resolve(true), 1000)
+    script.onerror = reject
+    document.body.appendChild(script)
+  })
+}
+
 import { ErrorSpan } from '../style'
+declare global {
+  interface Window {
+    createServiceMenu?: (options: any) => {
+      show: () => void;
+      hide: () => void;
+      update: () => void;
+      destroy: () => void;
+    };
+  }
+}
 
 import { useAppSelector } from '../../__data__/store'
 import { api } from '../../__data__/api/api'
@@ -27,6 +50,7 @@ import { isTeacher } from '../../utils/user'
 import { AddIcon } from '@chakra-ui/icons'
 import { PageLoader } from '../../components/page-loader/page-loader'
 import { CourseCard } from './course-card'
+import { keycloak } from '../../__data__/kc'
 
 interface NewCourseForm {
   startDt: string
@@ -41,6 +65,14 @@ export const CoursesList = () => {
   const [showForm, setShowForm] = useState(false)
   const toastRef = useRef(null)
 
+  const [serviceMenu, setServiceMenu] = useState(false)
+
+  useEffect(() => {
+    loadServiceMenu().then(() => {
+      setServiceMenu(true)
+    }).catch(console.error)
+  }, [])
+
   const {
     control,
     handleSubmit,
@@ -79,6 +111,39 @@ export const CoursesList = () => {
     }
   }, [crucQuery.isSuccess])
 
+  const serviceMenuContainerRef = useRef<HTMLDivElement>(null)
+  const serviceMenuInstanceRef = useRef<any>(null)
+
+  useEffect(() => {
+    // Проверяем, что библиотека загружена и есть контейнер для меню
+    if (window.createServiceMenu && serviceMenuContainerRef.current) {
+      // Создаем меню сервисов
+      serviceMenuInstanceRef.current = window.createServiceMenu({
+        accessToken: keycloak.token,
+        apiUrl: 'https://admin.bro-js.ru/api/global-settings/v1',
+        targetElement: serviceMenuContainerRef.current,
+        styles: {
+          dotColor: '#333',
+          hoverColor: '#eee',
+          backgroundColor: '#fff',
+          textColor: '#333',
+        },
+        translations: {
+          menuTitle: 'Сервисы BRO',
+          menuAriaLabel: 'Сервисы BRO',
+        }
+      });
+    }
+
+    // Очистка при размонтировании
+    return () => {
+      if (serviceMenuInstanceRef.current) {
+        serviceMenuInstanceRef.current.destroy();
+        serviceMenuInstanceRef.current = null;
+      }
+    };
+  }, [keycloak.token, serviceMenu]);
+
   if (isLoading) {
     return (
       <PageLoader />
@@ -86,6 +151,8 @@ export const CoursesList = () => {
   }
 
   return (
+    <>
+    <div id="dots" ref={serviceMenuContainerRef}></div>
     <Container maxW="container.xl">
       {isTeacher(user) && (
         <Box mt="15" mb="15">
@@ -196,5 +263,6 @@ export const CoursesList = () => {
         ))}
       </VStack>
     </Container>
+        </>
   )
 }

src/types/serviceMenu.d.ts

@@ -0,0 +1,9 @@
+declare module 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js' {
+  const createServiceMenu: (options: any) => {
+    show: () => void;
+    hide: () => void;
+    update: () => void;
+    destroy: () => void;
+  };
+  export default createServiceMenu;
+}