How can a menu sidebar be toggled / collapsed by default in HTML / CSS / JS?

I have downloaded html5up's Editorial template and I'm trying to collapse the menu sidebar when the page is first visited. As shown in the screenshot below, clicking on the blue three-bar icon toggles (collapses / expands) the sidebar menu. The sidebar is visible (expanded) when the page is first loaded, but I'd like it to be collapsed instead.

The screenshot above depicts an almost-minimal reproducible example that I made using the HTML, CSS and JS below. I realize that there are some unnecessary details like font-awesome so I apologize that this is not a full MRE.

I have naively attempted to collapse the sidebar in index.html using a simple script:

document.getElementById("sidebar").click();

However this does not work.

How can the sidebar be collapsed by default?

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Editorial by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="is-preload">
            <div id="wrapper">
                    <div id="main">
                        <div class="inner">
                                <section id="banner">
                                    <div class="content">
                                        <header>
                                            <h1>Editorial</h1>
                                            <p>A free and fully responsive site template</p>
                                        </header>
                                    </div>
                                </section>
                        </div>
                    </div>
                    <div id="sidebar">
                        <div class="inner">
                                <nav id="menu">
                                    <header class="major">
                                        <h2>Menu</h2>
                                    </header>
                                    <ul>
                                        <li><a href="index.html">Homepage</a></li>
                                        <li><a>Generic</a></li>
                                        <li><a>Elements</a></li>
                                    </ul>
                                </nav>
                        </div>
                    </div>
            </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/main.js"></script>
            <script>
            </script>
            <script>
                document.getElementById("sidebar").click();
            </script>
    </body>
</html>

main.css

@import url(fontawesome-all.min.css);


/* Wrapper */
#wrapper {
  display: flex;
  flex-direction: row-reverse;
  min-height: 100vh; }

/* Main */
#main {
  -moz-flex-grow: 1;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  -moz-flex-shrink: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  flex-shrink: 1;
  width: 100%; }
  @media screen {
    #main > .inner {
      padding: 0 5em 0.1em 5em ; }
      #main > .inner > section {
        padding: 5em 0 3em 0 ; } }



#sidebar {
  -moz-flex-grow: 0;
  -webkit-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  -moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  background-color: #f5f6f7;
  position: relative; }

  #sidebar .toggle {
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-indent: -15em;
    top: 0;
    width: 6em;
    z-index: 10000; }
    #sidebar .toggle:before {
      font-family: 'Font Awesome 5 Free';
      content: '\f0c9';  /*3-bar sidebar toggle icon*/
      left: 0;
      position: absolute;
      text-indent: 0;
      width: inherit; }

  @media screen {
    #sidebar {
      width: 12em; }
      #sidebar > .inner {
        padding: 1.66667em 1.66667em 1.33333em 1.66667em ;
        width: 12em; }
      #sidebar .toggle {
        left: 12em;
        line-height: 6.25em;}
        #sidebar .toggle:before {
          font-size: 1.5rem; }
      #sidebar.inactive {
        margin-left: -13em; } }

main.js

(function($) {
    var $window = $(window),
        $head = $('head'),
        $body = $('body');

        var $sidebar = $('#sidebar'),
            $sidebar_inner = $sidebar.children('.inner');

            $('<a href="#sidebar" class="toggle">Toggle</a>')
                .appendTo($sidebar)
                .on('click', function(event) {
                        event.preventDefault();
                        event.stopPropagation();
                        $sidebar.toggleClass('inactive');
                });
})(jQuery);

Solution

You can add the inactive class to your #sidebar element, this will make the sidebar collapsed on page load via your css.

<div id="sidebar" class="inactive">
    <!-- Sidebar content here -->
</div>

This works because in your css you define:

#sidebar.inactive {
    margin-left: -13em;
}

You can also achieve this via JavaScript. In your main.js file, on DOMContentLoaded you can run this code:

$(document).ready(function() {
    $('#sidebar').addClass('inactive');
});