diff --git a/src/components/ComingSoonDialog.js b/src/components/ComingSoonDialog.js
new file mode 100644
index 0000000..400b6e4
--- /dev/null
+++ b/src/components/ComingSoonDialog.js
@@ -0,0 +1,61 @@
+import React from "react";
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Button,
+ Typography,
+ Box,
+ IconButton,
+} from "@mui/material";
+import { Close as CloseIcon, Construction } from "@mui/icons-material";
+
+export default function ComingSoonDialog({
+ open,
+ onClose,
+ featureName = "This feature",
+}) {
+ return (
+
+ );
+}
diff --git a/src/components/HarmonySidebar.js b/src/components/HarmonySidebar.js
index 152dc17..15fef7d 100644
--- a/src/components/HarmonySidebar.js
+++ b/src/components/HarmonySidebar.js
@@ -21,6 +21,7 @@ import { Logout, JoinInner } from "@mui/icons-material/";
import GoogleIcon from "@mui/icons-material/Google";
import GitHubIcon from "@mui/icons-material/GitHub";
import TwitterIcon from "@mui/icons-material/Twitter";
+import ComingSoonDialog from "./ComingSoonDialog";
// Get current domain for dynamic links
const getCurrentDomain = () => {
@@ -106,6 +107,8 @@ export default function HarmonySidebar() {
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const [anchorUser, setAnchorUser] = useState(null);
const [apiVersion, setApiVersion] = useState(null);
+ const [comingSoonOpen, setComingSoonOpen] = useState(false);
+ const [comingSoonFeature, setComingSoonFeature] = useState("");
const {
currentUser,
@@ -116,6 +119,16 @@ export default function HarmonySidebar() {
} = useAuth();
const { getVersion } = useData();
+ const handleNavigationClick = (e, item) => {
+ // For Browse, Explore, Compare, and Saves, show coming soon dialog
+ if (["Browse", "Explore", "Compare", "Saves"].includes(item.text)) {
+ e.preventDefault();
+ setComingSoonFeature(item.text);
+ setComingSoonOpen(true);
+ }
+ // Search and Harmonise should work normally
+ };
+
// Determine if an item is active
const isActive = (item) => {
if (item.text === "Harmonise") {
@@ -215,11 +228,12 @@ export default function HarmonySidebar() {
return (
handleNavigationClick(e, item)}
selected={isActive(item)}
sx={{
flexDirection: "column",
@@ -365,10 +379,12 @@ export default function HarmonySidebar() {
return (
handleNavigationClick(e, item)}
selected={isActive(item)}
sx={{
minHeight: 48,
@@ -594,6 +610,11 @@ export default function HarmonySidebar() {
+ setComingSoonOpen(false)}
+ featureName={comingSoonFeature}
+ />
>
);
}