 <!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="htmlcss bootstrap, multi level menu, submenu, treeview nav menu examples" />
<meta name="description" content="Bootstrap 5 navbar multilevel treeview examples for any type of project, Bootstrap 5" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<style type="text/css">

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

	.dropdown-menu li{
		position: relative;
	}
	.dropdown-menu .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.dropdown-menu .submenu-left{ 
		right:100%; left:auto;
	}

	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {

.dropdown-menu .dropdown-menu{
		margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}

}	
/* ============ small devices .end// ============ */

</style>


<script type="text/javascript">
//	window.addEventListener("resize", function() {
//		"use strict"; window.location.reload(); 
//	});


	document.addEventListener("DOMContentLoaded", function(){
        

    	/////// Prevent closing from click inside dropdown
		document.querySelectorAll('.dropdown-menu').forEach(function(element){
			element.addEventListener('click', function (e) {
			  e.stopPropagation();
			});
		})



		// make it as accordion for smaller screens
		if (window.innerWidth < 992) {

			// close all inner dropdowns when parent is closed
			document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
				everydropdown.addEventListener('hidden.bs.dropdown', function () {
					// after dropdown is hidden, then find all submenus
					  this.querySelectorAll('.submenu').forEach(function(everysubmenu){
					  	// hide every submenu as well
					  	everysubmenu.style.display = 'none';
					  });
				})
			});
			
			document.querySelectorAll('.dropdown-menu a').forEach(function(element){
				element.addEventListener('click', function (e) {
		
				  	let nextEl = this.nextElementSibling;
				  	if(nextEl && nextEl.classList.contains('submenu')) {	
				  		// prevent opening link if link needs to open dropdown
				  		e.preventDefault();
				  		console.log(nextEl);
				  		if(nextEl.style.display == 'block'){
				  			nextEl.style.display = 'none';
				  		} else {
				  			nextEl.style.display = 'block';
				  		}

				  	}
				});
			})
		}
		// end if innerWidth

	}); 
	// DOMContentLoaded  end
</script>

 </head>
<body> 




<!-- ============= COMPONENT ============== -->

