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);
     };
@@ -69,6 +74,9 @@ const PathNode = ({ path, isRoot = false }) => {
     return (
         <li>
             <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
@@ -81,7 +89,7 @@ const PathNode = ({ path, isRoot = false }) => {
                 ) : (
                     <span
                         className="path-name has-text-weight-bold control"
-                        onClick={isRoot ? undefined : toggleExpand}
+                        onClick={isRoot ? undefined : expand}
                     >
                         {
                             indexMarkdown ? (