Creating a common sidebar for all pages

i have created my own sidebar in app/wms-dashboard route.when i navigate to other pages my sidebar disappears. so i have created a common sidebar called sidebar.html inside templates/includes.
then i have included this sidebar path in my wms_dashboard like this
{% include “wms_app/templates/includes/sidebar.html” %}
after adding this previously displayed sidebar also not displayed in app/wms_dashboard
sidebar.html path => ~/frappe-bench/apps/wms_app/wms_app/templates/includes/sidebar.html
wms_dashboard path => ~/frappe-bench/apps/wms_app/wms_app/wms/page/wms_dashboard/wms_dashboard.html
attaching wms_dashboard.html code

{% include "wms_app/templates/includes/sidebar.html" %}

Welcome to WMS Dashboard

Your logistics overview will appear here.

.wms-container { display: flex; min-height: 100vh; background: #f8f9fb; } .wms-sidebar { width: 220px; background: #1e1e2d; color: #fff; padding: 20px 0; } .wms-sidebar .logo {text-align: center;font-weight: bold;font-size: 20px;margin-bottom: 20px;} .wms-sidebar ul {list-style: none;padding: 0;margin: 0;} .wms-sidebar ul li {padding: 10px 20px;} .wms-sidebar ul li a {color: #fff;text-decoration: none;display: block;} .wms-sidebar ul li a:hover {background: #4b4b6a;border-radius: 5px;} .wms-main {flex: 1;padding: 40px;}

sidebar.html

.wms-sidebar { width: 220px; background: #111827; color: #fff; padding: 20px; min-height: 100vh; } .wms-sidebar .menu a { color: #fff; text-decoration: none; display: block; margin: 10px 0; }