---
export interface Props {
  href?: string;
  active?: boolean;
}
const { href = "#", active = false } = Astro.props;
const hasIcon = Astro.slots.has("icon");
---

<a href={href} class={`sidebar__item ${active ? "sidebar__item--active" : ""}`}>
  {
    hasIcon && (
      <span class="sidebar__item-icon">
        <slot name="icon" />
      </span>
    )
  }
  <span class="sidebar__item-label"><slot /></span>
</a>

<style lang="scss">
  @use "./_sidebar.scss";
</style>