SidebarContent

interface SidebarContentFixture {
  id: string;
  title: string;
  items: Array<{ label: string; icon: string; active?: boolean }>;
}
 
/**
 * Canonical CSP-S6 SidebarContent fixture — the scrolling nav region on its
 * own, holding one titled section so the demo shows the region's own chrome
 * rather than an empty `<nav>`.
 */
const sidebarContentFixture: SidebarContentFixture = {
  id: "sidebar-content",
  title: "Platform",
  items: [
    { label: "Services", icon: "▦", active: true },
    { label: "Deploys", icon: "↑" },
  ],
};
 
import { Sidebar, SidebarContent, SidebarItem, SidebarSection } from "@grassroot/ui-react";
 
export default function SidebarContentDemo() {
  return (
    <div>
      <Sidebar>
        <SidebarContent>
          <SidebarSection title={sidebarContentFixture.title}>
            {sidebarContentFixture.items.map((item) => (
              <SidebarItem
                key={item.label}
                active={item.active}
                icon={<span aria-hidden="true">{item.icon}</span>}
              >
                {item.label}
              </SidebarItem>
            ))}
          </SidebarSection>
        </SidebarContent>
      </Sidebar>
    </div>
  );
}

<script setup lang="ts">
interface SidebarContentFixture {
  id: string;
  title: string;
  items: Array<{ label: string; icon: string; active?: boolean }>;
}
 
/**
 * Canonical CSP-S6 SidebarContent fixture — the scrolling nav region on its
 * own, holding one titled section so the demo shows the region's own chrome
 * rather than an empty `<nav>`.
 */
const sidebarContentFixture: SidebarContentFixture = {
  id: "sidebar-content",
  title: "Platform",
  items: [
    { label: "Services", icon: "▦", active: true },
    { label: "Deploys", icon: "↑" },
  ],
};
 
import { Sidebar, SidebarContent, SidebarItem, SidebarSection } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Sidebar>
      <SidebarContent>
        <SidebarSection :title="sidebarContentFixture.title">
          <SidebarItem
            v-for="item in sidebarContentFixture.items"
            :key="item.label"
            :active="item.active"
            ><template #icon
              ><span aria-hidden="true">{{ item.icon }}</span></template
            >{{ item.label }}</SidebarItem
          >
        </SidebarSection>
      </SidebarContent>
    </Sidebar>
  </div>
</template>

import { Component } from "@angular/core";
interface SidebarContentFixture {
  id: string;
  title: string;
  items: Array<{ label: string; icon: string; active?: boolean }>;
}
 
/**
 * Canonical CSP-S6 SidebarContent fixture — the scrolling nav region on its
 * own, holding one titled section so the demo shows the region's own chrome
 * rather than an empty `<nav>`.
 */
const sidebarContentFixture: SidebarContentFixture = {
  id: "sidebar-content",
  title: "Platform",
  items: [
    { label: "Services", icon: "▦", active: true },
    { label: "Deploys", icon: "↑" },
  ],
};
 
import {
  GrassrootSidebar,
  GrassrootSidebarContent,
  GrassrootSidebarIcon,
  GrassrootSidebarItem,
  GrassrootSidebarSection,
} from "@grassroot/ui-angular";
 
@Component({
  selector: "app-sidebar-content-demo",
  standalone: true,
  imports: [
    GrassrootSidebar,
    GrassrootSidebarContent,
    GrassrootSidebarItem,
    GrassrootSidebarSection,
    GrassrootSidebarIcon,
  ],
  template: `
    <div>
      <grassroot-sidebar>
        <grassroot-sidebar-content>
          <grassroot-sidebar-section [title]="fixture.title">
            @for (item of fixture.items; track item.label) {
              <grassroot-sidebar-item [active]="!!item.active"
                ><span grassrootSidebarIcon aria-hidden="true">{{ item.icon }}</span
                >{{ item.label }}</grassroot-sidebar-item
              >
            }
          </grassroot-sidebar-section>
        </grassroot-sidebar-content>
      </grassroot-sidebar>
    </div>
  `,
})
export class SidebarContentDemoComponent {
  protected readonly fixture = sidebarContentFixture;
}
 
export default SidebarContentDemoComponent;

<script lang="ts">
  interface SidebarContentFixture {
    id: string;
    title: string;
    items: Array<{ label: string; icon: string; active?: boolean }>;
  }
 
  /**
   * Canonical CSP-S6 SidebarContent fixture — the scrolling nav region on its
   * own, holding one titled section so the demo shows the region's own chrome
   * rather than an empty `<nav>`.
   */
  const sidebarContentFixture: SidebarContentFixture = {
    id: "sidebar-content",
    title: "Platform",
    items: [
      { label: "Services", icon: "▦", active: true },
      { label: "Deploys", icon: "↑" },
    ],
  };
 
  import { Sidebar, SidebarContent, SidebarItem, SidebarSection } from "@grassroot/ui-svelte";
</script>
 
<div>
  <Sidebar>
    {#snippet children()}
      <SidebarContent>
        {#snippet children()}
          <SidebarSection title={sidebarContentFixture.title}>
            {#snippet children()}
              {#each sidebarContentFixture.items as item (item.label)}
                <SidebarItem active={item.active}>
                  {#snippet icon()}<span aria-hidden="true">{item.icon}</span>{/snippet}
                  {#snippet children()}{item.label}{/snippet}
                </SidebarItem>
              {/each}
            {/snippet}
          </SidebarSection>
        {/snippet}
      </SidebarContent>
    {/snippet}
  </Sidebar>
</div>

/** @jsxImportSource solid-js */
import { For, type JSX } from "solid-js";
interface SidebarContentFixture {
  id: string;
  title: string;
  items: Array<{ label: string; icon: string; active?: boolean }>;
}
 
/**
 * Canonical CSP-S6 SidebarContent fixture — the scrolling nav region on its
 * own, holding one titled section so the demo shows the region's own chrome
 * rather than an empty `<nav>`.
 */
const sidebarContentFixture: SidebarContentFixture = {
  id: "sidebar-content",
  title: "Platform",
  items: [
    { label: "Services", icon: "▦", active: true },
    { label: "Deploys", icon: "↑" },
  ],
};
 
import { Sidebar, SidebarContent, SidebarItem, SidebarSection } from "@grassroot/ui-solid";
 
export default function SidebarContentDemo(): JSX.Element {
  return (
    <div>
      <Sidebar>
        <SidebarContent>
          <SidebarSection title={sidebarContentFixture.title}>
            <For each={sidebarContentFixture.items}>
              {(item) => (
                <SidebarItem active={item.active} icon={<span aria-hidden="true">{item.icon}</span>}>
                  {item.label}
                </SidebarItem>
              )}
            </For>
          </SidebarSection>
        </SidebarContent>
      </Sidebar>
    </div>
  );
}