diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7326a15c..c081c1943 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
- Added borehole geometry panel.
- Added secondary header to borehole detail view.
- Added new codelist entries for `casing_type` and `backfill_material`.
+- Added tooltips to main side navigation.
### Changed
diff --git a/src/client/public/icons/help.svg b/src/client/public/icons/help.svg
index 5efd24d9e..2c5d0a9a2 100644
--- a/src/client/public/icons/help.svg
+++ b/src/client/public/icons/help.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
index 7ec3f81a2..9fffda9b8 100644
--- a/src/client/src/AppTheme.ts
+++ b/src/client/src/AppTheme.ts
@@ -43,7 +43,7 @@ export const theme = createTheme({
lightgrey: "#f1f3f5",
darkgrey: "#787878",
dark: "rgba(0, 0, 0, 0.5)",
- menuItemActive: "#D92B04",
+ menuItemActive: "#A65462",
filterItemActive: "#1C2834",
},
@@ -135,5 +135,13 @@ export const theme = createTheme({
},
},
},
+ MuiBadge: {
+ styleOverrides: {
+ badge: {
+ backgroundColor: "#FF0000",
+ color: "#FFFFFF",
+ },
+ },
+ },
},
});
diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
index c3c11c29c..225d47fd4 100644
--- a/src/client/src/commons/menu/mainView/mainSideNav.tsx
+++ b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -1,7 +1,7 @@
import { useContext, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useHistory } from "react-router-dom";
-import { Badge, IconButton, Stack } from "@mui/material";
+import { Badge, Stack } from "@mui/material";
import { ImportErrorModal } from "./menuComponents/importErrorModal";
import FilterIcon from "../../../../public/icons/filter.svg?react";
import AddIcon from "../../../../public/icons/add.svg?react";
@@ -10,27 +10,13 @@ import SettingsIcon from "../../../../public/icons/settings.svg?react";
import HelpIcon from "../../../../public/icons/help.svg?react";
import LayersIcon from "../../../../public/icons/layers.svg?react";
import { theme } from "../../../AppTheme";
-import { styled } from "@mui/system";
import ImportModal from "./actions/importModal";
import { DrawerContentTypes } from "../../../pages/editor/editorComponentInterfaces";
import { ErrorResponse, MainSideNavProps } from "./menuComponents/menuComponentInterfaces";
import { ReduxRootState, User } from "../../../ReduxStateInterfaces";
import { FilterContext } from "../../../components/filter/filterContext";
-
-const StyledIconButton = styled(IconButton)({
- padding: "10px",
- marginBottom: "25px",
- color: theme.palette.neutral.contrastText,
- "&:hover": {
- backgroundColor: theme.palette.background.lightgrey,
- },
- borderRadius: "10px",
-});
-
-const selectedButtonStyle = {
- color: theme.palette.primary.contrastText,
- backgroundColor: theme.palette.background.menuItemActive + " !important",
-};
+import { useTranslation } from "react-i18next";
+import { NavButton } from "../../../components/buttons/navButton";
const MainSideNav = ({
toggleDrawer,
@@ -44,6 +30,7 @@ const MainSideNav = ({
}: MainSideNavProps) => {
const history = useHistory();
const menuRef = useRef(null);
+ const { t } = useTranslation();
const [creating, setCreating] = useState(false);
const [modal, setModal] = useState(false);
const [upload, setUpload] = useState(false);
@@ -112,47 +99,58 @@ const MainSideNav = ({
padding: "1em",
flex: "1 1 100%",
}}>
- {activeFilterCount > 0 && }
- 0 && }
+ }
+ label={t("searchfilters")}
+ selected={isFilterPanelVisible}
onClick={handleToggleFilter}
- sx={isFilterPanelVisible ? selectedButtonStyle : {}}>
-
-
-
+ }
+ label={t("add")}
+ selected={isAddPanelVisible}
disabled={user.data.roles.indexOf("EDIT") === -1}
- sx={isAddPanelVisible ? selectedButtonStyle : {}}>
-
-
-
+ }
+ label={t("upload")}
+ disabled={user.data.roles.indexOf("EDIT") === -1}
onClick={() => {
+ toggleDrawer(false);
setModal(true);
setUpload(true);
}}
- disabled={user.data.roles.indexOf("EDIT") === -1}>
-
-
-
+ }
+ label={t("usersMap")}
+ selected={isLayersPanelVisible}
onClick={handleToggleLayers}
- sx={isLayersPanelVisible ? selectedButtonStyle : {}}>
-
-
+ />
- history.push(`/setting`)}>
-
-
-
- window.open(`/help`)} />
-
+ }
+ label={t("header_settings")}
+ onClick={() => history.push(`/setting`)}
+ />
+ }
+ label={t("header_help")}
+ onClick={() => window.open(`/help`)}
+ />
{filterPolygon !== null && (
-
+
)}
{this.state?.searchList?.map((filter, idx) => {
@@ -246,10 +247,8 @@ class FilterComponent extends React.Component {
),
}));
}}>
-
- {t(filter?.translationId)}{" "}
-
-
+ {t(filter?.translationId)}
+
{filter?.name === "workgroup" && filter?.isSelected && (
diff --git a/src/client/src/components/buttons/navButton.tsx b/src/client/src/components/buttons/navButton.tsx
new file mode 100644
index 000000000..2fd5aee87
--- /dev/null
+++ b/src/client/src/components/buttons/navButton.tsx
@@ -0,0 +1,51 @@
+import { forwardRef, useState } from "react";
+import { ButtonProps } from "./buttonsInterface";
+import { IconButton, Stack, Typography } from "@mui/material";
+import { theme } from "../../AppTheme";
+
+export interface NavButtonProps extends ButtonProps {
+ label: string;
+ icon: JSX.Element;
+ selected?: boolean;
+}
+
+export const NavButton = forwardRef((props, ref) => {
+ const [isHovered, setIsHovered] = useState(false);
+
+ const handleMouseEnter = () => setIsHovered(true);
+ const handleMouseLeave = () => setIsHovered(false);
+
+ const defaultContent = props.icon;
+ const hoverContent = (
+ <>
+ {props.icon} {props.label}
+
+ );
+ return (
+
+
+ {isHovered ? hoverContent : defaultContent}
+
+
+ );
+});