<nav class="navbar navbar-expand-lg fixed-top"style="background-color: #e3f2fd;">
 <div class="container-fluid">

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>

  <div class="collapse navbar-collapse" id="main_nav"> 
	

	<ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item dropdown">
		    <a class="nav-link dropdown-toggle text-dark" href="#" data-bs-toggle="dropdown"><i class="fa-solid fa-house"></i> Home  </a>

               <ul class="dropdown-menu">

                 <a class="dropdown-item"  href="#"><i class="fa-solid fa-house"></i> Home</a> 
               <a class="dropdown-item"  href="{% url 'base:employee_details' %}"><i class="fa-solid fa-circle-info"></i> My details</a>  
                <a class="dropdown-item"  href="{% url 'logout'   %}"> <i class="fa fa-sign-out"></i> Logout</a>          
                  <hr>
                  
                   <a class="dropdown-item"  href="{% url 'base:patient_form' 0  %}"><i class="fa-solid fa-plus"></i> Add Patient</a>  
                   {% comment %} <a class="dropdown-item"  href="{% url 'base:patient_details' patentid  %}"><i class="fa-solid fa-user"></i> View Patient details</a>                {% endcomment %}
                   <a class="dropdown-item"  href="{% url 'base:patient' 'tbl'  %}"><i class="fa-solid fa-table-list"></i> View all patients </a>
			   </ul>
               
              
        </li>


        <li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle text-dark" href="#" data-bs-toggle="dropdown"><i class="fa-solid fa-user-lock"></i> Admin  </a>
		        <ul class="dropdown-menu">

              <a class="dropdown-item"  href="{% url 'siteadmin:disease_form' 0  %}"><i class="fa-solid fa-virus"></i> Add Disease</a>  
              <a class="dropdown-item"  href="{% url 'siteadmin:disease' 'tbl'  %}"><i class="fa-solid fa-table-list"></i> View  Disease</a> 
              <a class="dropdown-item"  href="{% url 'siteadmin:employee_form' 0 %}"><i class="fa-solid fa-user-plus"></i> Add Employee</a>  
              <a class="dropdown-item"  href="{% url 'siteadmin:employee' 'tbl' %}"><i class="fa-solid fa-table-list"></i> View Employee </a>
  
            

                </ul>



        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-dark" href="#" data-bs-toggle="dropdown"><i class="fa-solid fa-street-view"></i> Manage  </a>

          <ul class="dropdown-menu">

            <a class=" dropdown-item "  href="{% url 'manage:task_form' 0 %}"><i class="fa-solid fa-clipboard-check"></i> Add Task </a>
            <a class=" dropdown-item "  href="{% url 'manage:task' 'tbl' %}"><i class="fa-solid fa-table-list"></i> View Task </a>   

            <a class=" dropdown-item "  href="{% url 'manage:notification_form' 0 %}"><i class="fa-regular fa-bell"></i> Add Notification </a>
            <a class=" dropdown-item "  href="{% url 'manage:notification' 'tbl' %}"><i class="fa-solid fa-table-list"></i> View Notification </a>            

            <a class="dropdown-item"  href="{% url 'manage:medicine_unit_form'  0 %}"><i class="fa-solid fa-syringe"></i> Add Medicine Unit</a> 
            <a class="dropdown-item"  href="{% url 'manage:medicine_unit'  'tbl' %}"><i class="fa-solid fa-table-list"></i> View Medicine Unit</a> 

            <a class="dropdown-item"  href="{% url 'manage:inhouse_form'  0 %}"><i class="fa-solid fa-house-medical"></i> Add Medicine Inhouse</a> 
            <a class="dropdown-item"  href="{% url 'manage:inhouse'  'tbl' %}"><i class="fa-solid fa-table-list"></i> View Medicine Inhouse</a> 

            <a class="dropdown-item"  href="{% url 'manage:inventory_entry_form'  0 %}"><i class="fa-solid fa-warehouse"></i> Add Inventory Entry</a> 
            <a class="dropdown-item"  href="{% url 'manage:inventory_entry'  'tbl' %}"><i class="fa-solid fa-table-list"></i> View Inventory Entry</a> 

        </ul>

      </li>

	  <li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle text-dark" href="#" data-bs-toggle="dropdown"><i class="fa-brands fa-expeditedssl"></i> Site Admin  </a>
			<ul class="dropdown-menu">
				<a class=" dropdown-item "  href="{% url 'siteadmin:instruction_form' 0  %}"><i class="fa-solid fa-book-bookmark"></i> Add Help </a>
				<a class=" dropdown-item "  href="{% url 'siteadmin:instruction' 'tbl' %}"><i class="fa-solid fa-table-list"></i> View Help </a>
	
	
				<a class=" dropdown-item "  href="{% url 'siteadmin:static_page_form' 0 %}"><i class="fa-solid fa-paperclip"></i> Add Static Page </a>
				<a class=" dropdown-item "  href="{% url 'siteadmin:static_page' 'tbl' %}"><i class="fa-solid fa-table-list"></i> View Static Page </a>
  
				<a class=" dropdown-item "  href="{% url 'siteadmin:zone_form' 0 %}"><i class="fa-solid fa-tree-city"></i> Add Zone </a>
			  <a class=" dropdown-item "  href="{% url 'siteadmin:zone' 'tbl' %}"><i class="fa-solid fa-table-list"></i>  View Zone </a> 

			  
			  <a class=" dropdown-item "  href="{% url 'siteadmin:gender_form' 0 %}"><i class="fa-solid fa-genderless"></i> Add Gender </a>
				<a class=" dropdown-item "  href="{% url 'siteadmin:gender' 'tbl' %}"><i class="fa-solid fa-table-list"></i>  View Gender </a> 

			</ul>

		</li>

		
		<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle text-dark" href="#" data-bs-toggle="dropdown"><i class="fa-solid fa-file"></i> Reports  </a>
			
			<ul class="dropdown-menu">

            <a class="dropdown-item"  href="#"><i class="fa-solid fa-file-arrow-down"></i> IMH</a>
            <a class="dropdown-item"  href="#"><i class="fa-solid fa-file-arrow-down"></i> Center wise</a> 
         </ul>   
              
     
			 
        </li>
		
	</ul>

  </div> <!-- navbar-collapse.// --> 
 </div> <!-- container-fluid.// -->
</nav>






</body>
</html>