preact-sidenav

Minimal viable sidenav implementation.

Demo

Size:

Usage Example

Use and provide content and a navigation var

import Sidenav from 'preact-sidenav';
import 'node_modules/preact-sidenav/dist/sidenav.css';
const Nav = (props) => (
  <div>
    <ul>
      <li>Menu item 1</li>
      <li>Menu item 2</li>
      <li>Menu item 3</li>
      <li><button onclick={props.closeSidenav} >Close</button></li>
    </ul>
  </div>
)
class App extends Component {
  onOpen = () => console.log('open');
  onClose = () => console.log('close');
  render(props, state) {
        return (
      <div id="app">
        <Sidenav sidebar={ <Nav ></Sidenav> } onOpen={this.onOpen} onClose={this.onClose}>
          <Content ></Content>
        </Sidenav>
      </div>
    );
  }
}
render(<App ></App>, document.body);

Scss file is also provided

License

MIT