Sidebar

<x-sidebar></x-sidebar>

Caution

When you use Sidebar, you should make other html contents to be surounded by <div> css class 'with-sideber'.

const sidebarItems = [
    {icon: 'fas fa-home', label: 'Home', action: () => { showSnackbar('Home selected')}},
    {icon: 'fas fa-file-alt', label: 'Files', action: () => { showSnackbar('Files selected')}},
    {icon: 'fas fa-comment', label: 'Comments', action: () => { showSnackbar('Comments selected')}},
    {icon: 'fas fa-user-friends', label: 'Users', href: '#'},
    {icon: 'fas fa-exclamation-triangle', label: "Caution - display only"}
];
const sidebar = document.querySelector('x-sidebar');
sidebar.setItems(sidebarItems);
sidebar.collapseOnSelect = true;