.sideNav()

A side navigation menu can be created by using following codes.

<div class="side-nav" tabindex="0" style="display: none">
    ...
</div>

   .side-nav {
       margin-bottom: 1.2rem;
       background-color: #eeeeee!important;
   }
   input[type='checkbox'].toggle {
       display: none;
   }
   .lbl-toggle {
       display: block;
       font-weight: bold;
       font-family: monospace;
       font-size: 1.2rem;
       text-transform: uppercase;
       text-align: left;
       padding: 1rem;
       cursor: pointer;
       border-radius: 7px;
       transition: all 0.15s ease-out;
   }
   .side-nav li{
       list-style-type: none;
   }
   .lbl-toggle::before {
       content: ' ';
       display: inline-block;
       border-top: 5px solid transparent;
       border-bottom: 5px solid transparent;
       border-left: 5px solid currentColor;
       vertical-align: middle;
       margin-right: .7rem;
       transform: translateY(-2px);
       transition: transform .15s ease-out;
   }
   .toggle:checked + .lbl-toggle::before {
       transform: rotate(90deg) translateX(-3px);
   }
   .collapsible-content {
       max-height: 0;
       overflow: hidden;
       transition: max-height .15s ease-in-out;
   }
   .toggle:checked + .lbl-toggle + .collapsible-content {
       max-height: 100vh;
   }
   .toggle:checked + .lbl-toggle {
       font-size: 20px;
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
       background-color: #eeeeee;
   }
   .collapsible-content .content-inner {
       border-bottom-left-radius: 7px;
       border-bottom-right-radius: 7px;
       padding: .5rem 1rem;
   }

You must initialize sideNav component.

    $(buttonToOpenSideNav).sideNav({
        menuWidth: 250,
        edge: 'left', // left or right. default left
        target: sideNavSelector,
        closeOnClick: false, //click on sidenav default false
        time: 0.5, // animation time. default 0
        onOpen: function (el) {
            console.log("sidenav opened, ", el)
        },
        onClose: function (el) {
            console.log("sidenav closed, ", el)
        }
    });

methods:

    $(buttonToOpenSideNav).sideNav("destroy");
    $(buttonToOpenSideNav).sideNav("open");
    $(buttonToOpenSideNav).sideNav("close");
    $(buttonToOpenSideNav).sideNav("toggle");