SidebarSection

interface SidebarSectionFixture {
  id: string;
  title: string;
  items: Array<{ label: string; icon: string; active?: boolean }>;
}
 
/**
 * Canonical CSP-S6 SidebarSection fixture — a mono uppercase group label above
 * a run of items, one of which is the current route.
 */
const sidebarSectionFixture: SidebarSectionFixture = {
  id: "sidebar-section",
  title: "Platform",
  items: [
    { label: "Services", icon: "▦", active: true },
    { label: "Deploys", icon: "↑" },
    { label: "Incidents", icon: "△" },
  ],
};
 
import { Sidebar, SidebarItem, SidebarSection } from "@grassroot/ui-react";
 
export default function SidebarSectionDemo() {
  return (
    <div>
      <Sidebar>
        <SidebarSection title={sidebarSectionFixture.title}>
          {sidebarSectionFixture.items.map((item) => (
            <SidebarItem
              key={item.label}
              active={item.active}
              icon={<span aria-hidden="true">{item.icon}</span>}
            >
              {item.label}
            </SidebarItem>
          ))}
        </SidebarSection>
      </Sidebar>
    </div>
  );
}

<script setup lang="ts">
interface SidebarSectionFixture {
  id: string;
  title: string;
  items: Array<{ label: string; icon: string; active?: boolean }>;
}
 
/**
 * Canonical CSP-S6 SidebarSection fixture — a mono uppercase group label above
 * a run of items, one of which is the current route.
 */
const sidebarSectionFixture: SidebarSectionFixture = {
  id: "sidebar-section",
  title: "Platform",
  items: [
    { label: "Services", icon: "▦", active: true },
    { label: "Deploys", icon: "↑" },
    { label: "Incidents", icon: "△" },
  ],
};
 
import { Sidebar, SidebarItem, SidebarSection } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Sidebar>
      <SidebarSection :title="sidebarSectionFixture.title">
        <SidebarItem
          v-for="item in sidebarSectionFixture.items"
          :key="item.label"
          :active="item.active"
          ><template #icon
            ><span aria-hidden="true">{{ item.icon }}</span></template
          >{{ item.label }}</SidebarItem
        >
      </SidebarSection>
    </Sidebar>
  </div>
</template>

import { Component } from "@angular/core";
interface SidebarSectionFixture {
  id: string;
  title: string;
  items: Array<{ label: string; icon: string; active?: boolean }>;
}
 
/**
 * Canonical CSP-S6 SidebarSection fixture — a mono uppercase group label above
 * a run of items, one of which is the current route.
 */
const sidebarSectionFixture: SidebarSectionFixture = {
  id: "sidebar-section",
  title: "Platform",
  items: [
    { label: "Services", icon: "▦", active: true },
    { label: "Deploys", icon: "↑" },
    { label: "Incidents", icon: "△" },
  ],
};
 
import {
  GrassrootSidebar,
  GrassrootSidebarIcon,
  GrassrootSidebarItem,
  GrassrootSidebarSection,
} from "@grassroot/ui-angular";
 
@Component({
  selector: "app-sidebar-section-demo",
  standalone: true,
  imports: [
    GrassrootSidebar,
    GrassrootSidebarSection,
    GrassrootSidebarItem,
    GrassrootSidebarIcon,
  ],
  template: `
    <div>
      <grassroot-sidebar>
        <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>
    </div>
  `,
})
export class SidebarSectionDemoComponent {
  protected readonly fixture = sidebarSectionFixture;
}
 
export default SidebarSectionDemoComponent;

<script lang="ts">
  interface SidebarSectionFixture {
    id: string;
    title: string;
    items: Array<{ label: string; icon: string; active?: boolean }>;
  }
 
  /**
   * Canonical CSP-S6 SidebarSection fixture — a mono uppercase group label above
   * a run of items, one of which is the current route.
   */
  const sidebarSectionFixture: SidebarSectionFixture = {
    id: "sidebar-section",
    title: "Platform",
    items: [
      { label: "Services", icon: "▦", active: true },
      { label: "Deploys", icon: "↑" },
      { label: "Incidents", icon: "△" },
    ],
  };
 
  import { Sidebar, SidebarItem, SidebarSection } from "@grassroot/ui-svelte";
</script>
 
<div>
  <Sidebar>
    {#snippet children()}
      <SidebarSection title={sidebarSectionFixture.title}>
        {#snippet children()}
          {#each sidebarSectionFixture.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}
  </Sidebar>
</div>

/** @jsxImportSource solid-js */
import { For, type JSX } from "solid-js";
interface SidebarSectionFixture {
  id: string;
  title: string;
  items: Array<{ label: string; icon: string; active?: boolean }>;
}
 
/**
 * Canonical CSP-S6 SidebarSection fixture — a mono uppercase group label above
 * a run of items, one of which is the current route.
 */
const sidebarSectionFixture: SidebarSectionFixture = {
  id: "sidebar-section",
  title: "Platform",
  items: [
    { label: "Services", icon: "▦", active: true },
    { label: "Deploys", icon: "↑" },
    { label: "Incidents", icon: "△" },
  ],
};
 
import { Sidebar, SidebarItem, SidebarSection } from "@grassroot/ui-solid";
 
export default function SidebarSectionDemo(): JSX.Element {
  return (
    <div>
      <Sidebar>
        <SidebarSection title={sidebarSectionFixture.title}>
          <For each={sidebarSectionFixture.items}>
            {(item) => (
              <SidebarItem active={item.active} icon={<span aria-hidden="true">{item.icon}</span>}>
                {item.label}
              </SidebarItem>
            )}
          </For>
        </SidebarSection>
      </Sidebar>
    </div>
  );
}