---
import NotchedBox from './NotchedBox.astro';
import NoteHierarchy from './NoteHierarchy.astro';

const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
const isActive = pathname.startsWith("notes");
---
<NotchedBox fillNotches={isActive ? 'left' : 'none'}>
  <div class="notes-header">Notes</div>
  <div class="note-links">
    <NoteHierarchy prefix="/notes" />
  </div>
</NotchedBox>

<style>
  .notes-header {
    color: var(--color-light-text);
    font-size: var(--font-size-lg);
  }
  .note-links {
    margin-left: 8px;
  }
</style>