How to properly set Ejs Partials

Question

I have an ejs sidebar partial

<div class="col-3 flex-nowrap">
<nav id="sidebar">
    <!-- Sidebar Header -->
    <div class="sidebar-header text-center">
        <h1 id="notification">Notification</h1>
    </div>
    <!-- Sidebar Links -->
    <ul class="nav-list">
        <li class="active"><a href="#">Edit Profile</a></li>
        <li><a href="#">Privacy & Security</a></li>
        <li><a href="#">Payment Setting</a></li>
        <li><a href="#">Transaction History</a></li>
        <li><a href="#">Trust & Verfication</a></li>
        <li><a href="#">My Education Blog</a></li>
        <li><a href="#">Promotions</a></li>
    </ul>
    <ul id="cancel"><a><strong>Cancel Account</strong></a></ul>
</nav>

and in my notifcation.ejs I include that partial this way

<%-include("./partials/sidebar.ejs")%>

Since I want to reuse my sidebar partial I want the header in that sidebar to be distinct on every page.

ex: in the notification.ejs page it is already set to have notification in that sidebar header. But in promotions.ejs I want that header to say promotions instead.

How do I specify in each link of the sidebar which sidebar header to use?

Answer 1

What you are trying to archive is to pass variables inside partial. Here is a link to documentation , in Includes section you can find the info about this case.

For example your partial can look like

<!-- Sidebar Header -->
    <div class="sidebar-header text-center">
        <h1 id="notification"><%= title %></h1>
    </div>

And when you are using your partial, you can define it with variable

<%-include("./partials/sidebar.ejs", { title: title })%>