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 ( + + + + + + Coming Soon + + + + + + + + + {featureName} is coming soon! We're working hard to bring you this + feature. + + + + + + + ); +} 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} + /> ); }