subline/views/shared/menu.ejs

<div class="menu">
    <div class="menuHead">
        <a href="/">
            <img class="menuLogo" src="/shared/images/logo.png">
            <p>The Subline</p>
        </a>

        <button onclick="changeMenu()">&#8801;</button>
    </div>

    <button id="homeBtn" class="active" onclick="changeStrand('homeStrand')">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
        <p>Home</p>
    </button>

    <button id="ingredientsBtn" onclick="changeStrand('ingredientsStrand')">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
        <p>Ingredients</p>
    </button>

    <button id="recipeBookBtn" onclick="changeStrand('recipeBookStrand')">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
        <p>Recipe Book</p>
    </button>

    <button id="ordersBtn" onclick="changeStrand('ordersStrand')">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
        <p>Orders</p>
    </button>

    <a class="logout" href="/logout">
        <img src="/shared/images/profile.png" alt="logout">
        <p>Logout</p>
    </a>

    <script>
        let changeMenu = ()=>{
            let menu = document.querySelector(".menu");
            let buttons = document.querySelectorAll(".menu > button");
            if(!menu.classList.contains("menuMinimized")){
                menu.classList = "menu menuMinimized";

                for(let button of buttons){
                    button.children[1].style.display = "none";
                }

                document.querySelector(".menuHead p").style.display = "none";
                document.querySelector(".menuHead").classList = "menuHead menuHeadMin";
                document.querySelector(".logout p").style.display = "none";

                setTimeout(()=>{
                    document.querySelector(".menuLogo").classList = "menuLogo menuLogoMin";
                }, 150);
            }else if(menu.classList.contains("menuMinimized")){
                menu.classList = "menu";

                for(let button of buttons){
                    button.children[1].style.display = "block";
                }

                document.querySelector(".menuHead p").style.display = "block";
                document.querySelector(".menuHead").classList = "menuHead";
                document.querySelector(".logout p").style.display = "block";

                setTimeout(()=>{
                    document.querySelector(".menuLogo").classList = "menuLogo";
                });
            }
        }
    </script>
</div>