subline/views/dashboardPage/ejs/menu.ejs

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

        <button class="menuShifter" onclick="controller.changeMenu()">&#8801;</button>
    </div>

    <div id="min" class="menuHead menuHeadMin">
        <a href="/">
            <img class="menuLogoMin" src="/shared/images/logo.png" alt="The Subline">
        </a>

        <button id="menuShifter2" onclick="controller.changeMenu()">&#8801;</button>
    </div>

    <button class="menuButton active" id="homeBtn">
        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <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>DASHBOARD</p>
    </button>

    <button class="menuButton" id="ingredientsBtn">
        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <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 class="menuButton" id="recipeBookBtn">
        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <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 class="menuButton" id="analyticsBtn">
        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
            <polyline points="17 6 23 6 23 12"></polyline>
        </svg>
        <p>ANALYTICS</p>
    </button>

    <button class="menuButton" id="ordersBtn">
        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <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>

    <button class="menuButton" id="transactionsBtn">
        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
            <line x1="1" y1="10" x2="23" y2="10"></line>
        </svg>
        <p>TRANSACTIONS</p>
    </button>

    <button class="menuButton" id="accountBtn">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
        </svg>
        <p>ACCOUNT</p>
    </button>

    <a class="menuButton" href="/logout">
        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
            <polyline points="16 17 21 12 16 7"></polyline>
            <line x1="21" y1="12" x2="9" y2="12"></line>
        </svg>
        <p>LOGOUT</p>
    </a>

    <div class="menuLinks">
        <button id="feedbackButton">Leave Feedback</button>

        <a href="/help">Help</a>
    </div>
</div>