Merge pull request #956 from Abhi-m-anue/develop

revamp side-menu
bluewave-labs · Oct 15, 2024 · c2e0037 · c2e0037
2 parents 3c400d3 + cefe93b
commit c2e0037
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 83 deletions.
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
@@ -43,6 +43,7 @@ import ArrowLeft from "../../assets/icons/left-arrow.svg?react";
 import DotsVertical from "../../assets/icons/dots-vertical.svg?react";
 import ChangeLog from "../../assets/icons/changeLog.svg?react";
 import Docs from "../../assets/icons/docs.svg?react";
+import Folder from "../../assets/icons/folder.svg?react";
 
 import "./index.css";
 
@@ -68,13 +69,16 @@ const menu = [
       { name: "Team", path: "account/team", icon: <TeamSvg /> },
     ],
   },
-];
-
-const other = [
-  { name: "Settings", path: "settings", icon: <Settings /> },
-  { name: "Support", path: "support", icon: <Support /> },
-  { name: "Docs", path: "docs", icon: <Docs /> },
-  { name: "Changelog", path: "changelog", icon: <ChangeLog /> },
+  {
+    name: "Other",
+    icon: <Folder />,
+    nested: [
+      { name: "Settings", path: "settings", icon: <Settings /> },
+      { name: "Support", path: "support", icon: <Support /> },
+      { name: "Docs", path: "docs", icon: <Docs /> },
+      { name: "Changelog", path: "changelog", icon: <ChangeLog /> },
+    ],
+  },
 ];
 
 const URL_MAP = {
@@ -83,6 +87,13 @@ const URL_MAP = {
   changelog: "https://github.com/bluewave-labs/bluewave-uptime/releases",
 };
 
+const PATH_MAP = {
+  monitors: "Dashboard",
+  pagespeed: "Dashboard",
+  account: "Account",
+  settings: "Other",
+};
+
 /**
  * @component
  * Sidebar component serves as a sidebar containing a menu.
@@ -97,7 +108,7 @@ function Sidebar() {
   const dispatch = useDispatch();
   const authState = useSelector((state) => state.auth);
   const collapsed = useSelector((state) => state.ui.sidebar.collapsed);
-  const [open, setOpen] = useState({ Dashboard: false, Account: false });
+  const [open, setOpen] = useState({ Dashboard: false, Account: false, Other: false });
   const [anchorEl, setAnchorEl] = useState(null);
   const [popup, setPopup] = useState();
   const { user } = useSelector((state) => state.auth);
@@ -130,13 +141,13 @@ function Sidebar() {
   };
 
   useEffect(() => {
-    if (
-      location.pathname.includes("monitors") ||
-      location.pathname.includes("pagespeed")
-    )
-      setOpen((prev) => ({ ...prev, Dashboard: true }));
-    else if (location.pathname.includes("/account"))
-      setOpen((prev) => ({ ...prev, Account: true }));
+    const matchedKey = Object.keys(PATH_MAP).find((key) =>
+      location.pathname.includes(key)
+    );
+
+    if (matchedKey) {
+      setOpen((prev) => ({ ...prev, [PATH_MAP[matchedKey]]: true }));
+    }
   }, []);
 
   return (
@@ -212,7 +223,9 @@ function Sidebar() {
             },
           }}
           onClick={() => {
-            setOpen({ Dashboard: false, Account: false });
+            setOpen(prev => 
+              Object.fromEntries(Object.keys(prev).map(key => [key, false]))
+            )
             dispatch(toggleSidebar());
           }}
         >
@@ -356,7 +369,12 @@ function Sidebar() {
                       }
                       key={child.path}
                       onClick={() => {
-                        navigate(`/${child.path}`);
+                        const url = URL_MAP[child.path];
+                        if (url) {
+                          window.open(url, "_blank", "noreferrer");
+                        } else {
+                          navigate(`/${child.path}`);
+                        }
                         closePopup();
                       }}
                       sx={{
@@ -382,8 +400,8 @@ function Sidebar() {
               <ListItemButton
                 onClick={() =>
                   setOpen((prev) => ({
-                    ...prev,
-                    [`${item.name}`]: !prev[`${item.name}`],
+                    ...Object.fromEntries(Object.keys(prev).map(key => [key, false])),
+                    [item.name]: !prev[item.name]
                   }))
                 }
                 sx={{
@@ -419,7 +437,14 @@ function Sidebar() {
                             : ""
                         }
                         key={child.path}
-                        onClick={() => navigate(`/${child.path}`)}
+                        onClick={() => {
+                          const url = URL_MAP[child.path];
+                          if (url) {
+                            window.open(url, "_blank", "noreferrer");
+                          } else {
+                            navigate(`/${child.path}`);
+                          }
+                        }}
                         sx={{
                           gap: theme.spacing(4),
                           borderRadius: theme.shape.borderRadius,
@@ -465,69 +490,6 @@ function Sidebar() {
           )
         )}
       </List>
-      <Divider sx={{ my: theme.spacing(4) }} />
-      {/* other */}
-      <List
-        component="nav"
-        aria-labelledby="nested-other-subheader"
-        subheader={
-          <ListSubheader
-            component="div"
-            id="nested-other-subheader"
-            sx={{
-              pt: theme.spacing(4),
-              px: collapsed ? 0 : theme.spacing(4),
-              backgroundColor: "transparent",
-            }}
-          >
-            Other
-          </ListSubheader>
-        }
-        sx={{ px: theme.spacing(6) }}
-      >
-        {other.map((item) => (
-          <Tooltip
-            key={item.path}
-            placement="right"
-            title={collapsed ? item.name : ""}
-            slotProps={{
-              popper: {
-                modifiers: [
-                  {
-                    name: "offset",
-                    options: {
-                      offset: [0, -16],
-                    },
-                  },
-                ],
-              },
-            }}
-            disableInteractive
-          >
-            <ListItemButton
-              className={
-                location.pathname.includes(item.path) ? "selected-path" : ""
-              }
-              onClick={() => {
-                const url = URL_MAP[item.path];
-                if (url) {
-                  window.open(url, "_blank", "noreferrer");
-                } else {
-                  navigate(`/${item.path}`);
-                }
-              }}
-              sx={{
-                gap: theme.spacing(4),
-                borderRadius: theme.shape.borderRadius,
-                px: theme.spacing(4),
-              }}
-            >
-              <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-              <ListItemText>{item.name}</ListItemText>
-            </ListItemButton>
-          </Tooltip>
-        ))}
-      </List>
       <Divider sx={{ mt: "auto" }} />
 
       <Stack

diff --git a/Client/src/assets/icons/folder.svg b/Client/src/assets/icons/folder.svg