---
import { navSections, githubUrl, githubIcon } from '../nav';
interface Props {
currentPath: string;
}
const { currentPath } = Astro.props;
const current = currentPath.replace(/\/+$/, '') || '/';
---
<div class="p-6 border-b border-border">
<a href="/" class="flex items-center gap-3">
<div
class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg flex items-center justify-center"
>
<span class="text-white font-bold text-xl">P</span>
</div>
<div>
<span class="text-xl font-bold text-foreground">Prax</span>
<span class="text-xs text-muted block -mt-1">ORM for Rust</span>
</div>
</a>
</div>
<nav class="flex-1 overflow-y-auto p-4">
<div class="space-y-6">
{
navSections.map((section) => (
<div>
<h3 class="text-xs font-semibold text-muted uppercase tracking-wider mb-2 px-3">
{section.title}
</h3>
<ul class="space-y-1">
{section.items.map((item) => (
<li>
<a
href={item.href}
class:list={[
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm hover:bg-surface-elevated transition-colors',
{ 'bg-primary-500/10 text-primary-400': current === item.href },
]}
>
{item.iconFill ? (
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
{item.icon.map((d) => (
<path d={d} />
))}
</svg>
) : (
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{item.icon.map((d) => (
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d={d}
/>
))}
</svg>
)}
{item.label}
</a>
</li>
))}
</ul>
</div>
))
}
</div>
</nav>
<div class="p-4 border-t border-border">
<a
href={githubUrl}
target="_blank"
class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-muted hover:text-foreground hover:bg-surface-elevated transition-colors"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d={githubIcon}></path>
</svg>
<span>GitHub</span>
</a>
</div>