feat: Added toggle for navigation pane on left side

Author: vijay-1842

frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx

@@ -1,11 +1,16 @@
 import { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
 import { MdHome, MdMoreHoriz, MdOutlineNavigateNext } from "react-icons/md";
+import { TbLayoutSidebarLeftExpand, TbLayoutSidebarLeftCollapseFilled } from "react-icons/tb";
 import { useFileNavigation } from "../../contexts/FileNavigationContext";
 import { useDetectOutsideClick } from "../../hooks/useDetectOutsideClick";
 import { useTranslation } from "../../contexts/TranslationProvider";
 import "./BreadCrumb.scss";
 
-const BreadCrumb = () => {
+const BreadCrumb = ({
+  isNavigationPaneOpen,
+  setNavigationPaneOpen,
+}) => {
   const [folders, setFolders] = useState([]);
   const [hiddenFolders, setHiddenFolders] = useState([]);
   const [hiddenFoldersWidth, setHiddenFoldersWidth] = useState([]);
@@ -79,6 +84,15 @@ const BreadCrumb = () => {
   return (
     <div className="bread-crumb-container">
       <div className="breadcrumb" ref={breadCrumbRef}>
+        <div style={{ display: "contents" }}>
+          <span
+              className="folder-name folder-name-btn"
+              onClick={() => setNavigationPaneOpen((prev) => !prev)}
+            >
+              {isNavigationPaneOpen ? <TbLayoutSidebarLeftCollapseFilled /> : <TbLayoutSidebarLeftExpand />}
+            </span>
+        </div>
+        <div style={{ width: '1px', backgroundColor: "#cfcfcf" }}></div>
         {folders.map((folder, index) => (
           <div key={index} style={{ display: "contents" }}>
             <span
@@ -124,4 +138,9 @@ const BreadCrumb = () => {
 
 BreadCrumb.displayName = "BreadCrumb";
 
+BreadCrumb.propTypes = {
+  isNavigationPaneOpen: PropTypes.bool.isRequired,
+  setNavigationPaneOpen: PropTypes.func.isRequired,
+}
+
 export default BreadCrumb;

frontend/src/FileManager/FileManager.jsx

@@ -14,7 +14,7 @@ import { useColumnResize } from "../hooks/useColumnResize";
 import PropTypes from "prop-types";
 import { dateStringValidator, urlValidator } from "../validators/propValidators";
 import { TranslationProvider } from "../contexts/TranslationProvider";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { defaultPermissions } from "../constants";
 import "./FileManager.scss";
 
@@ -49,7 +49,9 @@ const FileManager = ({
   fontFamily = "Nunito Sans, sans-serif",
   language = "en",
   permissions: userPermissions = {},
+  showNavigationPane = true,
 }) => {
+  const [isNavigationPaneOpen, setNavigationPaneOpen] = useState(showNavigationPane);
   const triggerAction = useTriggerAction();
   const { containerRef, colSizes, isDragging, handleMouseMove, handleMouseUp, handleMouseDown } =
     useColumnResize(20, 80);
@@ -86,16 +88,25 @@ const FileManager = ({
                     onMouseUp={handleMouseUp}
                     className="files-container"
                   >
-                    <div className="navigation-pane" style={{ width: colSizes.col1 + "%" }}>
+                    <div
+                      className="navigation-pane"
+                      style={{
+                        width: colSizes.col1 + "%",
+                        display: isNavigationPaneOpen ? "block" : "none",
+                      }}
+                    >
                       <NavigationPane onFileOpen={onFileOpen} />
                       <div
                         className={`sidebar-resize ${isDragging ? "sidebar-dragging" : ""}`}
                         onMouseDown={handleMouseDown}
                       />
                     </div>
 
-                    <div className="folders-preview" style={{ width: colSizes.col2 + "%" }}>
-                      <BreadCrumb />
+                    <div className="folders-preview" style={{ width: (isNavigationPaneOpen ? colSizes.col2 : 100) + "%" }}>
+                      <BreadCrumb
+                        isNavigationPaneOpen={isNavigationPaneOpen}
+                        setNavigationPaneOpen={setNavigationPaneOpen}
+                      />
                       <FileList
                         onCreateFolder={onCreateFolder}
                         onRename={onRename}
@@ -184,6 +195,7 @@ FileManager.propTypes = {
     download: PropTypes.bool,
     delete: PropTypes.bool,
   }),
+  showNavigationPane: PropTypes.bool,
 };
 
 export default FileManager;

frontend/src/FileManager/FileManager.scss

@@ -84,6 +84,7 @@ svg {
       padding-right: 0px;
       padding-left: 0px;
       border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
     }
   }
 }