SidePanel

Basic Usage

The Side Panel is a persistent navigation panel with sub-components for items, labels, menus, and spacing.

Use the <k-main> component alongside the side panel to automatically adjust content margins when the panel expands or collapses. The Main component wraps a standard <main> element with auto-centering and listens for panel state changes via window events.

<script type="module" src="../src/components/SidePanel.js"></script>
<script type="module" src="../src/components/Main.js"></script>

<k-side-panel>
  <h3 slot="logo">Kempo</h3>
  <k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
  <k-side-panel-item icon="check" href="#">Tasks</k-side-panel-item>
  <k-side-panel-item icon="label" href="#">Email</k-side-panel-item>
  <k-side-panel-label>Projects</k-side-panel-label>
  <k-side-panel-item icon="folder" href="#">Figma Design</k-side-panel-item>
  <k-side-panel-item icon="folder" href="#">Static Mania</k-side-panel-item>
  <k-side-panel-spacer></k-side-panel-spacer>
  <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
  <k-side-panel-item icon="account-circle" href="#">Profile</k-side-panel-item>
</k-side-panel>
<k-main>
  <h2>Main Content</h2>
  <p>Content automatically adjusts when panel opens/closes.</p>
</k-main>

With Menu

Use k-side-panel-menu for expandable menu items.

<k-side-panel>
  <k-side-panel-item icon="cards" href="#">Dashboard</k-side-panel-item>
  <k-side-panel-menu icon="folder" label="Projects">
    <k-side-panel-item href="#">Website Redesign</k-side-panel-item>
    <k-side-panel-item href="#">Mobile App</k-side-panel-item>
  </k-side-panel-menu>
</k-side-panel>

Independent Scrolling

The SidePanel scrolls independently from the main content area, allowing users to navigate extensive menus without losing their place in the content.

JavaScript Reference

Constructor

Extends ShadowComponent

new SidePanel()

Main Component

The <k-main> component is designed to work with <k-side-panel>. It automatically adjusts its left or right margin based on the panel's state (expanded/collapsed) and side (left/right).

How It Works

• Listens for side-panel-change events on window
• Automatically detects existing panel on mount
• Adjusts margin with smooth transitions
• Provides standard <main> centering and max-width behavior
• Works with both left and right side panels

Usage

<k-side-panel>...</k-side-panel>
<k-main>
  <!-- Your content here -->
</k-main>

No additional JavaScript or event listeners are required. The components communicate automatically via window events.

Requirements

• ShadowComponent
• Icon

Properties

collapsed: boolean

Whether the side panel is collapsed to icon-only view. Defaults to false. Syncs to collapsed attribute.

side: string

The side where the panel is positioned. Can be "left" or "right". Defaults to "left". Syncs to side attribute.

Events

expand

Dispatched when the side panel is expanded.

collapse

Dispatched when the side panel is collapsed.

change

Dispatched when the side panel state changes. Event detail contains "expand" or "collapse".

toggle

Dispatched when the toggle method is called.

Methods

expand(): void

Expands the side panel to show labels.

collapse(): void

Collapses the side panel to icon-only view.

toggle(): void

Toggles the side panel between expanded and collapsed states and dispatches a toggle event.

CSS Variables