enabled buttons to discover with dialog

Author: John Rogers

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 (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="sm"
+      fullWidth
+      PaperProps={{
+        sx: {
+          borderRadius: 2,
+        },
+      }}
+    >
+      <DialogTitle>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <Construction sx={{ color: "#ff9800", fontSize: 24 }} />
+            <Typography variant="h6">Coming Soon</Typography>
+          </Box>
+          <IconButton size="small" onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+      </DialogTitle>
+      <DialogContent dividers>
+        <Typography variant="body1" color="text.secondary">
+          {featureName} is coming soon! We're working hard to bring you this
+          feature.
+        </Typography>
+      </DialogContent>
+      <DialogActions sx={{ p: 3, pt: 2 }}>
+        <Button onClick={onClose} variant="contained">
+          Got it
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

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,17 @@ export default function HarmonySidebar() {
 
             return (
               <ListItemButton
-                disabled={isExternal}
+                disabled={
+                  item.text !== "Search" &&
+                  ["Browse", "Explore", "Compare", "Saves"].includes(item.text)
+                    ? false
+                    : isExternal
+                }
                 key={item.text}
                 component={isExternal ? "a" : Link}
                 href={isExternal ? item.href : undefined}
                 to={isExternal ? undefined : item.href}
+                onClick={(e) => handleNavigationClick(e, item)}
                 selected={isActive(item)}
                 sx={{
                   flexDirection: "column",
@@ -365,10 +384,18 @@ export default function HarmonySidebar() {
             return (
               <ListItem key={item.text} disablePadding>
                 <ListItemButton
-                  disabled={isExternal}
+                  disabled={
+                    item.text !== "Search" &&
+                    ["Browse", "Explore", "Compare", "Saves"].includes(
+                      item.text
+                    )
+                      ? false
+                      : isExternal
+                  }
                   component={isExternal ? "a" : Link}
                   href={isExternal ? item.href : undefined}
                   to={isExternal ? undefined : item.href}
+                  onClick={(e) => handleNavigationClick(e, item)}
                   selected={isActive(item)}
                   sx={{
                     minHeight: 48,
@@ -594,6 +621,11 @@ export default function HarmonySidebar() {
           </Menu>
         </Box>
       </Box>
+      <ComingSoonDialog
+        open={comingSoonOpen}
+        onClose={() => setComingSoonOpen(false)}
+        featureName={comingSoonFeature}
+      />
     </>
   );
 }