import React, {useCallback, useEffect, useState} from "react";
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import logo from '../../Flaticon_circle.png';
import {faDoorOpen, faDownload, faPalette, faQuestionCircle} from "@fortawesome/free-solid-svg-icons";
import {NavLink, useLocation} from "react-router-dom";
import {useTheme} from "../../hooks/themeHook";
import PluginInformationModal from "../modal/PluginInformationModal";
import VersionInformationModal from "../modal/VersionInformationModal";
import {fetchPlanVersion} from "../../service/metadataService";
import {useAuth} from "../../hooks/authenticationHook";
import {useNavigation} from "../../hooks/navigationHook";
import {useTranslation} from "react-i18next";
import {Collapse} from "react-bootstrap-v5";
import {baseAddress} from "../../service/backendConfiguration";
import PageNavigationItem from "./PageNavigationItem";
const Logo = () => (
)
const Divider = ({showMargin}) => (
)
const InnerItem = ({href, icon, name, nameShort, color, external}) => {
if (!href) {
return ( )
}
if (external) {
return (
{nameShort ? nameShort : name}
)
}
return {
return isActive ? "collapse-item nav-button active" : "collapse-item nav-button"
}}>
{nameShort ? nameShort : name}
}
export const Item = ({item, inner}) => {
const {setCurrentTab} = useNavigation();
const {pathname} = useLocation();
const {t} = useTranslation();
const {href, name, nameShort, color, icon, external} = item;
useEffect(() => {
if (!external && '/' !== href && pathname.includes(href)) setCurrentTab(name);
}, [pathname, href, setCurrentTab, name, external])
if (inner) {
return ()
}
if (external) {
return (
{t(nameShort ? nameShort : name)}
)
}
return (
{
return isActive ? "nav-link active" : "nav-link"
}}>
{t(name)}
);
}
const VersionButton = ({toggleVersionModal, versionInfo}) => {
if (versionInfo.updateAvailable) {
return
Update Available!
;
}
return
{versionInfo.currentVersion}
;
}
const FooterButtons = () => {
const {t} = useTranslation();
const {toggleColorChooser} = useTheme();
const {authRequired} = useAuth();
const [infoModalOpen, setInfoModalOpen] = useState(false);
const toggleInfoModal = () => setInfoModalOpen(!infoModalOpen);
const [versionModalOpen, setVersionModalOpen] = useState(false);
const toggleVersionModal = () => setVersionModalOpen(!versionModalOpen);
const [versionInfo, setVersionInfo] = useState({currentVersion: 'Loading..', updateAvailable: false});
const loadVersion = async () => {
const {data, error} = await fetchPlanVersion();
if (data) {
setVersionInfo(data);
} else if (error) {
setVersionInfo({currentVersion: "Error getting version", updateAvailable: false})
}
}
useEffect(() => {
loadVersion();
}, [])
return (
<>
>
)
}
const SidebarCollapse = ({item, open, setOpen}) => {
const {t} = useTranslation();
const toggle = event => {
event.preventDefault();
setOpen(!open);
}
return (
{t(item.name)}
{item.contents
.filter(content => content !== undefined)
.map((content, i) =>
)}
)
}
const renderItem = (item, i, openCollapse, setOpenCollapse, t) => {
if (item.contents) {
return setOpenCollapse(i)}/>
}
if (item.href !== undefined) {
return
}
if (item.name) {
return {t(item.name)}
}
return
}
const Sidebar = ({page, items}) => {
const {t} = useTranslation();
const {currentTab, sidebarExpanded, setSidebarExpanded} = useNavigation();
const [openCollapse, setOpenCollapse] = useState(undefined);
const toggleCollapse = collapse => {
setOpenCollapse(openCollapse === collapse ? undefined : collapse);
}
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const updateWidth = useCallback(() => setWindowWidth(window.innerWidth), []);
useEffect(() => {
window.addEventListener('resize', updateWidth);
return () => window.removeEventListener('resize', updateWidth);
}, [updateWidth]);
const collapseSidebar = () => setSidebarExpanded(windowWidth > 1350);
useEffect(collapseSidebar, [windowWidth, currentTab, setSidebarExpanded]);
return (
<>
{sidebarExpanded &&
}
>
)
}
export default Sidebar