Drawer Component with All Patterns links in the Drawer

Author: PrathameshDhande22

quartz.layout.ts

@@ -16,7 +16,15 @@ export const sharedPageComponents: SharedLayout = {
     Component.Darkmode()
   ],
   head: Component.Head(),
-  header: [],
+  header: [Component.MobileOnly(
+    Component.Drawer({
+      links: {
+        Blogs: "/blogs",
+        Github: "https://github.com/PrathameshDhande22/Java-Tutorial",
+        "About Me": "https://github.com/PrathameshDhande22"
+      }
+    })
+  )],
   afterBody: [],
   footer: Component.Footer({
     links: {
@@ -35,15 +43,6 @@ export const defaultContentPageLayout: PageLayout = {
     Component.TagList(),
   ],
   left: [
-    Component.MobileOnly(
-      Component.Drawer({
-        links: {
-          Blogs: "/blogs",
-          Github: "https://github.com/PrathameshDhande22/Java-Tutorial",
-          "About Me": "https://github.com/PrathameshDhande22"
-        }
-      })
-    ),
     Component.Search(),
     Component.DesktopOnly(
       Component.Explorer({

quartz/components/Drawer.tsx

@@ -1,30 +1,76 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/drawer.scss"
 // @ts-ignore
+import script from "./scripts/drawer.inline"
+import TableOfContents from "./TableOfContents"
+import { classNames } from "../util/lang"
+import { FileNode } from "./ExplorerNode"
+import { resolveRelative } from "../util/path"
 
 interface Options {
   links?: Record<string, string>
 }
 
 export default ((opts?: Options) => {
-  const Drawer: QuartzComponent = (props: QuartzComponentProps) => {
+  const Drawer: QuartzComponent = ({ displayClass, fileData, allFiles }: QuartzComponentProps) => {
     const links = opts?.links ?? []
+    const fileTree = new FileNode("")
+    allFiles.forEach((file) => fileTree.add(file))
+
     return (
       <div class="drawer">
         <div class="drawer-wrapper">
+          <h3 class="drawer-title">MENU</h3>
           <ul class="links">
             {Object.entries(links).map(([text, link]) => (
               <li>
                 <a href={link}>{text}</a>
               </li>
             ))}
           </ul>
+          <div class={classNames(displayClass, "toc")}>
+            <button
+              type="button"
+              id="toc"
+              class={fileData.collapseToc ? "collapsed" : ""}
+              aria-controls="toc-content"
+              aria-expanded={!fileData.collapseToc}
+            >
+              <h3>Patterns</h3>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="fold"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </button>
+            <div id="toc-content" class={fileData.collapseToc ? "collapsed" : ""}>
+              <ul class="overflow">
+                {allFiles.map((value) => {
+                  return (
+                    <li key={value.slug}>
+                      <a href={resolveRelative(value.slug!, value.slug!)} data-for={value.slug}>{value.frontmatter?.title}</a>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
     )
   }
 
   Drawer.css = style
+  Drawer.afterDOMLoaded = script
 
   return Drawer
 }) satisfies QuartzComponentConstructor

quartz/components/scripts/drawer.inline.ts

@@ -0,0 +1,9 @@
+import { assignActiveClassToDrawerButton } from "./util"
+
+const drawerele = document.querySelector(".drawer")
+drawerele?.addEventListener("click", () => {
+    drawerele.classList.remove("active")
+
+    const isdrawerActive: boolean = drawerele.classList.contains("active")
+    assignActiveClassToDrawerButton(isdrawerActive)
+})

quartz/components/scripts/navigationlinks.inline.ts

@@ -1,24 +1,11 @@
+import { assignActiveClassToDrawerButton } from "./util"
+
 let drawer = document.getElementsByClassName("drawer")[0]
 
 document.getElementsByClassName("menu-btn")[0].addEventListener("click", () => {
-    drawer.classList.toggle("active")
+    drawer.classList.add("active")
 
     const isdrawerActive: boolean = drawer.classList.contains("active")
     assignActiveClassToDrawerButton(isdrawerActive)
 })
 
-function assignActiveClassToDrawerButton(isactive: boolean) {
-    const hamburgersvg = document.querySelector(".hamburger")
-
-    const cross = document.querySelector(".cross")
-
-    if (isactive) {
-        cross?.classList.add("active")
-        hamburgersvg?.classList.remove("active")
-
-    } else {
-        cross?.classList.remove("active")
-        hamburgersvg?.classList.add("active")
-
-    }
-}

quartz/components/scripts/util.ts

@@ -43,3 +43,20 @@ export async function fetchCanonical(url: URL): Promise<Response> {
   const [_, redirect] = text.match(canonicalRegex) ?? []
   return redirect ? fetch(`${new URL(redirect, url)}`) : res
 }
+
+export function assignActiveClassToDrawerButton(isactive: boolean) {
+  const hamburgersvg = document.querySelector(".hamburger")
+  const cross = document.querySelector(".cross")
+
+  if (isactive) {
+    cross?.classList.add("active")
+    hamburgersvg?.classList.remove("active")
+    document.body.style.overflow = "hidden"
+    document.body.style.height = "100vh"
+  } else {
+    cross?.classList.remove("active")
+    hamburgersvg?.classList.add("active")
+    document.body.style.overflow = "auto"
+    document.body.style.height = "100%"
+  }
+}

quartz/components/styles/drawer.scss

@@ -2,12 +2,12 @@
 
 .drawer {
     position: fixed;
-    top: 60px;
+    top: 0px;
     right: 0;
     width: 100vw;
     transform: translateX(-100%);
     transition: transform 0.3s ease;
-    height: 90vh;
+    height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
     color: var(--gray);
     z-index: 600;
@@ -30,27 +30,34 @@
     }
 }
 
+.drawer-title{
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    text-align: center;
+    color: var(--secondary);
+}
+
 .drawer-wrapper {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    width: 80%;
-    height: 90%;
+    width: 70%;
+    height: 85%;
+    padding: 10px 10px 10px 20px;
     background-color: var(--light);
 
     & > .links {
         display: flex;
         flex-direction: column;
         justify-content: center;
         gap: 5px;
-        padding-left: 0;
+        padding: 0;
+        margin: 0;
 
         & > li {
             list-style: none;
-            text-align: center;
             display: inline-block;
             font-size: 18px;
-            padding: 0 6px;
 
             & > a {
                 display: inline-block;