# SideMenu

Table of Contents

###### Examples

Basic Usage
Closing
Right Side Menu

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods

### Basic Usage

Side Menus are closed by default, to open them call the `open()` method.

    <k-side-menu id="sm1">
      <p>Side Menu 1</p>
    </k-side-menu>
    <button id="open-sm1">Open Side Menu 1</button>
    <script>
      document.getElementById('open-sm1').addEventListener('click',()=>{
        document.getElementById('sm1').open();
      });
    </script>

Side Menu 1

### Closing

By default clicking on the overlay (the part that covers the page while the Side Menu is open) will close the Side Menu. Use the `overlay-close="false"` attribute/value to disable this.

Use the `close()` method to close the Side Menu, alternately you can use the `toggle()` method which can be used to open or close the Side Menu.

    <k-side-menu id="sm2" overlay-close="false">
      <p>Side Menu 2</p>
      <button id="close-sm2">Close</button>
    </k-side-menu>
    <button id="open-sm2">Open Side Menu 2</button>
    <script>
      const $sm2 = document.getElementById('sm2');
      document.getElementById('open-sm2').addEventListener('click',()=>{
        $sm2.open();
      });
      document.getElementById('close-sm2').addEventListener('click',()=>{
        $sm2.close();
      });
    </script>

Side Menu 2

### Right Side Menu

Give the menu the `side="right"` attribute/value to make it open from the right side.

    <k-side-menu id="sm3" side="right">
      <p>Side Menu 3</p>
    </k-side-menu>
    <button id="open-sm3">Open Side Menu 3</button>
    <script>
      document.getElementById('open-sm3').addEventListener('click',()=>{
        document.getElementById('sm3').open();
      });
    </script>

Side Menu 3

## JavaScript Reference

### Constructor

###### Extends Component

##### `new SideMenu()`

### Requirements

- Component

### Attributes

##### `opened: boolean`

Whether the side menu is opened.

##### `overlayClose: boolean`

Whether clicking the overlay closes the side menu.

##### `side: string`

The side from which the menu opens. Can be `"left"` or `"right"`.

### Methods

##### `open(): void`

Opens the side menu.

##### `close(): void`

Closes the side menu.

##### `toggle(): void`

Toggles the side menu open or closed.