add: toggle button for path

src/components/Navigations/PathNode.js

@@ -20,6 +20,11 @@ const PathNode = ({ path, isRoot = false }) => {
     const movePath = useMovePath();
     const moveMarkdown = useMoveMarkdown();
 
+
+    const expand = () => {
+        if(!isExpanded)
+            setIsExpanded(true);
+    };
     const toggleExpand = () => {
         setIsExpanded(!isExpanded);
     };
@@ -68,20 +73,23 @@ const PathNode = ({ path, isRoot = false }) => {
 
     return (
         <li>
-            <div className="path-node-header field has-addons" >
+            <div className="path-node-header field has-addons">
+                <span className="control has-text-weight-bold path-toggle" onClick={isRoot ? undefined : toggleExpand}>
+                        {isExpanded ? "-" : "+"}
+                </span>
                 {isEditing ? (
-                        <div className = "control has-icons-left">
-                            <input
-                                className="input is-small path-edit-input"
-                                value={newName}
-                                onChange={(e) => setNewName(e.target.value)}
-                            />
-                        </div>
+                    <div className="control has-icons-left">
+                        <input
+                            className="input is-small path-edit-input"
+                            value={newName}
+                            onChange={(e) => setNewName(e.target.value)}
+                        />
+                    </div>
 
                 ) : (
                     <span
                         className="path-name has-text-weight-bold control"
-                        onClick={isRoot ? undefined : toggleExpand}
+                        onClick={isRoot ? undefined : expand}
                     >
                         {
                             indexMarkdown ? (