Sidebar Section

The SidebarSection component allows you to divider your sidebar into sections with titles. It's recommended to use the SidebarSubsection component as content of SidebarSections.

Title

Use the title prop or slot to give your section a title. Titles are required.

<template>
  <div>
    <ci-sidebar-section title="Some title via prop">
      <ci-sidebar-subsection>
        Content here...
      </ci-sidebar-subsection>
      <ci-sidebar-subsection>
        Content here...
      </ci-sidebar-subsection>
      <ci-sidebar-subsection>
        Content here...
      </ci-sidebar-subsection>
    </ci-sidebar-section>

    <ci-sidebar-section>
      <template #title>
        Some title via slot
      </template>
      <ci-sidebar-subsection>
        Content here...
      </ci-sidebar-subsection>
      <ci-sidebar-subsection>
        Content here...
      </ci-sidebar-subsection>
      <ci-sidebar-subsection>
        Content here...
      </ci-sidebar-subsection>
    </ci-sidebar-section>
  </div>
</template>

Icon

Use the icon prop to add an icon to your sidebar section. If you use the title slot, you'll need to manually add an icon to your title slot.

<template>
  <ci-sidebar-section
    title="Some title"
    icon="bell"
  />
</template>

Actions

Use the actions slot to add actions like buttons or icons to your sidebar section. The actions will render on the right side of the sidebar section header, and are compatible with collapsible sections. This is ideal for adding a settings gear, for example.

<template>
  <ci-sidebar-section title="Some title">
    <ci-icon 
      slot="actions"
      icon="settings"
    />
  </ci-sidebar-section>
</template>

Collapsed Sections

Pass a Boolean to the is-collapsed.sync prop to add collapsing functionality to your SidebarSection. The .sync will automatically toggle & animate collapsing the section when the title bar is clicked.

When is-collapsed is...

• null: (default) the section will not appear collapsible
• true: the section will appear collapsed
• false: the section will appear collapsed

<template>
  <ci-sidebar-section
    title="Section Title"
    :is-collapsed.sync="sectionCollapsed"
    >
      <ci-sidebar-subsection>
        Section content...
      </ci-sidebar-subsection>
    </ci-sidebar-section>
</template>
<script>
export default {
  data() {
    return {
      sectionCollapsed: true,
    }
  }
}
</script>

Collapsing Sections Programatically

If desired you can close the section yourself by changing the value of the boolean passed in after initial load.

<template>
  <div>
    <ci-button @click="sectionCollapsed = false">
      Open
    </ci-button>
    <ci-button @click="sectionCollapsed = !sectionCollapsed">
      Toggle
    </ci-button>
    <ci-button @click="sectionCollapsed = true">
      Close
    </ci-button>
    <br><br>
    <ci-sidebar-section
      title="Section Title"
      :is-collapsed.sync="sectionCollapsed"
    >
      <ci-sidebar-subsection>
        Section content...
      </ci-sidebar-subsection>
    </ci-sidebar-section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sectionCollapsed: true,
    }
  }
}
</script>

Watching collapse events

Use the @update:isCollapsed event to listen to collapse events.

<template>
  <div>
    <p>@update:isCollapsed has been fired {{ count }} time(s).</p>
    <ci-sidebar-section
      title="Sidebar Section"
      :is-collapsed.sync="sectionCollapsed"
      @update:isCollapsed="countCollapses"
    >
      <ci-sidebar-subsection>
        Section content
      </ci-sidebar-subsection>
    </ci-sidebar-section>
  </div>
</template>
<script>
export default {
  methods: {
    countCollapses() {
      this.count += 1;
    },
  },
  data() {
    return {
      count: 0,
      sectionCollapsed: true
    }
  }
}
</script>