Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <title>{% block title %}Gauntlet{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="navigation" class="w3-sidebar w3-bar-block w3-card-2 w3-animate-left" style="display:none">
        <a href="#" class="w3-bar-item w3-button">Home</a>
        <a href="#" class="w3-bar-item w3-button">Link 1</a>
        <a href="#" class="w3-bar-item w3-button">Link 2</a>
        <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>

    <div zclass = "w3-main" id="main">
        <div class="w3-teal">
            <button class="w3-button w3-teal w3-xlarge" onclick="navflip()">&#9778;</button>
            <div class="w3-container">
                <h1> Gauntlet </h1>
            </div>
        </div>

        <div id="content" class="w3-container">
            {% block content %}{% endblock %}
        </div>
    </div>

    <script>
        var enabled = 0;
        function navflip(){
            if(enabled = 0 ){
                w3_open();
            }
            if(enabled = 1){
                w3_close();
            }
        }

        function w3_open() {
            enabled = 1;
            document.getElementById("main").style.marginLeft = "25%";
            document.getElementById("navigation").style.width = "25%";
            document.getElementById("navigation").style.display = "block";
        }
        function w3_close() {
            enabled = 0;
            document.getElementById("main").style.marginLeft = "0%";
            document.getElementById("navigation").style.display = "none";
        }
    </script>
</body>