add a config option to collapse a sidebar item by default (hasura#32) (close hasura#20)

Author: jmannfeld

config.js

@@ -27,6 +27,9 @@ const config = {
 			"/introduction",
     		"/codeblock"
 		],
+    	"collapsedNav": [
+      		"/codeblock"
+    	],
 		"links": [
 			{ "text": "Hasura", "link": "https://hasura.io"},
 		],

src/components/sidebar/tree.js

@@ -73,7 +73,15 @@ const Tree = ({edges}) => {
   const [treeData] = useState(() => {
     return calculateTreeData(edges);
   });
-  const [collapsed, setCollapsed] = useState({});
+  const defaultCollapsed = {};
+  treeData.items.forEach(item => {
+    if (config.sidebar.collapsedNav && config.sidebar.collapsedNav.includes(item.url)) {
+      defaultCollapsed[item.url] = true;
+    } else {
+      defaultCollapsed[item.url] = false;
+    }
+  });
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
   const toggle = (url) => {
     setCollapsed({
       ...collapsed,
@@ -90,4 +98,4 @@ const Tree = ({edges}) => {
   );
 }
 
-export default Tree 
+export default Tree

src/components/sidebar/treeNode.js

@@ -21,20 +21,19 @@ const TreeNode = ({className = '', setCollapsed, collapsed, url, title, items, .
     <li
       className={calculatedClassName}
     >
-      {!config.sidebar.frontLine && title && hasChildren ? (
-        <button
-          onClick={collapse}
-          aria-label='collapse'
-          className='collapser'>
-          {!isCollapsed ? <OpenedSvg /> : <ClosedSvg />}
-        </button>
-      ) : null}
-
       {title && (
         <Link
           to={url}
         >
           {title}
+          {!config.sidebar.frontLine && title && hasChildren ? (
+            <button
+              onClick={collapse}
+              aria-label='collapse'
+              className='collapser'>
+              {!isCollapsed ? <OpenedSvg /> : <ClosedSvg />}
+            </button>
+          ) : null}
         </Link>)
       }
 

src/components/styles.css

@@ -410,14 +410,14 @@ pre {
   padding: 7px 24px 7px 16px;
 }
 
-.hideFrontLine .collapser{
+.hideFrontLine .collapser {
   background: transparent;
   border: none;
   outline: none;
-  margin-top: 7px;
   position: absolute;
   right: 20px;
   z-index: 1;
+  cursor: pointer;
 }
 
 .hideFrontLine  .active >a{
@@ -442,7 +442,8 @@ pre {
 .sideBarUL .item >a {
   color: #fff;
   text-decoration: none;
-  display: inline-block;
+  display: flex;
+  align-items: center;
   position: relative;
   width: 100%;
   padding-right: 35px;
@@ -468,7 +469,7 @@ pre {
   margin-left: 0 !important;
 }
 
-.showFrontLine  .item .item{
+.showFrontLine  .item .item {
   border-left: 1px solid #e6ecf1;
   border-left-color: rgb(230, 236, 241);
   padding: 0;