Added menu button logic to display SVG icons when clicked, along with CSS for the Drawer Component and NavigationLinks Component.

Author: PrathameshDhande22

quartz/components/Drawer.tsx

@@ -9,7 +9,19 @@ interface Options {
 export default ((opts?: Options) => {
   const Drawer: QuartzComponent = (props: QuartzComponentProps) => {
     const links = opts?.links ?? []
-    return <div class="drawer">Drawer</div>
+    return (
+      <div class="drawer">
+        <div class="drawer-wrapper">
+          <ul class="links">
+            {Object.entries(links).map(([text, link]) => (
+              <li>
+                <a href={link}>{text}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    )
   }
 
   Drawer.css = style

quartz/components/NavigationLinks.tsx

@@ -11,9 +11,30 @@ interface Options {
 export default ((opts?: Options) => {
   const NavigationLinks: QuartzComponent = (props: QuartzComponentProps) => {
     const links = opts?.links ?? []
+    let crossactive = false
+
     return (
       <nav class="nav-links">
-        <button className="menu-btn">Menu</button>
+        <button className="menu-btn">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="hamburger active"
+          >
+            <line x1="4" x2="20" y1="12" y2="12" />
+            <line x1="4" x2="20" y1="6" y2="6" />
+            <line x1="4" x2="20" y1="18" y2="18" />
+          </svg>
+          <svg width="24" height="24" class="cross">
+            <line x1="5" y1="5" x2="19" y2="19" stroke-width="2" />
+            <line x1="19" y1="5" x2="5" y2="19" stroke-width="2" />
+          </svg>
+        </button>
         <ul class="links">
           {Object.entries(links).map(([text, link]) => (
             <li>

quartz/components/scripts/drawer.inline.ts

@@ -2,4 +2,23 @@ let drawer = document.getElementsByClassName("drawer")[0]
 
 document.getElementsByClassName("menu-btn")[0].addEventListener("click", () => {
     drawer.classList.toggle("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/navigationlinks.inline.ts

@@ -7,16 +7,18 @@
     width: 100vw;
     transform: translateX(-100%);
     transition: transform 0.3s ease;
-    height: 100vh;
+    height: 90vh;
     background-color: rgba(0, 0, 0, 0.5);
     color: var(--gray);
     z-index: 600;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     box-shadow:
         rgba(85, 86, 86, 0.48) 6px 2px 16px 0px,
         rgba(0, 0, 0, 0.8) -6px -2px 16px 0px;
 
     &.active {
-        display: block;
         transform: translateX(0);
         @media all and ($tablet) {
             transform: translateX(-100%);
@@ -27,3 +29,35 @@
         }
     }
 }
+
+.drawer-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 80%;
+    height: 90%;
+    background-color: var(--light);
+
+    & > .links {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 5px;
+        padding-left: 0;
+
+        & > li {
+            list-style: none;
+            text-align: center;
+            display: inline-block;
+            font-size: 18px;
+            padding: 0 6px;
+
+            & > a {
+                display: inline-block;
+                text-decoration: none;
+                color: inherit;
+                padding: 2px 0;
+            }
+        }
+    }
+}

quartz/components/styles/drawer.scss

@@ -14,10 +14,9 @@
 
     & .menu-btn {
         display: none;
-        padding: 5px 20px;
+        padding-top: 5px;
         background-color: var(--light);
-        border: 1px solid var(--tertiary);
-        border-radius: 30px;
+        border: none;
         font-family: var(--bodyFont);
         font-size: 15px;
         outline: none;
@@ -27,10 +26,8 @@
             cursor: pointer;
         }
 
-        &:hover {
-            background-color: var(--tertiary);
-            transition: background-color 0.3s ease-in;
-            color: var(--light);
+        & > .active {
+            display: inline;
         }
     }
 
@@ -76,3 +73,8 @@
         width: 100%;
     }
 }
+.hamburger,
+.cross {
+    stroke: var(--darkgray);
+    display: none;
+}