SidebarItem

/**
 * Canonical CSP-S6 SidebarItem fixture — one nav row exercising every region
 * React's SidebarItem exposes: the leading `icon`, the label, and the mono
 * `count` at the trailing edge, on the current route (`active`).
 *
 * `icon`/`count` are plain strings; each adapter wraps them in the same
 * elements (`<span aria-hidden="true">` for the glyph, `<span>` for the count)
 * so the five mounts produce identical DOM.
 */
const sidebarItemFixture = {
  id: "sidebar-item",
  label: "Services",
  icon: "▦",
  count: "38",
  active: true,
} satisfies {
  id: string;
  label: string;
  icon: string;
  count: string;
  active: boolean;
};
 
import { Sidebar, SidebarItem } from "@grassroot/ui-react";
 
export default function SidebarItemDemo() {
  return (
    <div>
      <Sidebar>
        <SidebarItem
          active={sidebarItemFixture.active}
          icon={<span aria-hidden="true">{sidebarItemFixture.icon}</span>}
          count={<span>{sidebarItemFixture.count}</span>}
        >
          {sidebarItemFixture.label}
        </SidebarItem>
      </Sidebar>
    </div>
  );
}

<script setup lang="ts">
/**
 * Canonical CSP-S6 SidebarItem fixture — one nav row exercising every region
 * React's SidebarItem exposes: the leading `icon`, the label, and the mono
 * `count` at the trailing edge, on the current route (`active`).
 *
 * `icon`/`count` are plain strings; each adapter wraps them in the same
 * elements (`<span aria-hidden="true">` for the glyph, `<span>` for the count)
 * so the five mounts produce identical DOM.
 */
const sidebarItemFixture = {
  id: "sidebar-item",
  label: "Services",
  icon: "▦",
  count: "38",
  active: true,
} satisfies {
  id: string;
  label: string;
  icon: string;
  count: string;
  active: boolean;
};
 
import { Sidebar, SidebarItem } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Sidebar>
      <SidebarItem :active="sidebarItemFixture.active"
        ><template #icon
          ><span aria-hidden="true">{{ sidebarItemFixture.icon }}</span></template
        ><template #count
          ><span>{{ sidebarItemFixture.count }}</span></template
        >{{ sidebarItemFixture.label }}</SidebarItem
      >
    </Sidebar>
  </div>
</template>

import { Component } from "@angular/core";
/**
 * Canonical CSP-S6 SidebarItem fixture — one nav row exercising every region
 * React's SidebarItem exposes: the leading `icon`, the label, and the mono
 * `count` at the trailing edge, on the current route (`active`).
 *
 * `icon`/`count` are plain strings; each adapter wraps them in the same
 * elements (`<span aria-hidden="true">` for the glyph, `<span>` for the count)
 * so the five mounts produce identical DOM.
 */
const sidebarItemFixture = {
  id: "sidebar-item",
  label: "Services",
  icon: "▦",
  count: "38",
  active: true,
} satisfies {
  id: string;
  label: string;
  icon: string;
  count: string;
  active: boolean;
};
 
import {
  GrassrootSidebar,
  GrassrootSidebarCount,
  GrassrootSidebarIcon,
  GrassrootSidebarItem,
} from "@grassroot/ui-angular";
 
@Component({
  selector: "app-sidebar-item-demo",
  standalone: true,
  imports: [GrassrootSidebar, GrassrootSidebarItem, GrassrootSidebarIcon, GrassrootSidebarCount],
  template: `
    <div>
      <grassroot-sidebar>
        <grassroot-sidebar-item [active]="fixture.active"
          ><span grassrootSidebarIcon aria-hidden="true">{{ fixture.icon }}</span
          >{{ fixture.label
          }}<span grassrootSidebarCount>{{ fixture.count }}</span></grassroot-sidebar-item
        >
      </grassroot-sidebar>
    </div>
  `,
})
export class SidebarItemDemoComponent {
  protected readonly fixture = sidebarItemFixture;
}
 
export default SidebarItemDemoComponent;

<script lang="ts">
  /**
   * Canonical CSP-S6 SidebarItem fixture — one nav row exercising every region
   * React's SidebarItem exposes: the leading `icon`, the label, and the mono
   * `count` at the trailing edge, on the current route (`active`).
   *
   * `icon`/`count` are plain strings; each adapter wraps them in the same
   * elements (`<span aria-hidden="true">` for the glyph, `<span>` for the count)
   * so the five mounts produce identical DOM.
   */
  const sidebarItemFixture = {
    id: "sidebar-item",
    label: "Services",
    icon: "▦",
    count: "38",
    active: true,
  } satisfies {
    id: string;
    label: string;
    icon: string;
    count: string;
    active: boolean;
  };
 
  import { Sidebar, SidebarItem } from "@grassroot/ui-svelte";
</script>
 
<div>
  <Sidebar>
    {#snippet children()}
      <SidebarItem active={sidebarItemFixture.active}>
        {#snippet icon()}<span aria-hidden="true">{sidebarItemFixture.icon}</span>{/snippet}
        {#snippet count()}<span>{sidebarItemFixture.count}</span>{/snippet}
        {#snippet children()}{sidebarItemFixture.label}{/snippet}
      </SidebarItem>
    {/snippet}
  </Sidebar>
</div>

/** @jsxImportSource solid-js */
import type { JSX } from "solid-js";
/**
 * Canonical CSP-S6 SidebarItem fixture — one nav row exercising every region
 * React's SidebarItem exposes: the leading `icon`, the label, and the mono
 * `count` at the trailing edge, on the current route (`active`).
 *
 * `icon`/`count` are plain strings; each adapter wraps them in the same
 * elements (`<span aria-hidden="true">` for the glyph, `<span>` for the count)
 * so the five mounts produce identical DOM.
 */
const sidebarItemFixture = {
  id: "sidebar-item",
  label: "Services",
  icon: "▦",
  count: "38",
  active: true,
} satisfies {
  id: string;
  label: string;
  icon: string;
  count: string;
  active: boolean;
};
 
import { Sidebar, SidebarItem } from "@grassroot/ui-solid";
 
export default function SidebarItemDemo(): JSX.Element {
  return (
    <div>
      <Sidebar>
        <SidebarItem
          active={sidebarItemFixture.active}
          icon={<span aria-hidden="true">{sidebarItemFixture.icon}</span>}
          count={<span>{sidebarItemFixture.count}</span>}
        >
          {sidebarItemFixture.label}
        </SidebarItem>
      </Sidebar>
    </div>
  );
}