src/components/Header.astro

@@ -16,10 +16,6 @@ const isActive = (href: string)=>{
     return href === pathname || href === pathname.split('/').slice(0,2).join('/');
 }
 
-function handleMenu(e) {
-  console.log(e);
-}
-
 ---
 
 <header>
@@ -38,25 +34,8 @@ function handleMenu(e) {
       </ul>
     </div>
     <div class="right">
-        <div class="search"><p>Search TODO</p></div>
+      <div class="search"><p>Search TODO</p></div>
-        <btn id="menu">
+      <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>
-            <span></span>
-            <span></span>
-            <span></span>
-        </btn>
     </div>
   </nav>
 </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,10 +3,12 @@
 import TableOfContentsHeading from "./TableOfContentsHeading.astro";
 import TocItem from '../utils/generateToc.ts';
 const { headings, edit } = Astro.props;
-import { REPOSITORY } from "../config";
+import { REPOSITORY, edit_page } from "../config";
 
 const toc = headings && headings.length ? TocItem(headings) : [];
 
+console.log(edit);
+
 ---
 
 <section class="toc">
@@ -21,12 +23,19 @@ const toc = headings && headings.length ? TocItem(headings) : [];
 </section>
 <style is:inline>
     .toc {
+        position: fixed;
         width: calc(var(--sidebar-width) - 2rem);
-        height: 100%;
+        height: fit-content;
-        overflow-y: scroll;
+        overflow-y: auto;
-        /* max-height: 80%; */
+        max-height: calc(100vh - var(--nav-height) - 2rem * 2);
-        /* inset-block: 0; */
+        inset-block: 0;
+        inset-inline-end: 2rem;
+        margin-top: calc(2rem + var(--nav-height));
+        margin-bottom: 2rem;
+        border-radius: 1em;
+        background-color: var(--secondary-background);
         transition: 0.3s;
+        z-index: 10;
     }
     
     .toc .container {
@@ -58,12 +67,12 @@ const toc = headings && headings.length ? TocItem(headings) : [];
     }
 
     @media only screen and (max-width: 750px) {
-        /* .toc {
+        .toc {
             margin-top: var(--nav-height);
             margin-bottom: 0;
             inset-inline-start: 0;
             inset-inline-end: unset;
             transform: translateX(-100%);
-        } */
+        }
     }
 </style>

src/layouts/Collections.astro

@@ -35,11 +35,6 @@ 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>
@@ -55,17 +50,15 @@ const isActive = (href: string)=>{
         </section>
         <div class="main">
             <div class="content">
-                <!-- {headings && (
+                <aside id="toc">
-                    <aside id="toc">
+                    <TableOfContents headings={headings} edit={'src/content' + pathname + '.md'} />
-                        <TableOfContents headings={headings} />
+                </aside>
-                    </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>
@@ -75,29 +68,24 @@ const isActive = (href: string)=>{
     <style>
         .wrapper {
             display: flex;
+            /* max-width: 1000px; */
         }
         
         .wrapper .sidebar {
             position: fixed;
             width: var(--sidebar-width);
-            height: 100%;
+            height: 100vh;
-            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;
+            padding-top: var(--nav-height);
             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 {
@@ -160,42 +148,23 @@ 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 {
-            position: fixed;
+            display: flex;
-            width: calc(var(--sidebar-width) - 2rem);
+            flex-direction: column;
-            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) {
@@ -203,13 +172,9 @@ const isActive = (href: string)=>{
                 transform: translateX(-100%);
             }
 
-            .wrapper .sidebar.active {
-                transform: translateX(0);
-            }
-
-
             .wrapper .main {
                 padding-inline-start: unset;
+                padding-inline-end: unset;
             }
         }
     </style>

src/layouts/Markdown.astro

@@ -17,15 +17,13 @@ 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>
@@ -52,75 +50,32 @@ 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 {
+        .wrapper .toc {
-            position: fixed;
+            display: flex;
-            width: calc(var(--sidebar-width) - 2rem);
+            flex-direction: column;
-            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(-100%);
+                transform: translateX(-80%);
-            }
-
-            .wrapper .sidebar.active {
-                transform: translateX(0);
             }
 
             .wrapper .main {
-                width: 100%;
+                padding-inline-start: calc(400px * 0.2);
-                padding-inline-start: 0;
             }
         }
     </style>

src/styles/Header.css

@@ -41,74 +41,17 @@ header ul li:hover a {
     list-style: none;
 }
 
-header .right #menu {
+header .right .menu {
     display: none;
-    cursor: pointer;
 }
 
-#menu {
+@media only screen and (max-width: 600px) {
-    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 {
+    header .right .menu {
-        display: flex;
+        display: block;
-        /* width: 25px; */
+        width: 25px;
     }
 }

src/styles/global.scss

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