web/views/layouts/navbar.ejs

<% if(types == "v1") { %>
    <nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius" style="background-color: #212226; ">
        <img alt="Banner" class="navbar-brand lazyload" height="80" src="img/logo_transparent.webp">
        <button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
            class="navbar-toggler" data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/products">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about-us">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="faq">FAQ</a>
                </li>
            </ul>
            <span class="navbar-nav my-2 my-lg-0 text-white">
                <div class="my-4">
                    <% if(loggedIn == "true") { %>
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-user" aria-hidden="true"></i>
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="/transaction">Transaction</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="/logout">Logout</a>
                            </div>
                        </div>
                    <% } else { %>
                        <a href="/login"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
                    <% } %>
                </div>
                <a href="/bag" class="mt-auto mb-auto" style="color: inherit;"><i class="fas fa-shopping-cart"><span
                            class="ml-2 mt-auto mb-auto">View Bag</span></i></a>
            </span>
        </div>
    </nav>
<% } else if (types == "v2") { %>
    <nav class="navbar navbar-dark nav-color ml-5 mr-5 nav-radius">
        <img alt="Banner" class="navbar-brand lazyload" src="img/logo_transparent.webp" style="margin-top: 0%;"
            width="5%">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a style="color: white; font-size: 16pt;"><%= title %></a>
            </li>
        </ul>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01"></div>
    </nav>
<% } else if (types == "v3") { %>
    <nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
        <a class="navbar-brand" href="#"><%= title %></a>
        <button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
            class="navbar-toggler" data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/products">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about-us">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/faq">FAQ</a>
                </li>
            </ul>
            <span class="navbar-nav my-2 my-lg-0 text-white">
                <div class="my-4">
                    <% if(loggedIn == "true") { %>
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-user" aria-hidden="true"></i>
                            </button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="/transaction">Transaction</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="/logout">Logout</a>
                            </div>
                        </div>
                    <% } else { %>
                        <a href="/login"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
                    <% } %>
                </div>
                <a href="/bag" class="mt-auto mb-auto" style="color: inherit;"><i class="fas fa-shopping-cart"><span
                            class="ml-2 mt-auto mb-auto">View Bag</span></i></a>
            </span>
        </div>
    </nav>
<% } %>