ng-sidebar

A lightweight and customizable sidebar component.

Inputs

| Input | Type | Default | Description | |-----------------|-------------------------|---------|-------------| | iconUrl | string \| null | null | URL of the SVG icon used for the toggle button. If not provided, a default icon is used. | | togglePosition | 'top' \| 'bottom' | 'top' | Vertical position of the toggle button inside the sidebar. | | side | 'left' \| 'right' | 'left' | Horizontal position of the sidebar relative to its container. | | height | string | '100%' | Height of the sidebar. | | width | string | '360px' | Width of the sidebar. |

Outputs

| Output | Type | Description | |----------|-----------|-------------| | toggled | boolean | Emits the current open/close state of the sidebar whenever it changes. |

Content

The component supports content projection via default <ng-content> slot.

Styling

The component exposes CSS variables for customization.

Override them in your global styles:

:root {
  --primary-900: black;
  --primary-500: darkslategrey;
  --primary-100: whitesmoke;
  --neutral-500: lightgrey;
  --neutral-100: white;
}

Usage example

The following example shows how to use the component.

<my-app>
   ...
   <ant-sidebar iconUrl="..." togglePosition="top" side="left" height="100%" width="360px">
      <div>
         <!-- content -->
      </div>
   </ant-sidebar>
   ...
</my-app>