add: toggle button for path

src/components/Navigations/PathNode.css

@@ -8,6 +8,18 @@
     margin-left: 1rem;
 }
 
+.path-toggle {
+    background-color: #e4a4d8;
+    width: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 1rem;
+    font-size: 1rem;
+    color: #ffffff;
+}
+
 .path-node > .has-text-weight-bold {
     display: inline-flex;
     align-items: center;
@@ -48,6 +60,7 @@
     width: 100%;
 }
 
+
 .move-forward {
     background-color: #c0fff0 !important;
     border-color: #c0fbc0 !important;

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 ? (