wrap up query navigation

Author: Alban Bailly

src/components/2_molecules/menu.js

@@ -23,17 +23,16 @@ class Menu extends React.Component {
 
     return (
       <>
-        <a
+        <button
           aria-label="mobile menu button"
           id="menu-icon"
           className={`menu-icon ${menuOpen ? "open" : ""}`}
-          href="javascript:;"
           onClick={() => this.toggleMenu()}
         >
           <span className="bar top" />
           <span className="bar middle" />
           <span className="bar bottom" />
-        </a>
+        </button>
         <nav
           id="main-menu"
           role="menu"

src/components/2_molecules/sidemenu.js

@@ -3,27 +3,46 @@ import { graphql, StaticQuery } from "gatsby";
 
 const SideMenu = ({ data }) => {
   const nodes = data.allPaths.edges;
+  const groups = data.allPaths.group;
+
+  // console.log(data);
+
   return (
     <ul>
-      {nodes.map((node, i) => {
-        const n = node.node;
+      {groups.map((group, i) => {
+        // const n = group.edges;
+
+        // console.log(
+        //   group.edges.map(link => {
+        //     return link.node.get && link.node.get.summary;
+        //   })
+        // );
+
         return (
           <div key={i}>
-            {n.get && (
-              <li className="list-reset">
-                <a href={`/api/v4${n.name}`}>{n.get.summary}</a>
-              </li>
-            )}
-            {n.post && (
-              <li className="list-reset">
-                <a href={`/api/v4${n.name}`}>{n.post.summary}</a>
-              </li>
-            )}
-            {n.put && (
-              <li className="list-reset">
-                <a href={`/api/v4${n.name}`}>{n.put.summary}</a>
-              </li>
-            )}
+            <h2>{group.fieldValue}</h2>
+            {group.edges.map(link => {
+              const n = link.node;
+              return (
+                <div>
+                  {n.get && (
+                    <li className="list-reset">
+                      <a href={`/api/v4${n.name}#get`}>{n.get.summary}</a>
+                    </li>
+                  )}
+                  {n.post && (
+                    <li className="list-reset">
+                      <a href={`/api/v4${n.name}#post`}>{n.post.summary}</a>
+                    </li>
+                  )}
+                  {n.put && (
+                    <li className="list-reset">
+                      <a href={`/api/v4${n.name}#put`}>{n.put.summary}</a>
+                    </li>
+                  )}
+                </div>
+              );
+            })}
           </div>
         );
       })}
@@ -41,12 +60,33 @@ export default props => (
               name
               get {
                 summary
+                tags
               }
               post {
                 summary
+                tags
               }
               put {
                 summary
+                tags
+              }
+            }
+          }
+          group(field: get___tags) {
+            field
+            fieldValue
+            edges {
+              node {
+                name
+                get {
+                  summary
+                }
+                post {
+                  summary
+                }
+                put {
+                  summary
+                }
               }
             }
           }
@@ -56,3 +96,30 @@ export default props => (
     render={data => <SideMenu data={data} {...props} />}
   />
 );
+
+{
+  /* {nodes.map((node, i) => {
+        const n = node.node;
+
+        return (
+          <div key={i}>
+            <h1>{n.get && n.get.tags}</h1>
+            {n.get && (
+              <li className="list-reset">
+                <a href={`/api/v4${n.name}#get`}>{n.get.summary}</a>
+              </li>
+            )}
+            {n.post && (
+              <li className="list-reset">
+                <a href={`/api/v4${n.name}#post`}>{n.post.summary}</a>
+              </li>
+            )}
+            {n.put && (
+              <li className="list-reset">
+                <a href={`/api/v4${n.name}#put`}>{n.put.summary}</a>
+              </li>
+            )}
+          </div>
+        );
+      })} */
+}

src/components/5_templates/api.js

@@ -8,7 +8,7 @@ import Sidebar from "../../components/2_molecules/sidemenu";
 const apiPage = ({ data }) => {
   // const node = pageContext.name;
   const n = data.allPaths.edges[0].node;
-  console.log(n);
+  // console.log(n);
   return (
     <Layout title="API Documentation" subtitle="Linode API Documentation">
       <SEO title="API Documentation" description="" />