fix: mobile menu

Ultramarine-Linux · Feb 3, 2024 · d4c94a6 · d4c94a6
1 parent 450b8b4
commit d4c94a6
Showing 1 changed file with 31 additions and 30 deletions.
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -40,10 +40,9 @@ const githubEditUrl = `${GITHUB_EDIT_URL}/${currentFile}`;
       .layout {
         display: grid;
         grid-auto-flow: column;
-        grid-template-columns: minmax(var(--gutter), 1fr) minmax(
-            0,
-            var(--max-width)
-          ) minmax(var(--gutter), 1fr);
+        grid-template-columns:
+          minmax(var(--gutter), 1fr) minmax(0, var(--max-width))
+          minmax(var(--gutter), 1fr);
         overflow-x: hidden;
       }
 
@@ -113,7 +112,8 @@ const githubEditUrl = `${GITHUB_EDIT_URL}/${currentFile}`;
       }
 
       .mobile-sidebar-toggle #grid-left {
-        display: block;
+        /* Hack :( */
+        display: block !important;
         top: 2rem;
         padding-left: 1rem;
         padding-right: 1rem;
@@ -141,36 +141,37 @@ const githubEditUrl = `${GITHUB_EDIT_URL}/${currentFile}`;
       </aside>
     </main>
     <Footer path={currentFile} />
-  </body><script is:inline>
-    const copyButtonLabel = "Copy Code";
+    <script is:inline>
+      const copyButtonLabel = "Copy Code";
 
-    // use a class selector if available
-    let blocks = document.querySelectorAll("pre");
+      // use a class selector if available
+      let blocks = document.querySelectorAll("pre");
 
-    blocks.forEach((block) => {
-      // only add button if browser supports Clipboard API
-      if (navigator.clipboard) {
-        let button = document.createElement("button");
-        button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M16 4h2a2 2 0 0 1 2 2v4m1 4H11"/><path d="m15 10l-4 4l4 4"/></g></svg>`;
+      blocks.forEach((block) => {
+        // only add button if browser supports Clipboard API
+        if (navigator.clipboard) {
+          let button = document.createElement("button");
+          button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M16 4h2a2 2 0 0 1 2 2v4m1 4H11"/><path d="m15 10l-4 4l4 4"/></g></svg>`;
 
-        block.appendChild(button);
+          block.appendChild(button);
 
-        button.addEventListener("click", async () => {
-          button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="#389c57" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14l2 2l4-4"/></g></svg>`;
-          await copyCode(block);
+          button.addEventListener("click", async () => {
+            button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="#389c57" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14l2 2l4-4"/></g></svg>`;
+            await copyCode(block);
 
-          setTimeout(() => {
-            button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M16 4h2a2 2 0 0 1 2 2v4m1 4H11"/><path d="m15 10l-4 4l4 4"/></g></svg>`;
-          }, 1500);
-        });
-      }
-    });
+            setTimeout(() => {
+              button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M16 4h2a2 2 0 0 1 2 2v4m1 4H11"/><path d="m15 10l-4 4l4 4"/></g></svg>`;
+            }, 1500);
+          });
+        }
+      });
 
-    async function copyCode(block) {
-      let code = block.querySelector("code");
-      let text = code.innerText;
+      async function copyCode(block) {
+        let code = block.querySelector("code");
+        let text = code.innerText;
 
-      await navigator.clipboard.writeText(text);
-    }
-  </script>
+        await navigator.clipboard.writeText(text);
+      }
+    </script>
+  </body>
 </html>