moritz
/
portfolio-webpage
mirror of https://github.com/moritz-hoelting/portfolio-webpage.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix wrong icons being used for mobile drawer & do not show empty table of contents

This commit is contained in:
Moritz Hölting 2026-03-19 09:35:24 +01:00
parent e08382939e
commit e4eef33c2a
2 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ArticleContent.astro
View File

@ -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">

25
src/components/Drawer.astro
View File

@ -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>