make toc a floating element

src/components/TableOfContents.astro

@@ -24,21 +24,25 @@ console.log(edit);
 <style is:inline>
     .toc {
         position: fixed;
-        width: var(--sidebar-width);
-        height: 100vh;
+        width: calc(var(--sidebar-width) - 2rem);
+        height: fit-content;
         overflow-y: auto;
+        max-height: calc(100vh - var(--nav-height) - 2rem * 2);
         inset-block: 0;
-        inset-inline-end: 0;
-        padding-top: var(--nav-height);
+        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 {
         display: flex;
         flex-direction: column;
         padding: 1rem 1rem 0;
+        overflow-y: auto;
     }
 
     .toc .container summary {
@@ -60,6 +64,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/layouts/Collections.astro

@@ -50,7 +50,7 @@ const isActive = (href: string)=>{
         </section>
         <div class="main">
             <div class="content">
-                <aside class="toc">
+                <aside id="toc">
                     <TableOfContents headings={headings} edit={'src/content' + pathname + '.md'} />
                 </aside>
                 <div class="markdown-body">
@@ -162,18 +162,19 @@ const isActive = (href: string)=>{
             width: 100%;
         }
 
-        .wrapper .toc {
+        .wrapper #toc {
             display: flex;
             flex-direction: column;
         }
 
         @media only screen and (max-width: 750px) {
             .wrapper .sidebar {
-                transform: translateX(-80%);
+                transform: translateX(-100%);
             }
 
             .wrapper .main {
-                padding-inline-start: calc(var(--sidebar-width) * 0.2);
+                padding-inline-start: unset;
+                padding-inline-end: unset;
             }
         }
     </style>