JSFiddle - React, Tailwind, and code Playground

HTML

<button>I am the nav</button>
<a href="#" id="toggle_but" class="sidebar-toggle" data-toggle="offcanvas" role="button">Toggle</a>

JavaScript

var menuStateKey = "toggle_but.state";
$(document).ready(function() {
    var $but = $("button");
    
    var setInitialState = function() {
        // Note: This retrieves a String, not a Boolean.
        var state = localStorage.getItem(menuStateKey) === 'true';
        setButDisplayState(state);
    };
    
    var toggleBut = function() {
        var state = $button.is(':visible');
        state = !state;
        localStorage.setItem(menuStateKey, state);
        setButDisplayState(state);
    };
    
    var setButDisplayState = function(state) {
        if (state) {
            $nav.show();
        } else {
            $nav.hide();
        }
    };
    
    $("#toggle_but").click(toggleBut);

    setInitialMenuState();
});