72 lines
3.2 KiB
Plaintext
72 lines
3.2 KiB
Plaintext
---
|
|
import type { Props as AstroProps } from 'astro';
|
|
|
|
interface Props {
|
|
tags?: string[];
|
|
}
|
|
const { tags = [] } = Astro.props;
|
|
const selectedTag = Astro.url.searchParams.get('tag');
|
|
|
|
const links = [
|
|
{ label: "github", href: "https://github.com/DerGrumpf", icon: "/github.png" },
|
|
{ label: "gitea", href: "https://git.cyperpunk.de", icon: "/git.png" },
|
|
{ label: "instagram", href: "https://www.instagram.com/dergrumpf/", icon: "/instagram.png" },
|
|
{ label: "matrix", href: "https://matrix.to/#/@dergrumpf:cyperpunk.de", icon: "/matrix.png" },
|
|
{ label: "spotify", href: "https://open.spotify.com/user/fackthatshiet?si=d502739d787e497e", icon: "/spotify.png" },
|
|
{ label: "rss", href: "/rss.xml", icon: "/rss.png" },
|
|
];
|
|
---
|
|
<div id="sidebar-inner" class="flex flex-col h-full px-4 py-6 gap-6 w-56 bg-ctp-mantle border-r border-ctp-surface">
|
|
|
|
<div id="profile" class="flex flex-col items-center gap-2 text-center">
|
|
<img src="/avatar.jpg" alt="Phil Keier" class="w-full rounded-full object-cover" />
|
|
<div id="profile-name" class="px-4">
|
|
<div class="text-ctp-text text-xl font-bold">Phil Keier</div>
|
|
<div class="text-ctp-subtext text-lg text-sm">DerGrumpf</div>
|
|
</div>
|
|
<div id="profile-tagline" class="text-ctp-subtext text-xs leading-snug">
|
|
Media Scientist, Programmer, Linux Enthusiast
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar-links" class="flex flex-wrap gap-2 justify-center">
|
|
{links.map((link) => (
|
|
<a href={link.href} class="flex items-center gap-2 text-ctp-subtext hover:text-ctp-accent text-sm transition-colors">
|
|
<img src={link.icon} alt={link.label} class="w-8 h-8 icon-mono" />
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<div id="sidebar-topics" class="flex flex-col gap-2">
|
|
<span class="section-label text-ctp-overlay text-xs uppercase tracking-widest">topics</span>
|
|
<div id="tags" class="flex flex-wrap gap-1">
|
|
{tags.map((tag) => (
|
|
<a href={`/blog?tag=${tag}`} class={`tag text-xs px-2 py-0.5 rounded-full cursor-pointer transition-colors ${selectedTag === tag ? 'bg-ctp-accent text-ctp-base' : 'bg-ctp-surface text-ctp-subtext hover:text-ctp-accent'}`}>
|
|
{tag}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="theme-switcher" class="flex gap-2 mt-auto pt-4 border-t border-ctp-surface justify-center">
|
|
<button data-flavor="mocha" class="theme-dot w-4 h-4 rounded-full bg-[#cba6f7] hover:scale-125 transition-transform" title="Mocha"></button>
|
|
<button data-flavor="macchiato" class="theme-dot w-4 h-4 rounded-full bg-[#c6a0f6] hover:scale-125 transition-transform" title="Macchiato"></button>
|
|
<button data-flavor="frappe" class="theme-dot w-4 h-4 rounded-full bg-[#ca9ee6] hover:scale-125 transition-transform" title="Frappé"></button>
|
|
<button data-flavor="latte" class="theme-dot w-4 h-4 rounded-full bg-[#8839ef] hover:scale-125 transition-transform" title="Latte"></button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const saved = localStorage.getItem('ctp-theme') ?? 'mocha';
|
|
document.documentElement.setAttribute('data-theme', saved);
|
|
|
|
document.querySelectorAll('.theme-dot').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const flavor = btn.getAttribute('data-flavor');
|
|
document.documentElement.setAttribute('data-theme', flavor);
|
|
localStorage.setItem('ctp-theme', flavor);
|
|
});
|
|
});
|
|
</script>
|