From 887607f7f8c462308685178c35841c6634502427 Mon Sep 17 00:00:00 2001 From: Valentin Porcellini Date: Wed, 26 Jun 2024 12:00:22 +0200 Subject: [PATCH 01/21] Refactoring wip --- src/App.jsx | 4 +- src/Hooks/useAnalytics.jsx | 8 +- src/components/ApplicationLayout/index.jsx | 90 + src/components/MainContentMenu/index.jsx | 189 ++ .../NavBar/DrawerItem/DrawerItem.jsx | 14 +- .../MainContentMenuTabItems.jsx | 4 + src/components/NavBar/NavBar.jsx | 1942 ++++++++--------- .../tools/Alltools/MainContentMenu.jsx | 48 +- src/components/NotificationSnackbar/index.jsx | 33 + src/components/SideMenu/index.jsx | 688 ++++++ src/components/TopMenu/index.jsx | 146 ++ src/constants/tools.jsx | 459 ++++ src/constants/topMenuItems.jsx | 98 + src/redux/reducers/navReducer.jsx | 4 +- src/redux/reducers/tools/toolReducer.jsx | 15 +- 15 files changed, 2690 insertions(+), 1052 deletions(-) create mode 100644 src/components/ApplicationLayout/index.jsx create mode 100644 src/components/MainContentMenu/index.jsx create mode 100644 src/components/NotificationSnackbar/index.jsx create mode 100644 src/components/SideMenu/index.jsx create mode 100644 src/components/TopMenu/index.jsx create mode 100644 src/constants/tools.jsx create mode 100644 src/constants/topMenuItems.jsx diff --git a/src/App.jsx b/src/App.jsx index aad73ee0a..165835ba7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import { HashRouter, Route, Routes } from "react-router-dom"; import PopUp from "./components/PopUp/PopUp"; -import NavBar from "./components/NavBar/NavBar"; import useAuthenticationAPI from "./components/Shared/Authentication/useAuthenticationAPI"; import { useDispatch } from "react-redux"; import { @@ -10,6 +9,7 @@ import { setErrorNetwork, } from "redux/reducers/errorReducer"; import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace"; +import ApplicationLayout from "./components/ApplicationLayout"; const theme = createTheme({ palette: { @@ -103,7 +103,7 @@ const App = () => { } /> - } /> + } /> diff --git a/src/Hooks/useAnalytics.jsx b/src/Hooks/useAnalytics.jsx index 932c2b50a..d040e3fdf 100644 --- a/src/Hooks/useAnalytics.jsx +++ b/src/Hooks/useAnalytics.jsx @@ -1,14 +1,14 @@ import { useSelector } from "react-redux"; import { useEffect } from "react"; import { - trackPageView, - trackPageViewAnonymous, trackEvent, trackEventAnonymous, + trackPageView, + trackPageViewAnonymous, } from "../components/Shared/GoogleAnalytics/MatomoAnalytics"; import { history } from "../components/Shared/History/History"; -export const useTrackPageView = (path, client_id, uid, index) => { +export const useTrackPageView = (path, client_id, uid, toolName) => { const analytics = useSelector((state) => state.cookies.analytics); useEffect(() => { //console.log("general page view"); @@ -18,7 +18,7 @@ export const useTrackPageView = (path, client_id, uid, index) => { } else { trackPageViewAnonymous(path, history); } - }, [index]); + }, [toolName]); }; export const useTrackEvent = ( diff --git a/src/components/ApplicationLayout/index.jsx b/src/components/ApplicationLayout/index.jsx new file mode 100644 index 000000000..c553b7edb --- /dev/null +++ b/src/components/ApplicationLayout/index.jsx @@ -0,0 +1,90 @@ +import React, { useState } from "react"; +import { Box } from "@mui/material"; +import NotificationSnackbar from "../NotificationSnackbar"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; +import TopMenu from "../TopMenu"; +import { TOP_MENU_ITEMS } from "../../constants/topMenuItems"; +import SideMenu from "../SideMenu"; +import { tools } from "../../constants/tools"; + +const ApplicationLayout = () => { + const theme = createTheme({ + palette: { + primary: { + light: "#00926c", + main: "#00926c", + dark: "#00926c", + contrastText: "#fff", + }, + }, + components: { + MuiAppBar: { + styleOverrides: { + colorPrimary: { + backgroundColor: "#ffffff", + }, + root: { + zIndex: 1300, + height: "87px", + boxShadow: "none", + paddingTop: "12px", + }, + }, + }, + MuiListItem: { + styleOverrides: { + gutters: { + paddingLeft: "26px", + }, + }, + }, + MuiAutocomplete: { + styleOverrides: { + popupIndicatorOpen: { + transform: "none!important", + }, + popper: { + zIndex: 99999, + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: "10px!important", + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + minWidth: "160px", + }, + }, + }, + }, + }); + + // Used to display warning messages + const [openAlert, setOpenAlert] = useState(false); + + return ( + + + + + + {/**/} + + + ); +}; + +export default ApplicationLayout; diff --git a/src/components/MainContentMenu/index.jsx b/src/components/MainContentMenu/index.jsx new file mode 100644 index 000000000..dc4fadcde --- /dev/null +++ b/src/components/MainContentMenu/index.jsx @@ -0,0 +1,189 @@ +import React from "react"; +import MainContentMenuTabItems from "../NavBar/MainContentMenuTabItems/MainContentMenuTabItems"; +import ScrollTop from "../Shared/ScrollTop/ScrollTop"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; +import { Button, Fab, Snackbar } from "@mui/material"; +import { KeyboardArrowUp } from "@mui/icons-material"; +import MySnackbar from "../MySnackbar/MySnackbar"; +import { + cleanError, + cleanErrorNetwork, +} from "../../redux/reducers/errorReducer"; +import { setFalse, setTrue } from "../../redux/reducers/cookiesReducers"; +import Feedback from "../Feedback/Feedback"; +import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles"; +import { TOOL_STATUS_ICON, tools } from "../../constants/tools"; +import { useDispatch, useSelector } from "react-redux"; +import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace"; + +const MainContentMenu = () => { + const classes = useMyStyles(); + + const keyword = i18nLoadNamespace("components/NavBar"); + + const dispatch = useDispatch(); + + const currentLang = useSelector((state) => state.language); + const isCurrentLanguageLeftToRight = currentLang !== "ar"; + + const error = useSelector((state) => state.error.tools); + const errorNetwork = useSelector((state) => state.error.network); + + const cookiesUsage = useSelector((state) => state.cookies); + + const role = useSelector((state) => state.userSession.user.roles); + + const drawItemPerRole = tools.filter((tool) => { + if ( + !tools.rolesNeeded || + tool.rolesNeeded.length === 0 || + tool.rolesNeeded.includes(TOOL_STATUS_ICON.LOCK) + ) + return true; + else if ( + tools.rolesNeeded.some((restriction) => role.includes(restriction)) + ) + return true; + else return false; + }); + + const themeFab = createTheme({ + palette: { + primary: { + light: "#00926c", + main: "#00926c", + dark: "#00926c", + contrastText: "#fff", + }, + }, + components: { + MuiAppBar: { + styleOverrides: { + colorPrimary: { + backgroundColor: "#ffffff", + }, + root: { + zIndex: 1300, + height: "87px", + boxShadow: "none", + paddingTop: "12px", + }, + }, + }, + MuiListItem: { + styleOverrides: { + gutters: { + paddingLeft: "26px", + }, + }, + }, + MuiAutocomplete: { + styleOverrides: { + popupIndicatorOpen: { + transform: "none!important", + }, + popper: { + zIndex: 99999, + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: "10px!important", + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + minWidth: "160px", + }, + }, + }, + }, + }); + + return ( +
+
+ + + + + + + + + {error !== null && ( + dispatch(cleanError())} + onClose={() => {}} + sx={{ mr: 8 }} + /> + )} + {errorNetwork !== null && ( + dispatch(cleanErrorNetwork())} + onClose={() => {}} + sx={{ mr: 8 }} + /> + )} + {cookiesUsage.active === null && ( + dispatch(setFalse())} + > + {" "} + {keyword("cookies_decline")}{" "} + , + , + ]} + /> + )} + +
+ ); +}; + +export default MainContentMenu; diff --git a/src/components/NavBar/DrawerItem/DrawerItem.jsx b/src/components/NavBar/DrawerItem/DrawerItem.jsx index 842bc5b10..977dc4160 100644 --- a/src/components/NavBar/DrawerItem/DrawerItem.jsx +++ b/src/components/NavBar/DrawerItem/DrawerItem.jsx @@ -167,7 +167,7 @@ const DrawerItem = ({ toolsList }) => { ); }; -const DrawerItemContent = ({ index, drawContent }) => { +const DrawerItemContent = ({ toolName, drawContent }) => { const dispatch = useDispatch(); //Style elements @@ -220,19 +220,19 @@ const DrawerItemContent = ({ index, drawContent }) => { const session = useSelector((state) => state.userSession); const uid = session && session.user ? session.user.id : null; - useTrackPageView(path, client_id, uid, index); + useTrackPageView(path, client_id, uid, toolName); useEffect(() => { //trackPageView(path, client_id, uid); - dispatch(selectTool(index)); - }, [index]); + dispatch(selectTool(toolName)); + }, [toolName]); return ( - +
- {drawContent[index].content} - {drawContent[index].footer} + {drawContent[toolName].content} + {drawContent[toolName].footer}
diff --git a/src/components/NavBar/MainContentMenuTabItems/MainContentMenuTabItems.jsx b/src/components/NavBar/MainContentMenuTabItems/MainContentMenuTabItems.jsx index 90c94994d..319c1693d 100644 --- a/src/components/NavBar/MainContentMenuTabItems/MainContentMenuTabItems.jsx +++ b/src/components/NavBar/MainContentMenuTabItems/MainContentMenuTabItems.jsx @@ -17,6 +17,10 @@ import { useTrackPageView } from "../../../Hooks/useAnalytics"; */ const MainContentMenuTabItems = ({ tabItems, toolsList }) => { if (!tabItems || tabItems.length === 0) return null; + + console.log(tabItems); + console.log(toolsList); + return ( {tabItems.map((item, index) => { diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index 12f19a3f5..845e371eb 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -1,20 +1,16 @@ import React, { createRef, memo, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import Languages from "../NavItems/languages/languages"; import Tutorial from "../NavItems/tutorial/tutorial"; import clsx from "clsx"; import { - Alert, - AppBar, Box, Button, Collapse, Divider, Drawer, Fab, - Grid, List, ListItemButton, ListItemIcon, @@ -23,23 +19,16 @@ import { Snackbar, Stack, SvgIcon, - Tab, - Tabs, - Toolbar, Typography, } from "@mui/material"; import { - Archive, - AudioFile, Audiotrack, ChevronLeft, ChevronRight, ExpandLess, ExpandMore, - Gradient, KeyboardArrowUp, - ManageSearch, MoreHoriz, } from "@mui/icons-material"; @@ -57,28 +46,6 @@ import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles"; import { Footer, FOOTER_TYPES } from "../Shared/Footer/Footer"; import Feedback from "../Feedback/Feedback"; -import AnalysisIcon from "./images/SVG/Video/Video_analysis.svg"; -import KeyframesIcon from "./images/SVG/Video/Keyframes.svg"; -import ThumbnailsIcon from "./images/SVG/Video/Thumbnails.svg"; -import VideoRightsIcon from "./images/SVG/Video/Video_rights.svg"; - -import MetadataIcon from "./images/SVG/Image/Metadata.svg"; -import MagnifierIcon from "./images/SVG/Image/Magnifier.svg"; -import ForensicIcon from "./images/SVG/Image/Forensic.svg"; -import GifIcon from "./images/SVG/Image/Gif.svg"; -import OcrIcon from "./images/SVG/Image/OCR.svg"; - -import AnalysisIconImage from "./images/SVG/Image/Image_analysis.svg"; - -import TwitterSearchIcon from "./images/SVG/Search/Twitter_search.svg"; -import CovidSearchIcon from "./images/SVG/Search/Covid19.svg"; -import XnetworkIcon from "./images/SVG/Search/Xnetwork.svg"; - -import TwitterSnaIcon from "./images/SVG/DataAnalysis/Twitter_sna.svg"; -import CsvSnaIcon from "./images/SVG/DataAnalysis/CSV_SNA.svg"; -import DeepfakeIcon from "./images/SVG/Image/Deepfake.svg"; -import GeolocationIcon from "./images/SVG/Image/Geolocation.svg"; - import ToolsIcon from "./images/SVG/Navbar/Tools.svg"; import ClassroomIcon from "./images/SVG/Navbar/Classroom.svg"; import InteractiveIcon from "./images/SVG/Navbar/Interactive.svg"; @@ -87,11 +54,6 @@ import AboutIcon from "./images/SVG/Navbar/About.svg"; import AssistantIcon from "./images/SVG/Navbar/Assistant.svg"; import GuideIcon from "./images/SVG/Navbar/Guide.svg"; -import LogoVera from "./images/SVG/Navbar/vera-logo_black.svg"; -import LogoInVidWeverify from "./images/SVG/Navbar/invid_weverify.svg"; - -import LogoEuCom from "./images/SVG/Navbar/ep-logo.svg"; - import VideoIcon from "./images/SVG/Video/Video.svg"; import ImageIcon from "./images/SVG/Image/Images.svg"; import SearchIcon from "./images/SVG/Search/Search.svg"; @@ -105,25 +67,14 @@ import { setFalse, setTrue } from "../../redux/reducers/cookiesReducers"; import { changeLanguage } from "../../redux/reducers/languageReducer"; import { Link, useNavigate } from "react-router-dom"; -import AdvancedTools from "../NavItems/tools/Alltools/AdvancedTools/AdvancedTools"; +import { ROLES, TOOL_STATUS_ICON, tools, TOOLS_CATEGORIES } from "./Tools"; -function a11yProps(index) { - return { - id: `scrollable-force-tab-${index}`, - "aria-controls": `scrollable-force-tabpanel-${index}`, - }; -} -export const TOOLS_CATEGORIES = { - VIDEO: "navbar_category_video", - IMAGE: "navbar_category_image", - AUDIO: "navbar_category_audio", - SEARCH: "navbar_category_search", - DATA_ANALYSIS: "navbar_category_data", - OTHER: "navbar_category_other", - - // Used to display the home page - ALL: "navbar_category_general", -}; +// function a11yProps(index) { +// return { +// id: `scrollable-force-tab-${index}`, +// "aria-controls": `scrollable-force-tabpanel-${index}`, +// }; +// } const NavBar = () => { const classes = useMyStyles(); @@ -132,10 +83,10 @@ const NavBar = () => { const [classWidthToolbar, setClassWidthToolbar] = useState( classes.drawerWidth, ); - const LOGO_EU = process.env.REACT_APP_LOGO_EU; + // const LOGO_EU = process.env.REACT_APP_LOGO_EU; const topMenuItemSelectedId = useSelector((state) => state.nav); - const sideMenuItemSelectedId = useSelector((state) => state.tool.selected); + const selectedToolTitleKeyword = useSelector((state) => state.tool.selected); const cookiesUsage = useSelector((state) => state.cookies); const currentLang = useSelector((state) => state.language); const defaultLanguage = useSelector((state) => state.defaultLanguage); @@ -144,26 +95,27 @@ const NavBar = () => { const drawerRef = createRef(); - // Set UI dicrection based on language reading direction + // Set UI direction based on language reading direction const direction = currentLang !== "ar" ? "ltr" : "rtl"; - const handleTopMenuChange = (event, newValue) => { - let path = sideMenuItems[newValue].path; - - if (topMenuItems[newValue].path === "tools") navigate("/app/tools/" + path); - //history.push("/app/tools/" + path); - else navigate("/app/" + topMenuItems[newValue].path); - //history.push("/app/" + topMenuItems[newValue].path) - }; - - const [openAlert, setOpenAlert] = useState(false); - - const handleCloseAlert = (event, reason) => { - if (reason === "clickaway") { - return; - } - setOpenAlert(false); - }; + // const handleTopMenuChange = (event, newValue) => { + // console.log(newValue); + // let path = tools[newValue].path; + // + // if (topMenuItems[newValue].path === "tools") navigate("/app/tools/" + path); + // //history.push("/app/tools/" + path); + // else navigate("/app/" + topMenuItems[newValue].path); + // //history.push("/app/" + topMenuItems[newValue].path) + // }; + + // const [openAlert, setOpenAlert] = useState(false); + // + // const handleCloseAlert = (event, reason) => { + // if (reason === "clickaway") { + // return; + // } + // setOpenAlert(false); + // }; const userAuthenticated = useSelector( (state) => state.userSession && state.userSession.userAuthenticated, @@ -172,8 +124,8 @@ const NavBar = () => { const changeValue = (newValue, newValueType) => { if (newValueType === "TOOL") { if ( - newValue.toolRestrictions !== undefined && - newValue.toolRestrictions.includes(TOOL_STATUS_ICON.LOCK) + newValue.rolesNeeded !== undefined && + newValue.rolesNeeded.includes(ROLES.LOCK) ) { if (userAuthenticated) { navigate("/app/tools/" + newValue.path); @@ -222,794 +174,766 @@ const NavBar = () => { const role = useSelector((state) => state.userSession.user.roles); const betaTester = role.includes("BETA_TESTER"); - /** - * Represents the categories to which the tools belong - * - */ - - /** - * Represents the possible temporary states of the tools: - * - An experimental tool is not ready for production, and available to beta testers - * - A new tool is an experimental tool that was released to everyone - * - A locked tool is a tool available to registered users - * @type {{NEW: string, LOCK: string, EXPERIMENTAL: string}} - */ - const TOOL_STATUS_ICON = { - EXPERIMENTAL: "experimental", - NEW: "new", - LOCK: "lock", - }; - - /** - * Represents the user roles that can be needed to access a given tool - * @type {{BETA_TESTER: string, ARCHIVE: string, LOCK: string}} - */ - const TOOL_RESTRICTIONS = { - ARCHIVE: "ARCHIVE", - BETA_TESTER: "BETA_TESTER", - LOCK: "lock", - }; - - const sideMenuItems = [ - { - id: 1, - title: "navbar_tools", - icon: ( - - ), - path: "all", - type: TOOLS_CATEGORIES.ALL, - - icons: [], - toolRestrictions: [], - }, - - { - id: 2, - title: "navbar_analysis_video", - description: "navbar_analysis_description", - icon: ( - - ), - iconColored: ( - - ), - path: "analysis", - type: TOOLS_CATEGORIES.VIDEO, - icons: [], - toolRestrictions: [], - }, - { - id: 3, - title: "navbar_keyframes", - description: "navbar_keyframes_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "keyframes", - type: TOOLS_CATEGORIES.VIDEO, - - icons: [], - toolRestrictions: [], - }, - { - id: 4, - title: "navbar_thumbnails", - description: "navbar_thumbnails_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "thumbnails", - type: TOOLS_CATEGORIES.VIDEO, - - icons: [], - toolRestrictions: [], - }, - { - id: 5, - title: "navbar_rights", - description: "navbar_rights_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "copyright", - type: TOOLS_CATEGORIES.VIDEO, - - icons: [], - toolRestrictions: [], - }, - - { - id: 6, - title: "navbar_metadata", - description: "navbar_metadata_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "metadata", - type: TOOLS_CATEGORIES.VIDEO, - - icons: [], - toolRestrictions: [], - }, - - { - id: 7, - title: "navbar_deepfake_video", - description: "navbar_deepfake_video_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "deepfakeVideo", - type: TOOLS_CATEGORIES.VIDEO, - - icons: [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK], - toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER], - }, - - { - id: 8, - title: "navbar_analysis_image", - description: "navbar_analysis_image_description", - icon: ( - - ), - - iconColored: ( - - ), - - path: "analysisImage", - type: TOOLS_CATEGORIES.IMAGE, - - icons: [], - toolRestrictions: [], - }, - { - id: 9, - title: "navbar_magnifier", - description: "navbar_magnifier_description", - icon: ( - - ), - - iconColored: ( - - ), - - path: "magnifier", - type: TOOLS_CATEGORIES.IMAGE, - - icons: [], - toolRestrictions: [], - }, - { - id: 10, - title: "navbar_metadata", - description: "navbar_metadata_description", - icon: ( - - ), - - iconColored: ( - - ), - - path: "metadata_image", - type: TOOLS_CATEGORIES.IMAGE, - - icons: [], - toolRestrictions: [], - }, - - { - id: 11, - title: "navbar_forensic", - description: "navbar_forensic_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "forensic", - type: TOOLS_CATEGORIES.IMAGE, - - icons: [], - toolRestrictions: [], - }, - { - id: 12, - title: "navbar_ocr", - description: "navbar_ocr_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "ocr", - type: TOOLS_CATEGORIES.IMAGE, - - icons: [], - toolRestrictions: [], - }, - - { - id: 13, - title: "navbar_gif", - description: "navbar_gif_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "gif", - type: TOOLS_CATEGORIES.IMAGE, - - icons: [TOOL_STATUS_ICON.LOCK], - toolRestrictions: [TOOL_RESTRICTIONS.LOCK], - }, - { - id: 14, - title: "navbar_synthetic_image_detection", - description: "navbar_synthetic_image_detection_description", - icon: ( - - ), - iconColored: , - - path: "syntheticImageDetection", - type: TOOLS_CATEGORIES.IMAGE, - - icons: [ - TOOL_STATUS_ICON.NEW, - TOOL_STATUS_ICON.EXPERIMENTAL, - TOOL_STATUS_ICON.LOCK, - ], - toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER], - }, - { - id: 15, - title: "navbar_deepfake_image", - description: "navbar_deepfake_image_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "deepfakeImage", - type: TOOLS_CATEGORIES.IMAGE, - - icons: [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK], - toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER], - }, - { - id: 16, - title: "navbar_geolocation", - description: "navbar_geolocation_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "geolocation", - type: TOOLS_CATEGORIES.IMAGE, - - icons: [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK], - toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER], - }, - { - id: 17, - title: "navbar_loccus", - description: "navbar_loccus_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "loccus", - type: TOOLS_CATEGORIES.AUDIO, - - icons: [ - TOOL_STATUS_ICON.NEW, - TOOL_STATUS_ICON.EXPERIMENTAL, - TOOL_STATUS_ICON.LOCK, - ], - toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER], - }, - - { - id: 18, - title: "navbar_twitter", - description: "navbar_twitter_description", - icon: ( - - ), - - iconColored: ( - - ), - - path: "twitter", - type: TOOLS_CATEGORIES.SEARCH, - - icons: [], - toolRestrictions: [], - }, - { - id: 19, - title: "navbar_semantic_search", - description: "navbar_semantic_search_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "semanticSearch", - type: TOOLS_CATEGORIES.SEARCH, - - icons: [ - TOOL_STATUS_ICON.EXPERIMENTAL, - TOOL_STATUS_ICON.NEW, - TOOL_STATUS_ICON.LOCK, - ], - toolRestrictions: [TOOL_RESTRICTIONS.LOCK], - }, - { - id: 20, - title: "navbar_twitter_sna", - description: "navbar_twitter_sna_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "twitterSna", - type: TOOLS_CATEGORIES.DATA_ANALYSIS, - - icons: [TOOL_STATUS_ICON.LOCK], - toolRestrictions: [TOOL_RESTRICTIONS.LOCK], - }, - { - id: 21, - title: "navbar_archiving", - description: "navbar_archiving_description", - icon: ( - - ), - - iconColored: , - - path: "archive", - type: TOOLS_CATEGORIES.OTHER, - - icons: [ - TOOL_STATUS_ICON.EXPERIMENTAL, - TOOL_STATUS_ICON.NEW, - TOOL_STATUS_ICON.LOCK, - ], - toolRestrictions: [TOOL_RESTRICTIONS.ARCHIVE], - }, - { - id: 22, - title: "navbar_twitter_crowdtangle", - description: "navbar_twitter_crowdtangle_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "csvSna", - type: TOOLS_CATEGORIES.DATA_ANALYSIS, - - icons: [], - toolRestrictions: [], - }, - { - id: 23, - title: "navbar_covidsearch", - description: "navbar_covidsearch_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "factcheck", - type: TOOLS_CATEGORIES.SEARCH, - - icons: [], - toolRestrictions: [], - }, - { - id: 24, - title: "navbar_xnetwork", - description: "navbar_xnetwork_description", - icon: ( - - ), - iconColored: ( - - ), - - path: "xnetwork", - type: TOOLS_CATEGORIES.SEARCH, - - icons: [], - toolRestrictions: [], - }, - ]; + // const sideMenuItems = [ + // { + // id: 1, + // title: "navbar_tools", + // icon: ( + // + // ), + // path: "all", + // type: TOOLS_CATEGORIES.ALL, + // + // icons: [], + // rolesNeeded: [], + // }, + // + // { + // id: 2, + // title: "navbar_analysis_video", + // description: "navbar_analysis_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // path: "analysis", + // type: TOOLS_CATEGORIES.VIDEO, + // icons: [], + // rolesNeeded: [], + // }, + // { + // id: 3, + // title: "navbar_keyframes", + // description: "navbar_keyframes_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "keyframes", + // type: TOOLS_CATEGORIES.VIDEO, + // + // icons: [], + // rolesNeeded: [], + // }, + // { + // id: 4, + // title: "navbar_thumbnails", + // description: "navbar_thumbnails_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "thumbnails", + // type: TOOLS_CATEGORIES.VIDEO, + // + // icons: [], + // rolesNeeded: [], + // }, + // { + // id: 5, + // title: "navbar_rights", + // description: "navbar_rights_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "copyright", + // type: TOOLS_CATEGORIES.VIDEO, + // + // icons: [], + // rolesNeeded: [], + // }, + // + // { + // id: 6, + // title: "navbar_metadata", + // description: "navbar_metadata_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "metadata", + // type: TOOLS_CATEGORIES.VIDEO, + // + // icons: [], + // rolesNeeded: [], + // }, + // + // { + // id: 7, + // title: "navbar_deepfake_video", + // description: "navbar_deepfake_video_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "deepfakeVideo", + // type: TOOLS_CATEGORIES.VIDEO, + // + // icons: [TOOL_STATUS_ICON.EXPERIMENTAL], + // rolesNeeded: [ROLES.BETA_TESTER], + // }, + // + // { + // id: 8, + // title: "navbar_analysis_image", + // description: "navbar_analysis_image_description", + // icon: ( + // + // ), + // + // iconColored: ( + // + // ), + // + // path: "analysisImage", + // type: TOOLS_CATEGORIES.IMAGE, + // + // icons: [], + // rolesNeeded: [], + // }, + // { + // id: 9, + // title: "navbar_magnifier", + // description: "navbar_magnifier_description", + // icon: ( + // + // ), + // + // iconColored: ( + // + // ), + // + // path: "magnifier", + // type: TOOLS_CATEGORIES.IMAGE, + // + // icons: [], + // rolesNeeded: [], + // }, + // { + // id: 10, + // title: "navbar_metadata", + // description: "navbar_metadata_description", + // icon: ( + // + // ), + // + // iconColored: ( + // + // ), + // + // path: "metadata_image", + // type: TOOLS_CATEGORIES.IMAGE, + // + // icons: [], + // rolesNeeded: [], + // }, + // + // { + // id: 11, + // title: "navbar_forensic", + // description: "navbar_forensic_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "forensic", + // type: TOOLS_CATEGORIES.IMAGE, + // + // icons: [], + // rolesNeeded: [], + // }, + // { + // id: 12, + // title: "navbar_ocr", + // description: "navbar_ocr_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "ocr", + // type: TOOLS_CATEGORIES.IMAGE, + // + // icons: [], + // rolesNeeded: [], + // }, + // + // { + // id: 13, + // title: "navbar_gif", + // description: "navbar_gif_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "gif", + // type: TOOLS_CATEGORIES.IMAGE, + // + // icons: [TOOL_STATUS_ICON.LOCK], + // rolesNeeded: [ROLES.LOCK], + // }, + // { + // id: 14, + // title: "navbar_synthetic_image_detection", + // description: "navbar_synthetic_image_detection_description", + // icon: ( + // + // ), + // iconColored: , + // + // path: "syntheticImageDetection", + // type: TOOLS_CATEGORIES.IMAGE, + // + // icons: [ + // TOOL_STATUS_ICON.NEW, + // TOOL_STATUS_ICON.EXPERIMENTAL, + // TOOL_STATUS_ICON.LOCK, + // ], + // rolesNeeded: [ROLES.BETA_TESTER], + // }, + // { + // id: 15, + // title: "navbar_deepfake_image", + // description: "navbar_deepfake_image_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "deepfakeImage", + // type: TOOLS_CATEGORIES.IMAGE, + // + // icons: [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK], + // rolesNeeded: [ROLES.BETA_TESTER], + // }, + // { + // id: 16, + // title: "navbar_geolocation", + // description: "navbar_geolocation_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "geolocation", + // type: TOOLS_CATEGORIES.IMAGE, + // + // icons: [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK], + // rolesNeeded: [ROLES.BETA_TESTER], + // }, + // { + // id: 17, + // title: "navbar_loccus", + // description: "navbar_loccus_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "loccus", + // type: TOOLS_CATEGORIES.AUDIO, + // + // icons: [ + // TOOL_STATUS_ICON.NEW, + // TOOL_STATUS_ICON.EXPERIMENTAL, + // TOOL_STATUS_ICON.LOCK, + // ], + // rolesNeeded: [ROLES.BETA_TESTER], + // }, + // + // { + // id: 18, + // title: "navbar_twitter", + // description: "navbar_twitter_description", + // icon: ( + // + // ), + // + // iconColored: ( + // + // ), + // + // path: "twitter", + // type: TOOLS_CATEGORIES.SEARCH, + // + // icons: [], + // rolesNeeded: [], + // }, + // { + // id: 19, + // title: "navbar_semantic_search", + // description: "navbar_semantic_search_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "semanticSearch", + // type: TOOLS_CATEGORIES.SEARCH, + // + // icons: [ + // TOOL_STATUS_ICON.EXPERIMENTAL, + // TOOL_STATUS_ICON.NEW, + // TOOL_STATUS_ICON.LOCK, + // ], + // rolesNeeded: [ROLES.LOCK], + // }, + // { + // id: 20, + // title: "navbar_twitter_sna", + // description: "navbar_twitter_sna_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "twitterSna", + // type: TOOLS_CATEGORIES.DATA_ANALYSIS, + // + // icons: [TOOL_STATUS_ICON.LOCK], + // rolesNeeded: [ROLES.LOCK], + // }, + // { + // id: 21, + // title: "navbar_archiving", + // description: "navbar_archiving_description", + // icon: ( + // + // ), + // + // iconColored: , + // + // path: "archive", + // type: TOOLS_CATEGORIES.OTHER, + // + // icons: [ + // TOOL_STATUS_ICON.EXPERIMENTAL, + // TOOL_STATUS_ICON.NEW, + // TOOL_STATUS_ICON.LOCK, + // ], + // rolesNeeded: [ROLES.ARCHIVE], + // }, + // { + // id: 22, + // title: "navbar_twitter_crowdtangle", + // description: "navbar_twitter_crowdtangle_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "csvSna", + // type: TOOLS_CATEGORIES.DATA_ANALYSIS, + // + // icons: [], + // rolesNeeded: [], + // }, + // { + // id: 23, + // title: "navbar_covidsearch", + // description: "navbar_covidsearch_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "factcheck", + // type: TOOLS_CATEGORIES.SEARCH, + // + // icons: [], + // rolesNeeded: [], + // }, + // { + // id: 24, + // title: "navbar_xnetwork", + // description: "navbar_xnetwork_description", + // icon: ( + // + // ), + // iconColored: ( + // + // ), + // + // path: "xnetwork", + // type: TOOLS_CATEGORIES.SEARCH, + // + // icons: [], + // rolesNeeded: [], + // }, + // ]; const topMenuItems = [ { @@ -1144,7 +1068,7 @@ const NavBar = () => { useEffect(() => { //select tool category - switch (sideMenuItems[sideMenuItemSelectedId].type) { + switch (tools[selectedToolTitleKeyword].category) { case TOOLS_CATEGORIES.VIDEO: setOpenListVideo(true); break; @@ -1166,7 +1090,7 @@ const NavBar = () => { default: break; } - }, [sideMenuItemSelectedId]); + }, [selectedToolTitleKeyword]); const themeFab = createTheme({ palette: { @@ -1233,8 +1157,8 @@ const NavBar = () => { }); //Video items - const drawerItemsVideo = sideMenuItems.filter( - (item) => item.type === TOOLS_CATEGORIES.VIDEO, + const drawerItemsVideo = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.VIDEO, ); const [openListVideo, setOpenListVideo] = useState(false); const [classBorderVideo, setClassBorderVideo] = useState(null); @@ -1249,8 +1173,8 @@ const NavBar = () => { }; //Image items - const drawerItemsImage = sideMenuItems.filter( - (item) => item.type === TOOLS_CATEGORIES.IMAGE, + const drawerItemsImage = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.IMAGE, ); const [openListImage, setOpenListImage] = useState(false); const [classBorderImage, setClassBorderImage] = useState(null); @@ -1265,8 +1189,8 @@ const NavBar = () => { }; //Audio items - const drawerItemsAudio = sideMenuItems.filter( - (item) => item.type === TOOLS_CATEGORIES.AUDIO, + const drawerItemsAudio = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.AUDIO, ); const [openListAudio, setOpenListAudio] = useState(false); const [classBorderAudio, setClassBorderAudio] = useState(null); @@ -1281,8 +1205,8 @@ const NavBar = () => { }; //Search items - const drawerItemsSearch = sideMenuItems.filter( - (item) => item.type === TOOLS_CATEGORIES.SEARCH, + const drawerItemsSearch = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.SEARCH, ); const [openListSeach, setOpenListSeach] = useState(false); const [classBorderSearch, setClassBorderSearch] = useState(null); @@ -1297,9 +1221,10 @@ const NavBar = () => { }; //Data items - const drawerItemsData = sideMenuItems.filter( - (item) => item.type === TOOLS_CATEGORIES.DATA_ANALYSIS, + const drawerItemsData = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.DATA_ANALYSIS, ); + const [openListData, setOpenListData] = useState(false); const [classBorderData, setClassBorderData] = useState(null); @@ -1312,8 +1237,8 @@ const NavBar = () => { } }; - const drawerItemsOtherTools = sideMenuItems.filter( - (item) => item.type === TOOLS_CATEGORIES.OTHER, + const drawerItemsOtherTools = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.OTHER, ); const [openListOtherTools, setOpenListOtherTools] = useState(false); const [classBorderOtherTools, setClassBorderOtherTools] = useState(null); @@ -1423,37 +1348,43 @@ const NavBar = () => { tmpListItems.map((items) => { const listTools = items.list; + console.log(listTools); + console.log(role); + for (let i = 0; i < listTools.length; i++) { - if (listTools[i].toolRestrictions.length === 0) { + if (!listTools[i].rolesNeeded || listTools[i].rolesNeeded.length === 0) { listItems.push(items); break; } else if ( - listTools[i].toolRestrictions.some((restriction) => - role.includes(restriction), - ) + listTools[i].rolesNeeded.some((roles) => role.includes(roles)) ) { + console.log(items); listItems.push(items); break; - } else if ( - listTools[i].toolRestrictions.includes(TOOL_STATUS_ICON.LOCK) - ) { + } else if (listTools[i].rolesNeeded.includes(TOOL_STATUS_ICON.LOCK)) { listItems.push(items); break; } } }); - const drawItemPerRole = sideMenuItems.filter((item) => { + console.log(listItems); + + const drawItemPerRole = tools.filter((tool) => { if ( - item.toolRestrictions.length === 0 || - item.toolRestrictions.includes(TOOL_STATUS_ICON.LOCK) + !tools.rolesNeeded || + tool.rolesNeeded.length === 0 || + tool.rolesNeeded.includes(TOOL_STATUS_ICON.LOCK) ) return true; - if (item.toolRestrictions.some((restriction) => role.includes(restriction))) + else if ( + tools.rolesNeeded.some((restriction) => role.includes(restriction)) + ) return true; + else return false; }); - const toolsItem = sideMenuItems.find((data) => data.title === "navbar_tools"); + const toolsItem = tools.find((tool) => tool.titleKeyword === "navbar_tools"); //const assistantItem = topMenuItems.find(data => data.title === 'navbar_assistant'); //const drawerItemsLearning = topMenuItems.filter(item => item.typeTab === "learning"); const drawerItemsMore = topMenuItems.filter( @@ -1464,114 +1395,114 @@ const NavBar = () => { return (
- - - {tWarning("warning_advanced_tools")} - - + {/**/} + {/* */} + {/* {tWarning("warning_advanced_tools")}*/} + {/* */} + {/**/} - - - - - - {LOGO_EU ? ( - - ) : ( - - )} - - - - - - {topMenuItems.map((item, index) => { - return ( - - ); - })} - - - - - - - - - - - + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* {LOGO_EU ? (*/} + {/* */} + {/* ) : (*/} + {/* */} + {/* )}*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* {topMenuItems.map((item, index) => {*/} + {/* return (*/} + {/* */} + {/* );*/} + {/* })}*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} { changeValue(toolsItem, "TOOL")} component={Link} @@ -1637,7 +1568,7 @@ const NavBar = () => { { changeValue(itemList, "TOOL")} @@ -1726,7 +1657,7 @@ const NavBar = () => { { ); - if (itemList.toolRestrictions.includes("BETA_TESTER")) { + if ( + itemList.rolesNeeded && + itemList.rolesNeeded.includes("BETA_TESTER") + ) { if (betaTester) { return element; } else { diff --git a/src/components/NavItems/tools/Alltools/MainContentMenu.jsx b/src/components/NavItems/tools/Alltools/MainContentMenu.jsx index 3619b11fc..cef227602 100644 --- a/src/components/NavItems/tools/Alltools/MainContentMenu.jsx +++ b/src/components/NavItems/tools/Alltools/MainContentMenu.jsx @@ -30,7 +30,8 @@ import { useNavigate } from "react-router-dom"; import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace"; import { Audiotrack } from "@mui/icons-material"; import Typography from "@mui/material/Typography"; -import { TOOLS_CATEGORIES } from "components/NavBar/NavBar"; +import { TOOLS_CATEGORIES } from "../../../../constants/tools"; + function TabPanel(props) { const { children, value, index, ...other } = props; @@ -51,14 +52,19 @@ function TabPanel(props) { ); } -const MainContentMenu = (props) => { +/** + * + * @param tools {Tool[]} + * @returns {Element} + * @constructor + */ +const MainContentMenu = ({ tools }) => { const navigate = useNavigate(); const classes = useMyStyles(); const keyword = i18nLoadNamespace("components/NavItems/tools/Alltools"); const keywordNavbar = i18nLoadNamespace("components/NavBar"); const keywordWarning = i18nLoadNamespace("components/Shared/OnWarningInfo"); - const tools = props.tools; const [videoUrl, setVideoUrl] = useState(null); const userAuthenticated = useSelector( @@ -88,9 +94,9 @@ const MainContentMenu = (props) => { } else { navigate("/app/tools/" + path); /* history.push({ - pathname: "/app/tools/" + path, - state: { media: mediaTool } - })*/ + pathname: "/app/tools/" + path, + state: { media: mediaTool } + })*/ } }; @@ -174,29 +180,29 @@ const MainContentMenu = (props) => { }, ]; - tools.forEach((value) => { - if (value.type === TOOLS_CATEGORIES.VIDEO) { - toolsVideo.push(value); + tools.forEach((tool) => { + if (tool.category === TOOLS_CATEGORIES.VIDEO) { + toolsVideo.push(tool); } - if (value.type === TOOLS_CATEGORIES.IMAGE) { - toolsImages.push(value); + if (tool.category === TOOLS_CATEGORIES.IMAGE) { + toolsImages.push(tool); } - if (value.type === TOOLS_CATEGORIES.AUDIO) { - toolsAudio.push(value); + if (tool.category === TOOLS_CATEGORIES.AUDIO) { + toolsAudio.push(tool); } - if (value.type === TOOLS_CATEGORIES.SEARCH) { - toolsSearch.push(value); + if (tool.category === TOOLS_CATEGORIES.SEARCH) { + toolsSearch.push(tool); } - if (value.type === TOOLS_CATEGORIES.DATA_ANALYSIS) { - toolsData.push(value); + if (tool.category === TOOLS_CATEGORIES.DATA_ANALYSIS) { + toolsData.push(tool); } - if (value.type === TOOLS_CATEGORIES.OTHER) { - otherTools.push(value); + if (tool.category === TOOLS_CATEGORIES.OTHER) { + otherTools.push(tool); } }); @@ -286,7 +292,7 @@ const MainContentMenu = (props) => { item key={key} onClick={() => - handleClick(value.path, value.toolRestrictions) + handleClick(value.path, value.rolesNeeded) } > { /> ); - if (value.toolRestrictions.includes("BETA_TESTER")) { + if (value.rolesNeeded.includes("BETA_TESTER")) { if (betaTester) { return element; } else { diff --git a/src/components/NotificationSnackbar/index.jsx b/src/components/NotificationSnackbar/index.jsx new file mode 100644 index 000000000..5a96cdaf6 --- /dev/null +++ b/src/components/NotificationSnackbar/index.jsx @@ -0,0 +1,33 @@ +import { React } from "react"; +import { Alert, Snackbar } from "@mui/material"; +import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace"; + +const NotificationSnackbar = ({ openAlert, setOpenAlert }) => { + const tWarning = i18nLoadNamespace("components/Shared/OnWarningInfo"); + + const handleCloseAlert = (event, reason) => { + if (reason === "clickaway") { + return; + } + setOpenAlert(false); + }; + + return ( + + + {tWarning("warning_advanced_tools")} + + + ); +}; + +export default NotificationSnackbar; diff --git a/src/components/SideMenu/index.jsx b/src/components/SideMenu/index.jsx new file mode 100644 index 000000000..985d924d9 --- /dev/null +++ b/src/components/SideMenu/index.jsx @@ -0,0 +1,688 @@ +import React, { useRef, useState } from "react"; +import { + Box, + Button, + Collapse, + Divider, + Drawer, + List, + ListItemButton, + ListItemIcon, + ListItemText, + ListSubheader, + Stack, + Typography, +} from "@mui/material"; +import clsx from "clsx"; +import { Link, useNavigate } from "react-router-dom"; +import { + Audiotrack, + ChevronLeft, + ChevronRight, + ExpandLess, + ExpandMore, + MoreHoriz, +} from "@mui/icons-material"; +import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles"; +import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace"; +import { useDispatch, useSelector } from "react-redux"; +import VideoIcon from "../NavBar/images/SVG/Video/Video.svg"; +import ImageIcon from "../NavBar/images/SVG/Image/Images.svg"; +import SearchIcon from "../NavBar/images/SVG/Search/Search.svg"; +import DataIcon from "../NavBar/images/SVG/DataAnalysis/Data_analysis.svg"; +import { + ROLES, + TOOL_GROUPS, + TOOL_STATUS_ICON, + TOOLS_CATEGORIES, +} from "../../constants/tools"; +import { selectTool } from "../../redux/reducers/tools/toolReducer"; + +const SideMenu = ({ tools, setOpenAlert }) => { + const classes = useMyStyles(); + const keyword = i18nLoadNamespace("components/NavBar"); + + const topMenuItemSelected = useSelector((state) => state.nav); + const selectedToolTitleKeyword = useSelector((state) => state.tool.toolName); + + const dispatch = useDispatch(); + + const currentLang = useSelector((state) => state.language); + const userAuthenticated = useSelector( + (state) => state.userSession && state.userSession.userAuthenticated, + ); + const role = useSelector((state) => state.userSession.user.roles); + const betaTester = role.includes("BETA_TESTER"); + + // Set UI direction based on language reading direction + const direction = currentLang !== "ar" ? "ltr" : "rtl"; + + const [isSideMenuOpen, setIsSideMenuOpen] = useState(true); + + const drawerRef = useRef(null); + + const navigate = useNavigate(); + + const [classWidthToolbar, setClassWidthToolbar] = useState( + classes.drawerWidth, + ); + + const toggleSideMenu = () => { + setIsSideMenuOpen(!isSideMenuOpen); + + if (classWidthToolbar === classes.drawerWidth) { + setClassWidthToolbar(classes.drawerWidthClose); + setTimeout(function () {}, 194); + } else { + setClassWidthToolbar(classes.drawerWidth); + } + }; + + /** + * Fires when the user clicks on a tool + * @param tool {Tool} + */ + const handleSideMenuToolClick = (tool) => { + if (tool.category === TOOLS_CATEGORIES.OTHER) { + navigate("/app/" + tool.path); + dispatch(selectTool(tool.titleKeyword)); + return; + } + + if ( + !userAuthenticated && + tool.rolesNeeded && + tool.rolesNeeded.includes(ROLES.LOCK) + ) { + setOpenAlert(true); + return; + } + + if ( + tool.path === "csvSna" || + tool.path === "factcheck" || + tool.path === "xnetwork" + ) { + window.open( + process.env.REACT_APP_TSNA_SERVER + tool.path + "?lang=" + currentLang, + "_blank", + ); + return; + } + + navigate("/app/tools/" + tool.path); + dispatch(selectTool(tool.titleKeyword)); + }; + + const toolsItem = tools.find((tool) => tool.titleKeyword === "navbar_tools"); + const drawerItemsMore = tools.filter( + (tool) => tool.toolGroup === TOOL_GROUPS.MORE, + ); + + //Video items + const drawerItemsVideo = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.VIDEO, + ); + const [openListVideo, setOpenListVideo] = useState(false); + const [classBorderVideo, setClassBorderVideo] = useState(null); + + const handleClickListVideo = () => { + setOpenListVideo(!openListVideo); + if (!classBorderVideo) { + setClassBorderVideo(classes.drawerCategoryBorder); + } else { + setClassBorderVideo(null); + } + }; + + //Image items + const drawerItemsImage = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.IMAGE, + ); + const [openListImage, setOpenListImage] = useState(false); + const [classBorderImage, setClassBorderImage] = useState(null); + + const handleClickListImage = () => { + setOpenListImage(!openListImage); + if (!openListImage) { + setClassBorderImage(classes.drawerCategoryBorder); + } else { + setClassBorderImage(null); + } + }; + + //Audio items + const drawerItemsAudio = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.AUDIO, + ); + const [openListAudio, setOpenListAudio] = useState(false); + const [classBorderAudio, setClassBorderAudio] = useState(null); + + const handleClickListAudio = () => { + setOpenListAudio(!openListAudio); + if (!openListAudio) { + setClassBorderAudio(classes.drawerCategoryBorder); + } else { + setClassBorderAudio(null); + } + }; + + //Search items + const drawerItemsSearch = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.SEARCH, + ); + const [openListSearch, setOpenListSearch] = useState(false); + const [classBorderSearch, setClassBorderSearch] = useState(null); + + const handleClickListSearch = () => { + setOpenListSearch(!openListSearch); + if (!openListSearch) { + setClassBorderSearch(classes.drawerCategoryBorder); + } else { + setClassBorderSearch(null); + } + }; + + //Data items + const drawerItemsData = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.DATA_ANALYSIS, + ); + + const [openListData, setOpenListData] = useState(false); + const [classBorderData, setClassBorderData] = useState(null); + + const handleClickListData = () => { + setOpenListData(!openListData); + if (!openListData) { + setClassBorderData(classes.drawerCategoryBorder); + } else { + setClassBorderData(null); + } + }; + + const drawerItemsOtherTools = tools.filter( + (tool) => tool.category === TOOLS_CATEGORIES.OTHER, + ); + const [openListOtherTools, setOpenListOtherTools] = useState(false); + const [classBorderOtherTools, setClassBorderOtherTools] = useState(null); + + const handleClickListOtherTools = () => { + setOpenListOtherTools(!openListOtherTools); + if (!openListOtherTools) { + setClassBorderOtherTools(classes.drawerCategoryBorder); + } else { + setClassBorderOtherTools(null); + } + }; + + let listItems = []; + + const tmpListItems = [ + { + titleKeyword: TOOLS_CATEGORIES.VIDEO, + icon: ( + + ), + list: drawerItemsVideo, + variableOpen: openListVideo, + setVariableOpen: setOpenListVideo, + functionHandleClick: handleClickListVideo, + classBorder: classBorderVideo, + }, + { + titleKeyword: TOOLS_CATEGORIES.IMAGE, + icon: ( + + ), + list: drawerItemsImage, + variableOpen: openListImage, + setVariableOpen: setOpenListImage, + functionHandleClick: handleClickListImage, + classBorder: classBorderImage, + }, + { + titleKeyword: TOOLS_CATEGORIES.AUDIO, + icon: ( + + ), + list: drawerItemsAudio, + variableOpen: openListAudio, + setVariableOpen: setOpenListAudio, + functionHandleClick: handleClickListAudio, + classBorder: classBorderAudio, + }, + { + titleKeyword: TOOLS_CATEGORIES.SEARCH, + icon: ( + + ), + list: drawerItemsSearch, + variableOpen: openListSearch, + setVariableOpen: setOpenListSearch, + functionHandleClick: handleClickListSearch, + classBorder: classBorderSearch, + }, + { + titleKeyword: TOOLS_CATEGORIES.DATA_ANALYSIS, + icon: ( + + ), + list: drawerItemsData, + variableOpen: openListData, + setVariableOpen: setOpenListData, + functionHandleClick: handleClickListData, + classBorder: classBorderData, + }, + { + titleKeyword: TOOLS_CATEGORIES.OTHER, + icon: , + list: drawerItemsOtherTools, + variableOpen: openListOtherTools, + setVariableOpen: setOpenListOtherTools, + functionHandleClick: handleClickListOtherTools, + classBorder: classBorderOtherTools, + }, + ]; + + tmpListItems.map((items) => { + const listTools = items.list; + + for (let i = 0; i < listTools.length; i++) { + if (!listTools[i].rolesNeeded || listTools[i].rolesNeeded.length === 0) { + listItems.push(items); + break; + } else if ( + listTools[i].rolesNeeded.some((roles) => role.includes(roles)) + ) { + listItems.push(items); + break; + } else if (listTools[i].rolesNeeded.includes(TOOL_STATUS_ICON.LOCK)) { + listItems.push(items); + break; + } + } + }); + + /** + * Changes the color of the icon dynamically if the tool is selected + * @param tool {Tool} + * @returns {{fontSize: string, fill: (string)}|{fontSize: string}} + */ + const iconConditionalStyling = (tool) => { + if (!tool.titleKeyword) + return { + fontSize: "24px", + }; + + let isSelected; + + // Case for the about tool + if (!tool.category) { + isSelected = + selectedToolTitleKeyword === tool.titleKeyword || + topMenuItemSelected === tool.titleKeyword; + } else if (tool.category !== TOOLS_CATEGORIES.OTHER) { + isSelected = + selectedToolTitleKeyword === tool.titleKeyword && + topMenuItemSelected === "navbar_tools"; + } else { + isSelected = selectedToolTitleKeyword === tool.titleKeyword; + } + + return { + fill: isSelected ? "#00926c" : "#4c4c4c", + color: isSelected ? "#00926c" : "#4c4c4c", + fontSize: "24px", + }; + }; + + return ( +
+ + + + + {isSideMenuOpen + ? keyword("navbar_verification") + : keyword("navbar_verification_short")} + + + handleSideMenuToolClick(toolsItem)} + component={Link} + to={toolsItem.path} + > + {isSideMenuOpen ? ( + <> + + + + + {keyword(toolsItem.titleKeyword)} + + } + /> + + ) : ( + + + + )} + + {listItems.map((item, key) => { + const element = ( + + + {isSideMenuOpen ? ( + <> + + {item.icon} + + + {keyword(item.titleKeyword)} + + } + /> + {item.variableOpen ? : } + + ) : ( + + {item.icon} + + )} + + + + + {item.list.map((itemList, keyList) => { + let element = ( + handleSideMenuToolClick(itemList)} + > + {isSideMenuOpen ? ( + <> + + {itemList.icon} + + + {keyword(itemList.titleKeyword)} + + } + /> + + ) : ( + + {itemList.icon} + + )} + + ); + + if ( + itemList.rolesNeeded && + itemList.rolesNeeded.includes("BETA_TESTER") + ) { + if (betaTester) { + return element; + } else { + return null; + } + } else { + return element; + } + })} + + + + ); + + return {element}; + })} + + + + {isSideMenuOpen + ? keyword("navbar_more") + : keyword("navbar_more_short")} + + + {drawerItemsMore.map((item, key) => { + return ( + handleSideMenuToolClick(item)} + > + {isSideMenuOpen ? ( + <> + + {item.icon} + + + {keyword(item.titleKeyword)} + + } + /> + + ) : ( + + {item.icon} + + )} + + ); + })} + + +
+ + + + + + + + + + + +
+ ); +}; + +export default SideMenu; diff --git a/src/components/TopMenu/index.jsx b/src/components/TopMenu/index.jsx new file mode 100644 index 000000000..f7e99624b --- /dev/null +++ b/src/components/TopMenu/index.jsx @@ -0,0 +1,146 @@ +import React from "react"; +import { AppBar, Grid, Stack, Tab, Tabs, Toolbar } from "@mui/material"; +import LogoEuCom from "../NavBar/images/SVG/Navbar/ep-logo.svg"; +import LogoInVidWeverify from "../NavBar/images/SVG/Navbar/invid_weverify.svg"; +import LogoVera from "../NavBar/images/SVG/Navbar/vera-logo_black.svg"; +import { Link, useNavigate } from "react-router-dom"; +import AdvancedTools from "../NavItems/tools/Alltools/AdvancedTools/AdvancedTools"; +import Languages from "../NavItems/languages/languages"; +import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles"; +import { useDispatch, useSelector } from "react-redux"; +import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace"; +import { selectPage } from "../../redux/reducers/navReducer"; + +const TopMenu = ({ topMenuItems }) => { + const classes = useMyStyles(); + + const keyword = i18nLoadNamespace("components/NavBar"); + + const dispatch = useDispatch(); + + const navigate = useNavigate(); + + const LOGO_EU = process.env.REACT_APP_LOGO_EU; + + const topMenuItemSelected = useSelector((state) => state.nav); + + const handleTopMenuChange = (event, newValue) => { + dispatch(selectPage(newValue)); + + if (newValue === "tools") { + navigate("/app/tools/"); + } else { + navigate("/app/" + "assistant"); + } + }; + + const handleHomeIconClick = () => { + navigate("/app/tools/all"); + }; + + const iconConditionalStyling = (toolName) => { + return { + fill: topMenuItemSelected === toolName ? "#00926c" : "#4c4c4c", + fontSize: "30px", + }; + }; + + return ( + + + + + + {LOGO_EU ? ( + + ) : ( + + )} + + + + + + {topMenuItems.map((item, index) => { + return ( + } + to={item.path} + component={Link} + sx={{ + minWidth: "120px", + }} + value={item.title} + /> + ); + })} + + + + + + + + + + + + ); +}; + +export default TopMenu; diff --git a/src/constants/tools.jsx b/src/constants/tools.jsx new file mode 100644 index 000000000..02aeffb3d --- /dev/null +++ b/src/constants/tools.jsx @@ -0,0 +1,459 @@ +import React from "react"; + +import { SvgIcon } from "@mui/material"; +import { Archive, AudioFile } from "@mui/icons-material"; + +import ToolsIcon from "../components/NavBar/images/SVG/Navbar/Tools.svg"; + +import AnalysisIcon from "../components/NavBar/images/SVG/Video/Video_analysis.svg"; +import KeyframesIcon from "../components/NavBar/images/SVG/Video/Keyframes.svg"; +import ThumbnailsIcon from "../components/NavBar/images/SVG/Video/Thumbnails.svg"; +import VideoRightsIcon from "../components/NavBar/images/SVG/Video/Video_rights.svg"; + +import MetadataIcon from "../components/NavBar/images/SVG/Image/Metadata.svg"; +import DeepfakeIcon from "../components/NavBar/images/SVG/Image/Deepfake.svg"; +import ImageAnalysisIcon from "../components/NavBar/images/SVG/Image/Image_analysis.svg"; +import MagnifierIcon from "../components/NavBar/images/SVG/Image/Magnifier.svg"; +import ForensicIcon from "../components/NavBar/images/SVG/Image/Forensic.svg"; +import OcrIcon from "../components/NavBar/images/SVG/Image/OCR.svg"; +import GifIcon from "../components/NavBar/images/SVG/Image/Gif.svg"; +import GeolocationIcon from "../components/NavBar/images/SVG/Image/Geolocation.svg"; + +import TwitterSearchIcon from "../components/NavBar/images/SVG/Search/Twitter_search.svg"; +import CovidSearchIcon from "../components/NavBar/images/SVG/Search/Covid19.svg"; +import XnetworkIcon from "../components/NavBar/images/SVG/Search/Xnetwork.svg"; + +import TwitterSnaIcon from "../components/NavBar/images/SVG/DataAnalysis/Twitter_sna.svg"; +import CsvSnaIcon from "../components/NavBar/images/SVG/DataAnalysis/CSV_SNA.svg"; +import AboutIcon from "../components/NavBar/images/SVG/Navbar/About.svg"; + +/** + * Represents the categories to which the tools belong + * @typedef ToolsCategories + * @type {{OTHER: string, ALL: string, IMAGE: string, VIDEO: string, SEARCH: string, DATA_ANALYSIS: string, AUDIO: string}} + */ +export const TOOLS_CATEGORIES = { + VIDEO: "navbar_category_video", + IMAGE: "navbar_category_image", + AUDIO: "navbar_category_audio", + SEARCH: "navbar_category_search", + DATA_ANALYSIS: "navbar_category_data", + OTHER: "navbar_category_other", + + // Used to display the home page + ALL: "navbar_category_general", +}; + +/** + * Represents the possible temporary states of the tools: + * - An experimental tool is not ready for production, and available to beta testers + * - A new tool is an experimental tool that was released to everyone + * - A locked tool is a tool available to registered users + * @typedef ToolsStatusIcon + * @type {{NEW: string, LOCK: string, EXPERIMENTAL: string}} + */ +export const TOOL_STATUS_ICON = { + EXPERIMENTAL: "experimental", + NEW: "new", + LOCK: "lock", +}; + +/** + * Represents the different segments of tools. + * Verification - The tools that can be used for Verification + * Learning - Resources to learn how to use the Verification Tools + * More - Settings and general information + * @typedef ToolGroups + * @type {{MORE: string, LEARNING: string, VERIFICATION: string}} + */ +export const TOOL_GROUPS = { + VERIFICATION: "verification", + LEARNING: "learning", + MORE: "more", +}; + +/** + * Represents the user roles that can be needed to access a given tool + * @typedef Roles + * @type {{BETA_TESTER: string, ARCHIVE: string, LOCK: string}} + */ +export const ROLES = { + ARCHIVE: "ARCHIVE", + BETA_TESTER: "BETA_TESTER", + LOCK: "lock", +}; + +/** + * Represents a tool that can be used by users + */ +class Tool { + /** + * + * @param titleKeyword {string} The keyword for the name of the tool + * @param descriptionKeyword {string=} The keyword for the tool description + * @param icon {SvgIconComponent | React.JSX.Element} The tool's icon + * @param category {ToolsCategories} The tool's category + * @param rolesIcons {?Array} Icons representing the development status of the tool + * @param rolesNeeded {?Array} Role(s) needed to access the tool + * @param path {string} The url path to the tool + * @param toolGroup {ToolGroups} The group to which the tool belongs + */ + constructor( + titleKeyword, + descriptionKeyword, + icon, + category, + rolesIcons, + rolesNeeded, + path, + toolGroup, + ) { + this.titleKeyword = titleKeyword; + this.descriptionKeyword = descriptionKeyword; + this.icon = icon; + this.category = category; + this.rolesIcons = rolesIcons; + this.rolesNeeded = rolesNeeded; + this.path = path; + this.toolGroup = toolGroup; + } +} + +const ToolsSvgIcon = (props) => { + return ; +}; + +/** + * The Homepage that lists all the tools available + * @type {Tool} + */ +const toolsHome = new Tool( + "navbar_tools", + "", + ToolsSvgIcon, + TOOLS_CATEGORIES.ALL, + null, + null, + "all", + TOOL_GROUPS.VERIFICATION, +); + +/** + * Video tools + **/ + +const videoAnalysis = new Tool( + "navbar_analysis_video", + "navbar_analysis_description", + , + TOOLS_CATEGORIES.VIDEO, + null, + null, + "analysis", + TOOL_GROUPS.VERIFICATION, +); + +const keyframes = new Tool( + "navbar_keyframes", + "navbar_keyframes_description", + , + TOOLS_CATEGORIES.VIDEO, + null, + null, + "keyframes", + TOOL_GROUPS.VERIFICATION, +); + +const thumbnails = new Tool( + "navbar_thumbnails", + "navbar_thumbnails_description", + , + TOOLS_CATEGORIES.VIDEO, + null, + null, + "thumbnails", + TOOL_GROUPS.VERIFICATION, +); + +const videoRights = new Tool( + "navbar_rights", + "navbar_rights_description", + , + TOOLS_CATEGORIES.VIDEO, + null, + null, + "copyright", + TOOL_GROUPS.VERIFICATION, +); + +const videoMetadata = new Tool( + "navbar_metadata_video", + "navbar_metadata_description", + , + TOOLS_CATEGORIES.VIDEO, + null, + null, + "metadata", + TOOL_GROUPS.VERIFICATION, +); + +const videoDeepfake = new Tool( + "navbar_deepfake_video", + "navbar_deepfake_video_description", + , + TOOLS_CATEGORIES.VIDEO, + [TOOL_STATUS_ICON.EXPERIMENTAL], + [ROLES.BETA_TESTER], + "deepfakeVideo", + TOOL_GROUPS.VERIFICATION, +); + +/** + * Image tools + **/ + +const imageAnalysis = new Tool( + "navbar_analysis_image", + "navbar_analysis_image_description", + , + TOOLS_CATEGORIES.IMAGE, + [], + [], + "analysisImage", + TOOL_GROUPS.VERIFICATION, +); + +const imageMagnifier = new Tool( + "navbar_magnifier", + "navbar_magnifier_description", + , + TOOLS_CATEGORIES.IMAGE, + [], + [], + "magnifier", + TOOL_GROUPS.VERIFICATION, +); + +const imageMetadata = new Tool( + "navbar_metadata_image", + "navbar_metadata_description", + , + TOOLS_CATEGORIES.IMAGE, + [], + [], + "metadata_image", + TOOL_GROUPS.VERIFICATION, +); + +const imageForensic = new Tool( + "navbar_forensic", + "navbar_forensic_description", + , + TOOLS_CATEGORIES.IMAGE, + [], + [], + "forensic", + TOOL_GROUPS.VERIFICATION, +); + +const imageOcr = new Tool( + "navbar_ocr", + "navbar_ocr_description", + , + TOOLS_CATEGORIES.IMAGE, + [], + [], + "ocr", + TOOL_GROUPS.VERIFICATION, +); + +const imageGif = new Tool( + "navbar_gif", + "navbar_gif_description", + , + TOOLS_CATEGORIES.IMAGE, + [TOOL_STATUS_ICON.LOCK], + [ROLES.LOCK], + "gif", + TOOL_GROUPS.VERIFICATION, +); + +const imageSyntheticDetection = new Tool( + "navbar_synthetic_image_detection", + "navbar_synthetic_image_detection_description", + , + TOOLS_CATEGORIES.IMAGE, + [TOOL_STATUS_ICON.NEW, TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK], + [ROLES.BETA_TESTER], + "syntheticImageDetection", + TOOL_GROUPS.VERIFICATION, +); + +const imageDeepfake = new Tool( + "navbar_deepfake_image", + "navbar_deepfake_image_description", + , + TOOLS_CATEGORIES.IMAGE, + [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK], + [ROLES.BETA_TESTER], + "deepfakeImage", + TOOL_GROUPS.VERIFICATION, +); + +const imageGeolocation = new Tool( + "navbar_geolocation", + "navbar_geolocation_description", + , + TOOLS_CATEGORIES.IMAGE, + [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK], + [ROLES.BETA_TESTER], + "geolocation", + TOOL_GROUPS.VERIFICATION, +); + +/** + * Audio tools + **/ + +const audioLoccus = new Tool( + "navbar_loccus", + "navbar_loccus_description", + , + TOOLS_CATEGORIES.AUDIO, + [TOOL_STATUS_ICON.NEW, TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK], + [ROLES.BETA_TESTER], + "loccus", + TOOL_GROUPS.VERIFICATION, +); + +/** + * Search tools + **/ + +const searchTwitter = new Tool( + "navbar_twitter", + "navbar_twitter_description", + , + TOOLS_CATEGORIES.SEARCH, + null, + null, + "twitter", + TOOL_GROUPS.VERIFICATION, +); + +const searchSemantic = new Tool( + "navbar_semantic_search", + "navbar_semantic_search_description", + , + TOOLS_CATEGORIES.SEARCH, + [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.NEW, TOOL_STATUS_ICON.LOCK], + [ROLES.LOCK], + "semanticSearch", + TOOL_GROUPS.VERIFICATION, +); + +const searchCovid = new Tool( + "navbar_covidsearch", + "navbar_covidsearch_description", + , + TOOLS_CATEGORIES.SEARCH, + [], + [], + "factcheck", + TOOL_GROUPS.VERIFICATION, +); + +const searchXnetwork = new Tool( + "navbar_xnetwork", + "navbar_xnetwork_description", + , + TOOLS_CATEGORIES.SEARCH, + [], + [], + "xnetwork", + TOOL_GROUPS.VERIFICATION, +); + +/** + * Data Analysis tools + **/ + +const dataAnalysisSna = new Tool( + "navbar_twitter_sna", + "navbar_twitter_sna_description", + , + TOOLS_CATEGORIES.DATA_ANALYSIS, + [TOOL_STATUS_ICON.LOCK], + [ROLES.LOCK], + "twitterSna", + TOOL_GROUPS.VERIFICATION, +); + +const dataAnalysisCrowdtangle = new Tool( + "navbar_twitter_crowdtangle", + "navbar_twitter_crowdtangle_description", + , + TOOLS_CATEGORIES.DATA_ANALYSIS, + [], + [], + "csvSna", + TOOL_GROUPS.VERIFICATION, +); + +/** + * Other tools + **/ + +const archiving = new Tool( + "navbar_archiving", + "navbar_archiving_description", + , + TOOLS_CATEGORIES.OTHER, + [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.NEW, TOOL_STATUS_ICON.LOCK], + [ROLES.ARCHIVE], + "archive", + TOOL_GROUPS.VERIFICATION, +); + +/** + * + * Other Group tools + */ +const about = new Tool( + "navbar_about", + "", + , + null, + null, + null, + "about", + TOOL_GROUPS.MORE, +); + +export const tools = [ + toolsHome, + videoAnalysis, + keyframes, + thumbnails, + videoRights, + videoMetadata, + videoDeepfake, + imageAnalysis, + imageMagnifier, + imageMetadata, + imageForensic, + imageOcr, + imageGif, + imageSyntheticDetection, + imageDeepfake, + imageGeolocation, + audioLoccus, + searchTwitter, + searchSemantic, + searchCovid, + searchXnetwork, + dataAnalysisSna, + dataAnalysisCrowdtangle, + archiving, + about, +]; diff --git a/src/constants/topMenuItems.jsx b/src/constants/topMenuItems.jsx new file mode 100644 index 000000000..09801a3bb --- /dev/null +++ b/src/constants/topMenuItems.jsx @@ -0,0 +1,98 @@ +import React from "react"; +import { Box, SvgIcon } from "@mui/material"; +import ToolsIcon from "../components/NavBar/images/SVG/Navbar/Tools.svg"; +import Assistant from "../components/NavItems/Assistant/Assistant"; +import { Footer, FOOTER_TYPES } from "../components/Shared/Footer/Footer"; +import ClassRoom from "../components/NavItems/ClassRoom/ClassRoom"; +import About from "../components/NavItems/About/About"; +import Interactive from "../components/NavItems/Interactive/Interactive"; +import Tutorial from "../components/NavItems/tutorial/tutorial"; +import AssistantIcon from "../components/NavBar/images/SVG/Navbar/Assistant.svg"; + +import ClassroomIcon from "../components/NavBar/images/SVG/Navbar/Classroom.svg"; +import InteractiveIcon from "../components/NavBar/images/SVG/Navbar/Interactive.svg"; + +import AboutIcon from "../components/NavBar/images/SVG/Navbar/About.svg"; +import GuideIcon from "../components/NavBar/images/SVG/Navbar/Guide.svg"; +import { TOOLS_CATEGORIES } from "./tools"; + +const ToolsSvgIcon = (props) => { + return ; +}; + +const AssistantSvgIcon = (props) => { + return ; +}; + +const GuideSvgIcon = (props) => { + return ; +}; + +const InteractiveSvgIcon = (props) => { + return ; +}; + +const ClassroomSvgIcon = (props) => { + return ; +}; + +const AboutSvgIcon = (props) => { + return ; +}; + +export const TOP_MENU_ITEMS = [ + { + title: "navbar_tools", + icon: ToolsSvgIcon, + content: , + path: "tools", + footer: , + typeTab: "verification", + type: TOOLS_CATEGORIES.ALL, + }, + { + title: "navbar_assistant", + icon: AssistantSvgIcon, + + content: , + path: "assistant", + footer: