I have a sidebar menu in HTML:
assets/partials/menu.html
<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li class="active">
<a href="index.html"><i class="la la-dashboard"></i> <span>Dashboard</span></a>
</li>
<li class="submenu">
<a href="#"><i class="la la-phone"></i> <span> Users</span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="voice-call.html">Manage Users</a></li>
</ul>
</li>
<li>
<a href="projects.html"><i class="la la-rocket"></i> <span>Projects</span></a>
</li>
<li>
<a href="tasks.html"><i class="la la-tasks"></i> <span>Tasks</span></a>
</li>
<li class="submenu">
<a href="#"><i class="la la-phone"></i> <span> Health Conscious</span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="voice-call.html">Manage Programs</a></li>
<li><a href="video-call.html">Manage Quix / Tests</a></li>
<li><a href="outgoing-call.html">Broadcast Message</a></li>
<li><a href="incoming-call.html">Google Play Settings</a></li>
<li><a href="incoming-call.html">iTunes Settings</a></li>
</ul>
</li>
<li>
<a href="contacts.html"><i class="la la-book"></i> <span>Contacts</span></a>
</li>
<li>
<a href="employee-dashboard.html"><i class="la la-tachometer"></i> <span>Employee Dashboard</span></a>
</li>
<li class="submenu">
<a href="#" class="noti-dot"><i class="la la-user"></i> <span> Employees</span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="employees.html">All Employees</a></li>
<li><a href="departments.html">On Board New Employee</a></li>
<li><a href="designations.html">Employee Reports</a></li>
</ul>
</li>
<li>
<a href="tickets.html"><i class="la la-ticket"></i> <span>Tickets</span></a>
</li>
<li>
<a href="events.html"><i class="la la-calendar"></i> <span>Events</span></a>
</li>
<li>
<a href="inbox.html"><i class="la la-at"></i> <span>Email</span></a>
</li>
<li>
<a href="chat.html"><i class="la la-comments"></i> <span>Chat</span> <span class="badge badge-pill bg-primary float-right">5</span></a>
</li>
<li>
<a href="assets.html"><i class="la la-object-ungroup"></i> <span>Assets</span></a>
</li>
<li>
<a href="knowledgebase.html"><i class="la la-question"></i> <span>Knowledgebase</span></a>
</li>
<li>
<a href="policies.html"><i class="la la-file-pdf-o"></i> <span>Policies</span></a>
</li>
<li>
<a href="activities.html"><i class="la la-bell"></i> <span>Activities</span></a>
</li>
<li>
<a href="users.html"><i class="la la-user-plus"></i> <span>Users</span></a>
</li>
<li class="submenu">
<a href="#"><i class="la la-pie-chart"></i> <span> Reports </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="expense-reports.html"> User Report </a></li>
<li><a href="invoice-reports.html"> Invoice Report </a></li>
</ul>
</li>
<li>
<a href="settings.html"><i class="la la-cog"></i> <span>Settings</span></a>
</li>
<li class="submenu">
<a href="javascript:void(0);"><i class="la la-share-alt"></i> <span>Multi Level</span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li class="submenu">
<a href="javascript:void(0);"> <span>Level 1</span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="javascript:void(0);"><span>Level 2</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"> <span> Level 2</span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="javascript:void(0);">Level 3</a></li>
<li><a href="javascript:void(0);">Level 3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);"> <span>Level 2</span></a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);"> <span>Level 1</span></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
What I would like to do is, simply insert this html from my index page.
I tried following the tutorial on components, and all I got was a blank space where the menu was supposed to go.
Can anyone show me how to insert HTML from an external file, using knockout or not.
Thank you.
John
