Menu Structure
Menu Structure for Vertical layout
File: src/partials/left-sidebar.html
<!-- Begin Left Navigation -->
<aside class="side-navbar">
<div class="scroll-content" id="metismenu">
<ul id="side-menu" class="metismenu list-unstyled">
<li class="side-nav-title side-nav-item menu-title">Menu</li>
<li>
<a class="side-nav-link" href="index.html">
<i class="bx bxs-dashboard"></i>
<span> Dashboard</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="side-nav-link" aria-expanded="false">
<i class="bx bx-user"></i>
<span> Patient</span>
<span class="menu-arrow"></span>
</a>
<ul aria-expanded="false" class="nav-second-level">
<li class="side-nav-item">
<a class="side-nav-link" href="patient.html"> List </a>
</li>
<li class="side-nav-item">
<a class="side-nav-link" href="patient-overview.html"> Overview </a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item menu-title">Apps</li>
...
<li class="side-nav-title side-nav-item menu-title">Pages</li>
<li>
<a href="javascript:void(0);" class="side-nav-link" aria-expanded="false">
<i class="bx bx-user-circle"></i>
<span> Pages</span>
<span class="menu-arrow"></span>
</a>
...
</li>
<li class="side-nav-title side-nav-item menu-title">Components</li>
<li><a href="javascript:void(0);" class="side-nav-link" aria-expanded="false">
<i class="bx bx-tone"></i>
<span> UI Components</span>
<span class="menu-arrow"></span>
</a>
...
</li>
<li>
<a href="javascript:void(0);" class="side-nav-link" aria-expanded="false">
<i class="bx bx-layer-plus"></i>
<span> Advance UI</span>
<span class="menu-arrow"></span>
</a>
...
</li>
<li>
<a href="javascript:void(0);" class="side-nav-link" aria-expanded="false">
<i class="bx bxs-eraser"></i>
<span> Forms</span>
<span class="menu-arrow"></span>
</a>
...
</li>
<li>
<a href="javascript:void(0);" class="side-nav-link" aria-expanded="false">
<i class="bx bx-table"></i>
<span> Tables</span>
<span class="menu-arrow"></span>
</a>
...
</li>
<li>
<a href="javascript:void(0);" class="side-nav-link" aria-expanded="false">
<i class="bx bxs-bar-chart-alt-2"></i>
<span> Charts</span>
<span class="menu-arrow"></span>
</a>
...
</li>
<li>
<a href="javascript:void(0);" class="side-nav-link" aria-expanded="false">
<i class="bx bx-aperture"></i>
<span> Icons</span>
<span class="menu-arrow"></span>
</a>
...
</li>
<li>
<a href="javascript:void(0);" class="side-nav-link" aria-expanded="false">
<i class="bx bx-share-alt"></i>
<span> Multi Level</span>
<span class="menu-arrow"></span>
</a>
...
</li>
</ul>
</div>
</aside>
<!-- Left Navigation End -->
Menu Structure
File: src/partials/topbar.html
<div class="page-topbar">
<nav class="navbar navbar-expand-lg">
<div class="left-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link menu-toggle" id="menu-toggle" href="javascript:void(0)">
<i class="fe-arrow-left fs-24"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Help</a>
</li>
</ul>
</div>
<div class="logo">
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo.png" height="28" class="logo-lg" />
<img src="assets/images/logo-sm.png" height="28" class="logo-sm" />
</a>
</div>
<div class="right-nav">
<div class="d-md-none">
<a href="javascript:void(0)" class="dots-icon" id="mobileNavbar">
<i class="mdi mdi-dots-horizontal fs-lg"></i>
</a>
</div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link search-dropdown" href="javascript:void(0)" id="searchDropDown" role="button"
data-bs-toggle="dropdown" aria-expanded="false"><i class="fe-search fs-24"></i></a>
<div class="dropdown-menu dropdown-menu-right search-drop-menu" aria-labelledby="searchDropDown">
...
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)" id="chats-toggle" role="button">
<i class="mdi mdi-message-outline fs-24"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link notify-toggle" href="javascript:void(0)" id="notificationsDropDown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">3</a>
<div class="dropdown-menu dropdown-menu-right notify-dropdown-menu"
aria-labelledby="notificationsDropDown">
...
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javascript:void(0)" id="profileDropDown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<img src="assets/images//users/avatar-3.jpg" class="rounded-circle" width="40" alt="">
</a>
<div class="dropdown-menu dropdown-menu-right profile-drop-menu" aria-labelledby="profileDropDown">
...
</div>
</li>
</ul>
</div>
</nav>
</div>