different navigation tactic

content/api/introduction.md

@@ -0,0 +1,15 @@
+---
+title: API References
+description: API references for Ocean Protocol components.
+---
+
+The following components expose a consumable API:
+
+<repo name="aquarius"></repo>
+<repo name="brizo"></repo>
+
+Those libraries ...:
+
+<repo name="squid-js"></repo>
+<repo name="squid-py"></repo>
+<repo name="squid-java"></repo>

data/sections.yml

@@ -15,5 +15,5 @@
 
 - title: API References
   description: Get the API references for all relevant components.
-  link: /api/squid-js/
+  link: /api/introduction/
   color: green

data/sidebars/api.yml

@@ -1,4 +1,14 @@
+- group: Overview
+  items:
+    - title: API References
+      link: /api/introduction/
+
 - group: squid-js
   items:
     - title: API reference
       link: /api/squid-js/
+
+- group: aquarius
+  items:
+    - title: API reference
+      link: https://github.com/oceanprotocol/aquarius/blob/develop/docs/for_api_users/API.md

src/components/Sidebar.jsx

@@ -7,7 +7,12 @@ const SidebarLink = ({ link, title, linkClasses }) => {
     if (link) {
         if (link.match(/^\s?http(s?)/gi)) {
             return (
-                <a href={link} target="_blank" rel="noopener noreferrer">
+                <a
+                    href={link}
+                    className={linkClasses}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
                     {title}
                 </a>
             )
@@ -23,8 +28,21 @@ const SidebarLink = ({ link, title, linkClasses }) => {
     }
 }
 
-const SidebarList = ({ items, location }) => (
+SidebarLink.propTypes = {
-    <ul className={styles.list}>
+    link: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    linkClasses: PropTypes.string
+}
+
+const SidebarList = ({ items, location, toc, tableOfContents }) => (
+    <div className={styles.list}>
+        {toc ? (
+            <div
+                className={styles.toc}
+                dangerouslySetInnerHTML={{ __html: tableOfContents }}
+            />
+        ) : (
+            <ul>
                 {items.map((item, j) => (
                     <li key={j}>
                         <SidebarLink
@@ -39,42 +57,18 @@ const SidebarList = ({ items, location }) => (
                     </li>
                 ))}
             </ul>
+        )}
+    </div>
 )
 
-export default class Sidebar extends Component {
+SidebarList.propTypes = {
-    static propTypes = {
+    items: PropTypes.array.isRequired,
-        sidebar: PropTypes.string,
     location: PropTypes.object.isRequired,
     toc: PropTypes.bool,
     tableOfContents: PropTypes.string
 }
 
-    static defaultProps = { location: { pathname: `/` } }
+const SidebarGroupTitle = ({ group }) => (
-
-    render() {
-        const { sidebar, location, toc, tableOfContents } = this.props
-
-        const sidebarfile = sidebar ? require(`../../data/sidebars/${sidebar}.yml`) : [] // eslint-disable-line
-
-        if (!sidebarfile) {
-            return null
-        }
-
-        return (
-            <nav className={styles.sidebar}>
-                {toc ? (
-                    <div>
-                        <h4 className={styles.groupTitle}>On this page</h4>
-                        <div
-                            className={styles.toc}
-                            dangerouslySetInnerHTML={{
-                                __html: tableOfContents
-                            }}
-                        />
-                    </div>
-                ) : (
-                    sidebarfile.map((group, i) => (
-                        <div key={i}>
     <h4 className={styles.groupTitle}>
         {group.items[0].link ? (
             <SidebarLink
@@ -86,26 +80,84 @@ export default class Sidebar extends Component {
             group.group
         )}
     </h4>
+)
+
+SidebarGroupTitle.propTypes = {
+    group: PropTypes.object.isRequired
+}
+
+const SidebarGroup = ({ i, group, location, ...props }) => (
+    <>
+        <SidebarGroupTitle group={group} />
         <SidebarList
             key={i}
             items={group.items}
             location={location}
+            {...props}
+        />
+    </>
+)
+
+export default class Sidebar extends Component {
+    static propTypes = {
+        sidebar: PropTypes.string,
+        location: PropTypes.object.isRequired,
+        collapsed: PropTypes.bool,
+        toc: PropTypes.bool,
+        tableOfContents: PropTypes.string
+    }
+
+    static defaultProps = { location: { pathname: '/' } }
+
+    render() {
+        const {
+            sidebar,
+            location,
+            collapsed,
+            toc,
+            tableOfContents
+        } = this.props
+
+        if (sidebar) {
+            try {
+                var sidebarfile = require(`../../data/sidebars/${sidebar}.yml`) // eslint-disable-line
+            } catch (e) {
+                throw e
+            }
+        }
+
+        if (!sidebarfile) {
+            return null
+        }
+
+        return (
+            <nav className={styles.sidebar}>
+                {sidebarfile.map((group, i) => (
+                    <div key={i}>
+                        {collapsed ? (
+                            group.items.some(
+                                item => item.link === location.pathname
+                            ) ? (
+                                <SidebarGroup
+                                    i={i}
+                                    group={group}
+                                    location={location}
+                                    toc={toc}
+                                    tableOfContents={tableOfContents}
+                                />
+                            ) : (
+                                <SidebarGroupTitle group={group} />
+                            )
+                        ) : (
+                            <SidebarGroup
+                                i={i}
+                                group={group}
+                                location={location}
                             />
-                        </div>
-                    ))
                         )}
+                    </div>
+                ))}
             </nav>
         )
     }
 }
-
-SidebarLink.propTypes = {
-    link: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    linkClasses: PropTypes.string
-}
-
-SidebarList.propTypes = {
-    items: PropTypes.array.isRequired,
-    location: PropTypes.object.isRequired
-}

src/components/Sidebar.module.scss

@@ -54,6 +54,10 @@
     border-left: 1px solid $brand-grey-lighter;
     margin-left: $spacer / 2;
 
+    > ul {
+        padding-left: 0;
+    }
+
     li {
         display: block;
 
@@ -63,7 +67,8 @@
     }
 }
 
-.link {
+.link,
+.toc a {
     color: $brand-grey;
     display: inline-block;
     padding: $spacer / 6 $spacer / 2;
@@ -77,6 +82,24 @@
     }
 }
 
+.toc {
+    ul {
+        padding-left: 0;
+
+        ul {
+            padding-left: $spacer / 2;
+            margin: 0;
+        }
+    }
+
+    li {
+        margin: 0;
+    }
+
+    a {
+    }
+}
+
 .active {
     composes: link;
     color: $brand-purple;

src/templates/Doc.jsx

@@ -27,7 +27,7 @@ const DocMain = ({ title, description, tableOfContents, post, single }) => (
 DocMain.propTypes = {
     title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
-    tableOfContents: PropTypes.string.isRequired,
+    tableOfContents: PropTypes.string,
     post: PropTypes.object.isRequired,
     single: PropTypes.bool
 }
@@ -54,6 +54,8 @@ export default class DocTemplate extends Component {
             }
         })
 
+        const isApiSection = location.pathname.includes('/api/')
+
         return (
             <>
                 <Helmet>
@@ -77,33 +79,24 @@ export default class DocTemplate extends Component {
                                     <Sidebar
                                         location={location}
                                         sidebar={section}
-                                    />
+                                        collapsed={isApiSection}
-                                </aside>
+                                        toc={
-                                {location.pathname.includes('/api/') ? (
+                                            isApiSection &&
-                                    <>
+                                            !location.pathname.includes(
-                                        <DocMain
+                                                '/api/introduction/'
-                                            title={title}
+                                            )
-                                            description={description}
-                                            post={post}
-                                        />
-                                        <aside className={styles.sidebarToc}>
-                                            <Sidebar
-                                                location={location}
-                                                toc
-                                                tableOfContents={
-                                                    tableOfContents
                                         }
+                                        tableOfContents={tableOfContents}
                                     />
                                 </aside>
-                                    </>
-                                ) : (
                                 <DocMain
                                     title={title}
                                     description={description}
-                                        tableOfContents={tableOfContents}
+                                    tableOfContents={
+                                        !isApiSection && tableOfContents
+                                    }
                                     post={post}
                                 />
-                                )}
                             </main>
                         ) : (
                             <DocMain

src/templates/Doc.module.scss

@@ -16,27 +16,12 @@
         margin-bottom: 0;
         order: 1;
 
-        :global(.api) & {
-            width: 17%;
-        }
-
         + .main {
             width: 73%;
         }
     }
 }
 
-.sidebarToc {
-    composes: sidebar;
-    padding-left: $spacer / 2;
-
-    @media (min-width: $break-point--medium) {
-        :global(.api) & {
-            width: 19%;
-        }
-    }
-}
-
 .main {
     width: 100%;
     background: $brand-white;