web/src/components/Sidebar.astro - main - AlexandrNarbaev/ThePath

web/src/components/Sidebar.astro
45 строк2 KB
AlexandrNarbaev
fix: all internal links use /ThePath base, language switch fixed
31 май 2026, 18:21
31 май 2026, 18:213225921
---
import { t, type Lang } from '../i18n/ui';
import { modules } from '../i18n/modules';
const { lang, currentModule } = Astro.props as { lang: Lang; currentModule?: number };
const base = '/ThePath';
---

<aside class="sidebar" id="sidebar">
  <button class="sidebar-toggle" onclick="document.getElementById('sidebar')?.classList.toggle('open')">
    {t('sidebar.toggle', lang)}
  </button>
  <nav class="sidebar-nav">
    <h3 class="sidebar-title">{t('sidebar.title', lang)}</h3>
    <ul>
      {modules.map(m => (
        <li class:list={['sidebar-item', { active: currentModule === m.number }]}>
          <a href={`${base}/${lang}/modules/${m.slug}`}>
            <span class="sidebar-num">{m.number}</span>
            <span class="sidebar-module-title">{m.title[lang]}</span>
          </a>
        </li>
      ))}
    </ul>
  </nav>
</aside>

<style>
  .sidebar { width: var(--sidebar-width); flex-shrink: 0; border-right: 1px solid var(--color-border); background: var(--color-bg-secondary); position: sticky; top: 59px; height: calc(100vh - 59px); overflow-y: auto; }
  .sidebar-toggle { display: none; width: 100%; padding: 0.75rem; border: none; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); font-size: 0.9rem; cursor: pointer; color: var(--color-text-secondary); text-align: left; }
  .sidebar-nav { padding: 1.25rem 0.75rem; }
  .sidebar-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); padding: 0 0.75rem 0.75rem; margin: 0; }
  .sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
  .sidebar-item { margin-bottom: 0.125rem; }
  .sidebar-item a { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.85rem; text-decoration: none; color: var(--color-text-secondary); transition: all 0.15s; }
  .sidebar-item a:hover { background: var(--color-card-bg); color: var(--color-text-primary); }
  .sidebar-item.active a { background: var(--color-accent); color: white; font-weight: 500; }
  .sidebar-num { font-size: 0.7rem; opacity: 0.6; min-width: 1.2em; text-align: right; }
  .sidebar-module-title { flex: 1; }
  @media (max-width: 768px) {
    .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--color-border); }
    .sidebar-toggle { display: block; }
    .sidebar-nav { display: none; }
    .sidebar.open .sidebar-nav { display: block; }
  }
</style>