From e4eef33c2a7fc8f1e282bc2cf2882ab9d8f90963 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Moritz=20H=C3=B6lting?=
 <87192362+moritz-hoelting@users.noreply.github.com>
Date: Thu, 19 Mar 2026 09:35:24 +0100
Subject: [PATCH] fix wrong icons being used for mobile drawer & do not show
 empty table of contents

---
 src/components/ArticleContent.astro | 32 ++++++++++++++---------------
 src/components/Drawer.astro         | 25 ++++++++++++----------
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/components/ArticleContent.astro b/src/components/ArticleContent.astro
index 49ac5b1..c8c6658 100644
--- a/src/components/ArticleContent.astro
+++ b/src/components/ArticleContent.astro
@@ -13,22 +13,22 @@ const { Content, headings } = await render(entry);
 
 <div class="article-layout">
     <!-- Sidebar -->
-    <aside
-        class="animate toc font-departure max-w-3xl mx-auto px-5 xl:fixed xl:top-24 xl:right-[max(2rem,calc((100vw-84rem)/2))] xl:h-max xl:w-66"
-    >
-        <h3 class="font-semibold text-[0.9rem] opacity-70 mb-2">
-            On this page
-        </h3>
-        <ul class="list-none p-0 m-0">
-            {
-                headings.map((h) => (
-                    <li class={`level-${h.depth}`}>
-                        <a href={`#${h.slug}`}>{h.text}</a>
-                    </li>
-                ))
-            }
-        </ul>
-    </aside>
+    {
+        headings.length > 0 && (
+            <aside class="animate toc font-departure max-w-3xl mx-auto px-5 xl:fixed xl:top-24 xl:right-[max(2rem,calc((100vw-84rem)/2))] xl:h-max xl:w-66">
+                <h3 class="font-semibold text-[0.9rem] opacity-70 mb-2">
+                    On this page
+                </h3>
+                <ul class="list-none p-0 m-0">
+                    {headings.map((h) => (
+                        <li class={`level-${h.depth}`}>
+                            <a href={`#${h.slug}`}>{h.text}</a>
+                        </li>
+                    ))}
+                </ul>
+            </aside>
+        )
+    }
 
     <!-- Main content -->
     <Container size="md">
diff --git a/src/components/Drawer.astro b/src/components/Drawer.astro
index 2921a92..894bdeb 100644
--- a/src/components/Drawer.astro
+++ b/src/components/Drawer.astro
@@ -1,6 +1,7 @@
 ---
 import { SITE, LINKS } from "@/consts";
 import { cn } from "@/lib/utils";
+import { Icon } from "astro-icon/components";
 const { pathname } = Astro.url;
 const subpath = pathname.match(/[^/]+/g);
 ---
@@ -36,35 +37,37 @@ const subpath = pathname.match(/[^/]+/g);
             href="/search/"
             aria-label={`Search blog posts and projects on ${SITE.TITLE}`}
             class={cn(
-                "size-9 rounded-full p-2 items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out",
+                "size-9 rounded-full p-2 flex items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out",
                 pathname === "/search/" || "/" + subpath?.[0] === "search"
                     ? "pointer-events-none bg-black dark:bg-white text-white dark:text-black"
                     : "",
             )}
         >
-            <div class="text-2xl -translate-y-2">&#xf002</div>
+            <Icon name="pixelarticons:search" class:list="text-xl" />
         </a>
 
         <a
             href="/rss.xml"
             target="_blank"
             aria-label={`Rss feed for ${SITE.TITLE}`}
-            class="size-9 rounded-full p-2 items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
+            class="size-9 rounded-full p-2 flex items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
         >
-            <div class="text-2xl -translate-y-2">&#xf428</div>
+            <Icon name="pixelarticons:rss" class:list="text-xl" />
         </a>
 
         <button
             id="drawer-theme-button"
             aria-label={`Toggle light and dark theme`}
-            class="size-9 rounded-full p-2 items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
+            class="size-9 rounded-full p-2 flex items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
         >
-            <span class="block dark:hidden text-2xl -translate-y-2"
-                >&#xf522</span
-            >
-            <span class="hidden dark:block text-2xl -translate-y-2"
-                >&#xf4ee</span
-            >
+            <Icon
+                name="pixelarticons:sun"
+                class:list={"text-xl block dark:hidden"}
+            />
+            <Icon
+                name="pixelarticons:moon"
+                class:list={"text-xl hidden dark:block"}
+            />
         </button>
     </div>
 </div>