build/dashboard-layout.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <!-- <title>Denisse's Cafe Dashboard</title> -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/fc5b4fd662.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="/styles/dashboard-layout.css">
        <script src="/scripts/helpers.js"></script>
        <script src="/scripts/sidebar.js"></script>
        {% block head %}{% endblock %}
    </head>
    <body>
        <header>
            <img src="/imgs/hamburger.svg"  class="sidebarIcon" onclick="displaySidebar()"/>
            <a href="/"><img src="/imgs/Logo.png" class="logo"></a>
        </header>
        <div class="sidebar" id="sidebar">
            <div class="sidebarHeader">
                <h1>Dashboard</h1>
                <img src="/imgs/close.svg" class="sidebarClose" onclick="hideSidebar()"/>
            </div>
            <nav>
                {%for navItem in nav%}
                    <a  href="{{navItem['url']}}" 
                        class="sidebarLinks {%if navItem['url']==currentUrl%}linkSelected{%endif%}">
                        {{navItem['name']}}
                    </a>
                {%endfor%}
            </nav>

        </div>
        {% block body %}{% endblock %}
    </body>
</html>