Merge pull request #1255 from Monilprajapati/main

Solved Issue: Sidebar UI Enhancement

frontend/package.json

@@ -76,10 +76,10 @@
     "shellwords": "^0.1.1",
     "simplebar": "^4.2.3",
     "styled-components": "^4.4.0",
+    "webpack": "^5.88.2",
     "yaml": "^1.7.2",
     "yamljs": "^0.3.0",
-    "zone.js": "^0.13.1",
-    "webpack": "^5.88.2"
+    "zone.js": "^0.13.1"
   },
   "scripts": {
     "start": "HTTPS=false&&PORT=3000 GENERATE_SOURCEMAP=false react-scripts --openssl-legacy-provider start",

frontend/src/views/Docs.jsx

@@ -6,6 +6,8 @@ import { useParams, useNavigate, Link } from "react-router-dom";
 import { isMobile } from "react-device-detect";
 import theme from '../theme.jsx';
 import remarkGfm from 'remark-gfm'
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import {
   Grid,
@@ -19,6 +21,9 @@ import {
   Typography,
   Paper,
   List,
+  Collapse,
+  ListItemButton,
+  ListItemText
 } from "@mui/material";
 
 import {
@@ -78,6 +83,7 @@ const Docs = (defaultprops) => {
   const [data, setData] = useState("");
   const [firstrequest, setFirstrequest] = useState(true);
   const [list, setList] = useState([]);
+  const [isopen, setOpen] = useState(-1);
   const [, setListLoaded] = useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [headingSet, setHeadingSet] = React.useState(false);
@@ -98,11 +104,16 @@ const Docs = (defaultprops) => {
     setAnchorEl(null);
   }
 
+  const handleCollapse = (index) => {
+    setOpen(isopen === index ? -1 : index)
+  };
+
   const SidebarPaperStyle = {
     backgroundColor: theme.palette.surfaceColor,
     overflowX: "hidden",
     position: "relative",
-    padding: 30,
+    paddingLeft: 15,
+    paddingRight: 15,
     paddingTop: 15,
     marginTop: 15,
     minHeight: "80vh",
@@ -110,8 +121,8 @@ const Docs = (defaultprops) => {
   };
 
   const SideBar = {
-    minWidth: 250,
-    maxWidth: 300,
+    minWidth: 300,
+    width: "20%",
     left: 0,
     position: "sticky",
     top: 50,
@@ -724,6 +735,7 @@ const Docs = (defaultprops) => {
 				*/}
     </div>
 
+  // PostDataBrowser Section
   const postDataBrowser =
     list === undefined || list === null ? null : (
       <div style={Body}>
@@ -743,50 +755,51 @@ const Docs = (defaultprops) => {
 
                 const itemMatching = props.match.params.key === undefined ? false :
                   props.match.params.key.toLowerCase() === item.toLowerCase();
-                //const [tocLines, setTocLines] = React.useState([]);
                 return (
-                  <li key={index} style={{ marginTop: 10 }}>
-                    <Link
+                  <li key={index}>
+                    <ListItemButton
+                      component={Link}
                       key={index}
                       style={hrefStyle}
                       to={path}
                       onClick={() => {
                         setTocLines([]);
                         fetchDocs(item);
+                        handleCollapse(index);
                       }}
                     >
-                      <Typography
+                      <ListItemText
                         style={{ color: itemMatching ? "#f86a3e" : "inherit" }}
                         variant="body1"
                       >
-                        <b>> {newname}</b>
-                      </Typography>
-                    </Link>
+                        {newname}
+                      </ListItemText>
+                      {isopen === index ? <ExpandMoreIcon /> : <KeyboardArrowRightIcon />}
+                    </ListItemButton>
                     {itemMatching &&
                       tocLines !== null &&
                       tocLines !== undefined &&
                       tocLines.length > 0 ? (
-                      <div style={{ marginLeft: 5 }}>
+                      <Collapse in={isopen === index} timeout="auto" unmountOnExit>
                         {tocLines.map((data, index) => {
-                          //console.log(data)
 
                           return (
-                            <Link
+                            <ListItemButton
+                              component={Link}
                               key={index}
                               style={innerHrefStyle}
                               to={data.link}
-                              onClick={() => {}}
                             >
-                              <Typography
+                              <ListItemText
                                 variant="body2"
                                 style={{ cursor: "pointer" }}
                               >
-                                - {data.text}
-                              </Typography>
-                            </Link>
+                                {data.text}
+                              </ListItemText>
+                            </ListItemButton>
                           );
                         })}
-                      </div>
+                      </Collapse>
                     ) : null}
                   </li>
                 );
@@ -794,7 +807,7 @@ const Docs = (defaultprops) => {
             </List>
           </Paper>
         </div>
-				<div style={{maxWidth: 750, minWidth: 750, margin: "auto", overflow: "hidden", marginTop: 50, }}>
+        <div style={{ width: "70%", margin: "auto", overflow: "hidden", marginTop: 50, paddingRight: 50 }}>
           {props.match.params.key === undefined ?
             mainpageInfo
             :