add toc styling

src/components/APIArguments.astro

@@ -0,0 +1,61 @@
+---
+const {args} = Astro.props;
+---
+
+{(args && args.length) ? (
+    <h3>Arguments</h3>
+    <table class="arguments">
+        <tbody>
+            {args.map(arg=>(
+                <tr class="argument">
+                    <th>
+                        <strong>{arg.name}</strong>
+                        <br/>
+                        <span>
+                            {!arg.is_required && (
+                                "optional "
+                            )}
+                            {arg.type}
+                        </span>
+                    </th>
+                    <th>
+                        <span>{arg.description}</span>
+                    </th>
+                </tr>
+        ))}
+        </tbody>
+    </table>
+) : ''}
+<style>
+    .arguments {
+            border: 1px solid var(--tertiary-background);
+        }
+
+        .arguments .left, .arguments .right {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .arguments .argument {
+            background-color: var(--tertiary-background);
+            border-bottom: 1px solid var(--tertiary-background);
+        }
+
+        .arguments .argument th {
+            text-align: left;
+            padding: 0.25rem 1rem;
+        }
+
+        .arguments .argument span {
+            text-align: left;
+            font-weight: normal;
+        }
+
+        .arguments .argument .left, .arguments .argument .right {
+            padding: 0.5rem 1rem;
+        }
+
+        .arguments .argument:nth-child(2n) {
+            background-color: var(--secondary-background);
+        }
+</style>

src/components/APIExamples.astro

@@ -0,0 +1,71 @@
+---
+import { Code } from "astro/components";
+
+const {examples, cmd} = Astro.props;
+
+if (!examples) return;
+
+// Treat title and output as metadata and remove from examples
+const title = examples.title;
+const output = examples.output;
+delete examples.title;
+delete examples.output;
+
+function setExample(example, cmd){
+                console.log(example, cmd);
+                document.body.classList.toggle(example);
+            }
+
+---
+
+<div class="examples">
+    {examples ? (
+        <div>
+            <h3>Examples</h3>
+            <h4>{title}</h4>
+            {Object.keys(examples).map(example=>(
+                <button data-example={example}>{example}</button>
+            ))}
+            {Object.keys(examples).map(example=>(
+                <div class:list={["example", cmd, example]}>
+                    <p>{example}</p>
+                    <Code lang={"bash"} code={`${examples[example]}`} />
+                </div>
+            ))}
+        </div>
+        <script define:vars={{examples, cmd}}>
+            
+            document.querySelectorAll(`.${cmd} button`).forEach(btn=>{
+                btn.addEventListener('click', (e)=>{
+                    Object.keys(examples).map(example=>{
+                        document.body.classList.remove(example);
+                    });
+                    document.body.classList.add(btn.getAttribute('data-example'));
+                })
+            })
+            
+        </script>
+    ) : ''}
+</div>
+<style>
+    .example {
+        display: none;
+    }
+
+    body:not(.curl, .lbrynet, .python) .examples .example:first-of-type {
+        display: block;
+    }
+
+    body.curl .example.curl {
+        display: block;
+    }
+
+    body.lbrynet .example.lbrynet {
+        display: block;
+    }
+
+    body.python .example.python {
+        display: block;
+    }
+
+</style>

src/components/Header.astro

@@ -8,6 +8,7 @@ const links = [
   { name: "Overview", href: "/overview" },
   { name: "Playground", href: "/playground" },
   { name: "Resources", href: "/resources"},
+  { name: "API", href: "/api"},
   { name: "Tutorials", href: "/tutorials"},
   { name: "Community", href: "/community"}
 ]
@@ -16,6 +17,10 @@ const isActive = (href: string)=>{
     return href === pathname || href === pathname.split('/').slice(0,2).join('/');
 }
 
+function handleMenu(e) {
+  console.log(e);
+}
+
 ---
 
 <header>
@@ -34,8 +39,25 @@ const isActive = (href: string)=>{
       </ul>
     </div>
     <div class="right">
-      <div class="search"><p>Search TODO</p></div>
-      <btn class="menu"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></btn>
+        <div class="search"><p>Search TODO</p></div>
+        <btn id="menu">
+            <span></span>
+            <span></span>
+            <span></span>
+        </btn>
     </div>
   </nav>
-</header>
+</header>
+<script>
+    const btn = document.querySelector('#menu');
+
+    btn.addEventListener('click', () => {
+        btn.classList.toggle('open');
+        document.querySelectorAll('.sidebar').forEach(sidebar=>{
+            sidebar.classList.toggle('active');
+        })
+    });
+</script>
+<style>
+    
+</style>

src/components/TableOfContents.astro

@@ -3,12 +3,10 @@
 import TableOfContentsHeading from "./TableOfContentsHeading.astro";
 import TocItem from '../utils/generateToc.ts';
 const { headings, edit } = Astro.props;
-import { REPOSITORY, edit_page } from "../config";
+import { REPOSITORY } from "../config";
 
 const toc = headings && headings.length ? TocItem(headings) : [];
 
-console.log(edit);
-
 ---
 
 <section class="toc">
@@ -23,22 +21,19 @@ console.log(edit);
 </section>
 <style is:inline>
     .toc {
-        position: fixed;
-        width: var(--sidebar-width);
-        height: 100vh;
-        overflow-y: auto;
-        inset-block: 0;
-        inset-inline-end: 0;
-        padding-top: var(--nav-height);
-        background-color: var(--secondary-background);
+        width: calc(var(--sidebar-width) - 2rem);
+        height: 100%;
+        overflow-y: scroll;
+        /* max-height: 80%; */
+        /* inset-block: 0; */
         transition: 0.3s;
-        z-index: 10;
     }
-
+    
     .toc .container {
         display: flex;
         flex-direction: column;
         padding: 1rem 1rem 0;
+        overflow-y: auto;
     }
 
     .toc .container summary {
@@ -60,6 +55,15 @@ console.log(edit);
 
     .toc ul li:hover {
         font-size: 0.785rem;
-        /* border-left: 1px solid var(--header-text); */
+    }
+
+    @media only screen and (max-width: 750px) {
+        /* .toc {
+            margin-top: var(--nav-height);
+            margin-bottom: 0;
+            inset-inline-start: 0;
+            inset-inline-end: unset;
+            transform: translateX(-100%);
+        } */
     }
 </style>

src/components/TableOfContentsHeading.astro

@@ -39,7 +39,7 @@ const { heading } = Astro.props;
     }
 
   li ul {
-    /* list-style: none; */
+    list-style: none;
     padding-inline-start: 1rem;
     /* border-left: 1px solid var(--secondary-background); */
   }

src/config.js

@@ -72,20 +72,25 @@ export const featured = [
 ]
 
 export const REDIRECTS = {
-  "/api/blockchain": "/api/lbrycrd",
-  "/api/lbry": "/api/sdk",
-  "/api/protocol": "/api/sdk",
-  "/play": "/playground",
-  "/repository-standards": "/resources/repository-standards",
-  "/resources/lbry-claimtrie": "/spec#claimtrie",
-  "/resources/schema": "/spec#metadata",
-  "/resources/signing-claim": "/resources/claim-signing",
-  "/resources/uri": "/spec#urls",
-  "/resources/video-lbryandroid": "https://odysee.com/video-2018-10-15053403:e",
-  "/resources/video-lbrycrd": "https://odysee.com/intro-to-LBRYcrd:5",
-  "/resources/video-lbrydesktop": "https://odysee.com/LBRYAppDesign:7",
-  "/resources/video-lbrysdk": "https://odysee.com/@lbrytech:1/lbrynet-dev-setup:9",
-  "/specification": "/spec",
-  "/tour": "/playground",
-  "/whitepaper": "/spec"
+  // "/api/blockchain": "/api/lbrycrd",
+  // "/api/lbry": "/api/sdk",
+  // "/api/protocol": "/api/sdk",
+  // "/play": "/playground",
+  // "/repository-standards": "/resources/repository-standards",
+  // "/resources/lbry-claimtrie": "/spec#claimtrie",
+  // "/resources/schema": "/spec#metadata",
+  // "/resources/signing-claim": "/resources/claim-signing",
+  // "/resources/uri": "/spec#urls",
+  // "/resources/video-lbryandroid": "https://odysee.com/video-2018-10-15053403:e",
+  // "/resources/video-lbrycrd": "https://odysee.com/intro-to-LBRYcrd:5",
+  // "/resources/video-lbrydesktop": "https://odysee.com/LBRYAppDesign:7",
+  // "/resources/video-lbrysdk": "https://odysee.com/@lbrytech:1/lbrynet-dev-setup:9",
+  // "/specification": "/spec",
+  // "/tour": "/playground",
+  // "/whitepaper": "/spec"
+}
+
+export const API_REPOS = {
+  "lbry-sdk": "docs/api.json",
+  "lbrycrd": "contrib/devtools/generated/api_v1.json"
 }

src/layouts/Collections.astro

@@ -35,6 +35,11 @@ const isActive = (href: string)=>{
 <Layout title={frontmatter.title}>
     <div class="wrapper">
         <section class="sidebar">
+            {(headings && headings.length) ? (
+                <aside id="toc">
+                    <TableOfContents headings={headings} />
+                </aside>
+            ) : ''}
             <div class="container">
                 {items.length ? (
                     <summary>
@@ -50,15 +55,17 @@ const isActive = (href: string)=>{
         </section>
         <div class="main">
             <div class="content">
-                <aside class="toc">
-                    <TableOfContents headings={headings} edit={'src/content' + pathname + '.md'} />
-                </aside>
+                <!-- {headings && (
+                    <aside id="toc">
+                        <TableOfContents headings={headings} />
+                    </aside>
+                )} -->
                 <div class="markdown-body">
                     <h1>{frontmatter.title}</h1>
                     <h3><Fragment set:html={description}/></h3>
                     <slot/>
                     {!noedit && (
-                        <hr>
+                        <hr/>
                         <a class="edit" href={`https://github.com/${REPOSITORY}/tree/master/src/content${pathname}.mdx`} target="_blank">{EDIT_PAGE}</a>
                     )}
                 </div>
@@ -68,24 +75,29 @@ const isActive = (href: string)=>{
     <style>
         .wrapper {
             display: flex;
-            /* max-width: 1000px; */
         }
         
         .wrapper .sidebar {
             position: fixed;
             width: var(--sidebar-width);
-            height: 100vh;
+            height: 100%;
+            max-height: calc(100% - var(--nav-height));
             overflow-y: auto;
             inset-block: 0;
             inset-inline-start: 0;
+            margin-top: var(--nav-height);
+            padding-bottom: var(--nav-height);
             /* padding: 20px; */
-            padding-top: var(--nav-height);
+            // padding: var(--nav-height) 0;
             background-color: var(--secondary-background);
             transition: 0.3s;
+            z-index: 10;
         }
-
+        
         .wrapper .sidebar .container {
+            position: relative;
             padding: 1rem 1rem 0;
+            // height: calc(100vh - var(--nav-height)*2);
         }
 
         .wrapper .sidebar summary .title {
@@ -148,32 +160,56 @@ const isActive = (href: string)=>{
             margin: 1rem;
         }
 
-        .wrapper .main aside {
-            display: flex;
-            align-items: center;
-            order: 2;
-            width: fit-content;
-            max-width: 25%;
-            margin: 0 auto;
-        }
-
         .wrapper .markdown-body {
             // padding: 10px 20px;
             width: 100%;
         }
 
-        .wrapper .toc {
-            display: flex;
-            flex-direction: column;
+        .wrapper #toc {
+            position: fixed;
+            width: calc(var(--sidebar-width) - 2rem);
+            height: fit-content;
+            max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
+            inset-block: 0;
+            inset-inline-end: 2rem;
+            margin: calc(2rem + var(--nav-height)) 0;
+            // background-color: var(--secondary-background);
+            transition: 0.3s;
+            z-index: 10;
+            overflow-y: auto;
+            border-radius: 1em;
+            background-color: var(--secondary-background);
+        }
+
+        @media only screen and (max-width: 1000px) {
+            .wrapper #toc {
+                position: relative;
+                width: var(--sidebar-width);
+                max-height: unset;
+                inset-block: unset;
+                inset-inline-end: unset;
+                margin-top: 0;
+                z-index: 1;
+                background-color: transparent;
+            }
+
+            .wrapper .main {
+                padding-inline-end: unset;
+            }
         }
 
         @media only screen and (max-width: 750px) {
             .wrapper .sidebar {
-                transform: translateX(-80%);
+                transform: translateX(-100%);
             }
 
+            .wrapper .sidebar.active {
+                transform: translateX(0);
+            }
+
+
             .wrapper .main {
-                padding-inline-start: calc(var(--sidebar-width) * 0.2);
+                padding-inline-start: unset;
             }
         }
     </style>

src/layouts/Markdown.astro

@@ -17,13 +17,15 @@ const description = await markdown.parse(frontmatter.description);
 
 <Layout title={frontmatter.title}>
     <div class="wrapper">
+        <section class="sidebar">
+            {headings && (
+                <aside id="toc">
+                    <TableOfContents headings={headings} />
+                </aside>
+            )}
+        </section>
         <div class="main">
             <div class="content">
-                {headings && (
-                    <aside class="toc">
-                        <TableOfContents headings={headings} />
-                    </aside>
-                )}
                 <div class="markdown-body">
                     <h1>{frontmatter.title}</h1>
                     <h3><Fragment set:html={description}/></h3>
@@ -50,32 +52,75 @@ const description = await markdown.parse(frontmatter.description);
             margin: 1rem;
         }
 
-        .wrapper .main aside {
-            display: flex;
-            align-items: center;
-            order: 2;
-            /* max-width: 25%; */
-            margin: 0 auto;
-        }
-
         .wrapper .markdown-body {
             /* margin: 10px 20px; */
             /* max-width: 75%; */
             max-width: 100%;
         }
 
-        .wrapper .toc {
-            display: flex;
-            flex-direction: column;
+        .wrapper #toc {
+            position: fixed;
+            width: calc(var(--sidebar-width) - 2rem);
+            height: fit-content;
+            max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
+            inset-block: 0;
+            inset-inline-end: 2rem;
+            margin: calc(2rem + var(--nav-height)) 0;
+            background-color: var(--secondary-background);
+            transition: 0.3s;
+            z-index: 10;
+            overflow-y: auto;
+            border-radius: 1em;
+            background-color: var(--secondary-background);
+        }
+
+        @media only screen and (max-width: 1000px) {
+            .wrapper .sidebar {
+                position: fixed;
+                width: var(--sidebar-width);
+                height: 100%;
+                max-height: calc(100% - var(--nav-height));
+                overflow-y: auto;
+                inset-block: 0;
+                inset-inline-start: 0;
+                margin-top: var(--nav-height);
+                padding-bottom: var(--nav-height);
+                /* padding: 20px; */
+                // padding: var(--nav-height) 0;
+                background-color: var(--secondary-background);
+                transition: 0.3s;
+                z-index: 10;
+            }
+
+            .wrapper #toc {
+                position: relative;
+                width: var(--sidebar-width);
+                max-height: unset;
+                inset-block: unset;
+                inset-inline-end: unset;
+                margin-top: 0;
+                z-index: 1;
+                background-color: transparent;
+            }
+
+            .wrapper .main {
+                width: 100%;
+                padding-inline-start: var(--sidebar-width);
+            }
         }
 
         @media only screen and (max-width: 750px) {
             .wrapper .sidebar {
-                transform: translateX(-80%);
+                transform: translateX(-100%);
+            }
+
+            .wrapper .sidebar.active {
+                transform: translateX(0);
             }
 
             .wrapper .main {
-                padding-inline-start: calc(400px * 0.2);
+                width: 100%;
+                padding-inline-start: 0;
             }
         }
     </style>

src/pages/api.astro

@@ -0,0 +1,19 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+import * as config from "../config.js";
+
+---
+
+
+<Layout title="API">
+    <div class="wrapper">
+        <ul>
+            {Object.keys(config.API_REPOS).map(repo=>(
+                <li>
+                    <a href={`/api/${repo}`}>{repo}</a>
+                </li>
+            ))}
+        </ul>
+    </div>
+</Layout>

src/pages/api/[repo].astro

@@ -1,14 +1,15 @@
 ---
 import Layout from '../../layouts/Layout.astro';
+import TableOfContents from '../../components/TableOfContents.astro';
+import APIArguments from '../../components/APIArguments.astro';
+import APIExamples from '../../components/APIExamples.astro';
+
 import * as config from "../../config.js";
 import { Code } from 'astro:components';
 
 export function getStaticPaths() {
-    const repos = [
-        "lbry-sdk",
-    ]
     
-    const paths = repos.map(repo=>{
+    const paths = Object.keys(config.API_REPOS).map(repo=>{
         return {params: {repo}};
     });
 
@@ -20,44 +21,168 @@ const { repo } = Astro.params;
 const tags = (await (await fetch(`https://data.jsdelivr.com/v1/packages/gh/${config.GITHUB_ORG}/${repo}`)).json()).versions;
 tags.unshift({version: "master"});
 
-const docs = (await (await fetch(`https://cdn.jsdelivr.net/gh/${config.GITHUB_ORG}/${repo}/docs/api.json`)).json());
-console.log(docs);
+const tag = tags[0];
 
+let docs = (await (await fetch(`https://cdn.jsdelivr.net/gh/${config.GITHUB_ORG}/${repo}@${tag.version}/${config.API_REPOS[repo]}`)).json());
+
+
+// Convert lbrycrd docs to the same structure as lbry-sdk
+if (repo === 'lbrycrd') {
+    const crd = {};
+    for (let i in docs) {
+        if (!crd[docs[i].namespace]) crd[docs[i].namespace] = {
+            doc: docs[i].namespace,
+            commands: []
+        };
+        crd[docs[i].namespace].commands.push(docs[i]);
+        console.log(docs[i]);
+        
+        //docs.main[i].command = docs.main[i].name;
+    }
+    docs = crd;
+}
+
+const headings: Array<object> = [];
+
+// Generate headings
+Object.keys(docs).forEach(group=>{
+    headings.push({
+        slug: group,
+        text: group.charAt(0).toUpperCase() + group.substr(1).toLowerCase(),
+        depth: 2
+    });
+
+    docs[group].commands.forEach(cmd=>{
+        headings.push({
+            slug: cmd.name,
+            text: cmd.name,
+            depth: 3
+        });
+    })
+    
+});
 
 ---
 
 
 <Layout title={repo}>
-    <div>Looking at repo: {repo}!</div>
-    <div class="sidebar">
-        <ul>
-            {Object.keys(docs).map(header=>(
-                <li>
-                    <a href={`#${header}`}>{header}</a>
-                    {docs[header].commands.map(cmd=>(
-                        <p><a href={`#${cmd.name}`}>{cmd.name}</a></p>
-                    ))}
-                </li>
+    <div class="wrapper">
+        <section class="sidebar">
+            {(headings && headings.length) ? (
+                <aside id="toc">
+                    <TableOfContents headings={headings} />
+                </aside>
+            ) : ''}
+        </section>
+        
+        <!-- <TableOfContents headings={headings} /> -->
+        <select>
+            {tags.map(tag=>(
+                <option>{tag.version}</option>
             ))}
-        </ul>
-    </div>
-    <select>
-        {tags.map(tag=>(
-            <option>{tag.version}</option>
-        ))}
-    </select>
-    <div>
-        {Object.keys(docs).map(header=>(
-            <section>
-                <h2 id={header}>{header}</h2>
-                {docs[header].commands.map(cmd=>(
-                    <h3 id={cmd.name}>{cmd.name}</h3>
-                    <p>{cmd.description}</p>
-                    <Code lang={"json"} code={cmd.returns} />
-                    <code>
-                    </code>  
+        </select>
+        <div class="main">
+            <h1>{repo} {tag.version}</h1>
+            <p>Methods and signatures provided by {repo} are documented below. To build, download, or run the daemon, see the project
+                <a href={`https://github.com/${config.GITHUB_ORG}/${repo}/blob/${tag.version}/README.md`}>README</a>.
+            </p>
+            <div class="commands">
+                {Object.keys(docs).map(header=>(
+                    <section>
+                        <h1 id={header}>{header}</h1>
+                        {docs[header].commands.map(cmd=>(
+                            <div class:list={["command", cmd.name]}>
+                                <h2 id={cmd.name}>{cmd.name}</h2>
+                                <p>{cmd.description}</p>
+                                <APIArguments args={cmd.arguments}/>
+                                <APIExamples cmd={cmd.name} examples={cmd.examples[0]}/>
+                                <h3>Returns</h3>
+                                <Code lang={"json"} code={`${cmd.returns || "Not available."}`} class:list={["returns"]} />
+                                </div>
+                            <hr/>
+                        ))}
+                    </section>
                 ))}
-            </section>
-        ))}
+            </div>
+        </div>
     </div>
+    <style>
+        .wrapper {
+            padding: 1rem;
+        }
+
+        .wrapper .main {
+            /* width: calc(100vw - var(--sidebar-width)); */
+            padding-inline-end: var(--sidebar-width);
+            transition: 0.3s;
+            overflow-x: hidden;
+            max-width: 1750px;
+            width: calc(100%);
+        }
+
+        .commands {
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+        }
+
+        .commands section {
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+        }
+
+        .commands section .command {
+            display: flex;
+            flex-direction: column;
+            gap: 1em;
+        }
+
+        .wrapper #toc {
+            position: fixed;
+            width: calc(var(--sidebar-width) - 2rem);
+            height: fit-content;
+            max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
+            inset-block: 0;
+            inset-inline-end: 2rem;
+            margin: calc(2rem + var(--nav-height)) 0;
+            // background-color: var(--secondary-background);
+            transition: 0.3s;
+            z-index: 10;
+            overflow-y: auto;
+            border-radius: 1em;
+            background-color: var(--secondary-background);
+        }
+
+        @media only screen and (max-width: 1000px) {
+            .wrapper #toc {
+                position: relative;
+                width: var(--sidebar-width);
+                max-height: unset;
+                inset-block: unset;
+                inset-inline-end: unset;
+                margin-top: 0;
+                z-index: 1;
+                background-color: transparent;
+            }
+
+            .wrapper .main {
+                padding-inline-end: unset;
+            }
+        }
+        
+    </style>
+
+    <style is:inline>
+        .commands > section pre {
+            padding: 1em;
+            border-radius: 9px;
+            max-width: 80%;
+            background-color: var(--secondary-background) !important;
+        }
+
+        .commands > section pre code span {
+            white-space: break-spaces;
+        }
+    </style>
 </Layout>

src/styles/Header.css

@@ -41,17 +41,74 @@ header ul li:hover a {
     list-style: none;
 }
 
-header .right .menu {
+header .right #menu {
     display: none;
+    cursor: pointer;
 }
 
-@media only screen and (max-width: 600px) {
+#menu {
+    flex-direction: column;
+    /* justify-content: space-between; */
+    justify-content: center;
+    width: 2rem;
+    height: 1.5rem;
+    position: relative;
+    /* margin: 50px auto; */
+    -webkit-transition: .5s ease-in-out;
+    -moz-transition: .5s ease-in-out;
+    -o-transition: .5s ease-in-out;
+    transition: .5s ease-in-out;
+    cursor: pointer;
+    /*   border:1px solid red; */
+}
+
+#menu span {
+    display: block;
+    position: absolute;
+    height: 3px;
+    width: 100%;
+    background: var(--header-text);
+    border-radius: 9px;
+    opacity: 1;
+    left: 0;
+    transform: rotate(0deg);
+    transition: .2s ease-in-out;
+    /*   border:4px solid black; */
+}
+
+#menu span:nth-child(1) {
+    top: 0;
+}
+
+#menu span:nth-child(3) {
+    bottom: 0;
+}
+
+#menu.open span:nth-child(1) {
+    top: 50%;
+    transform: translateY(-50%);
+    transform: rotate(45deg);
+}
+
+#menu.open span:nth-child(2) {
+    width: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#menu.open span:nth-child(3) {
+    top: 50%;
+    transform: translateY(-50%);
+    transform: rotate(-45deg);
+}
+
+@media only screen and (max-width: 750px) {
     header .left ul, header  .right .search {
         display: none;
     }
 
-    header .right .menu {
-        display: block;
-        width: 25px;
+    header .right #menu {
+        display: flex;
+        /* width: 25px; */
     }
 }

src/styles/global.scss

@@ -30,12 +30,20 @@
     }
 }
 
+@media only screen and (max-width: 750px) {
+    :root {
+        --sidebar-width: 80vw;
+    }
+}
+
 * {
     margin: 0;
     box-sizing: border-box;
 }
 
-*:target{ padding-top: 100px;margin-top: -100px}
+*:target{
+    scroll-margin-top: calc(var(--nav-height) + 1em);
+}
 
 html {
     font-family: 'Roboto', sans-serif;