carbon-components-svelte/docs/src/layouts/ComponentLayout.svelte

<script>
  import {
    Grid,
    Row,
    Column,
    Content,
    Button,
    Select,
    SelectItem,
  } from "carbon-components-svelte";
  import Code16 from "carbon-icons-svelte/lib/Code16";
  import { page, metatags } from "@sveltech/routify";
  import { theme } from "../store";

  export let component = $page.title;
  export let source = "";

  metatags.title = $page.title;

  // TODO: [refactor] read from package.json value
  $: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
    source || `${$page.title}/${$page.title}.svelte`
  }`;
</script>

<style global>
  #select-theme {
    width: auto;
  }

  .prose > p > .bx--link {
    font-size: inherit;
  }

  .prose .toc {
    margin-bottom: var(--cds-layout-01);
  }

  .table {
    position: sticky;
    max-height: calc(100vh - 3rem);
    top: 3rem;
    padding-top: var(--cds-spacing-05);
    padding-bottom: var(--cds-spacing-05);
    padding-left: var(--cds-spacing-08);
    overflow-y: auto;
  }

  .bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--cds-layout-02);
    border-bottom: 1px solid var(--cds-ui-03);
  }

  [data-components] {
    z-index: 2;
    position: relative;
    display: flex;
  }

  [data-components] .bx--grid {
    width: 100%;
  }

  .toc h5 {
    margin-bottom: var(--cds-spacing-03);
  }

  .toc.mobile {
    display: none;
  }

  @media (max-width: 1056px) {
    .table {
      display: none;
    }

    .toc.mobile {
      display: block;
    }
  }
</style>

<Content data-components>
  <Grid>
    <Row>
      <Column>
        <h1>{component}</h1>
        <div class="bar">
          <Select
            id="select-theme"
            inline
            labelText="Theme"
            bind:selected="{$theme}"
          >
            <SelectItem value="white" text="White" />
            <SelectItem value="g10" text="Gray 10" />
            <SelectItem value="g90" text="Gray 90" />
            <SelectItem value="g100" text="Gray 100" />
          </Select>
          <Button
            kind="ghost"
            target="_blank"
            size="field"
            href="{sourceCode}"
            icon="{Code16}"
          >
            Source code
          </Button>
        </div>
      </Column>
    </Row>

    <Row>
      <Column class="prose">
        <div class="toc mobile">
          <h5>Table of Contents</h5>
          <slot name="aside" />
        </div>
        <h2 id="usage">Usage</h2>
        <slot />
      </Column>
    </Row>
  </Grid>

  <Column class="table" xlg="{4}" lg="{5}">
    <div class="toc">
      <h5>Table of Contents</h5>
      <slot name="aside" />
    </div>
  </Column>
</Content>