Recent Posts
Recent Comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side Navigation Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-grow: 1;
height: 100%;
}
.navbar {
z-index: 1000; /* Lowest z-index for the footer */
position: relative; /* Ensure footer z-index is applied */
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
top: 0; /* Adjust for top nav height */
left: 0;
padding-top: 135px;
background-color: #343a40;
transition: width 0.5s, transform 0.5s;
overflow-x: hidden;
z-index: 0; /* Ensure the sidebar is below the top nav */
}
.sidebar::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
.sidebar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
footer {
z-index: -2; /* Lowest z-index for the footer */
position: relative; /* Ensure footer z-index is applied */
}
.sidebar.collapsed {
width: 60px;
}
}
/* Hide dropdown containers when sidebar is collapsed */
.sidebar.collapsed .dropdown-container {
display: none;
}
.sidebar.hidden {
transform: translateX(-100%);
}
.sidebar.visible {
transform: translateX(0);
}
.sidebar a, .dropdown-btn {
padding: 15px 20px;
text-decoration: none;
font-size: 18px;
color: white;
display: flex;
align-items: center;
justify-content: flex-start;
background: none;
border: none;
width: 100%;
cursor: pointer;
outline: none;
transition: background-color 0.3s, color 0.3s;
height: 52px;
}
.sidebar.collapsed a, .sidebar.collapsed .dropdown-btn {
padding: 15px 10px;
text-align: center;
}
.sidebar a:hover, .dropdown-btn:hover {
background-color: #575757;
color: #f1f1f1;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 15px;
}
.sidebar.collapsed .dropdown-container {
padding-left: 0;
}
.dropdown-container a {
padding: 15px 20px;
color: white;
display: block;
height: 52px;
}
.dropdown-container a:hover {
background-color: #575757;
color: #f1f1f1;
}
.content {
margin-left: 200px;
padding: 20px;
margin-top: 60px;
transition: margin-left 0.3s;
flex-grow: 1;
}
.content-expanded {
margin-left: 500px;
}
.sidebar.collapsed + .content {
margin-left: 60px;
}
.label {
margin-left: 10px;
}
.sidebar.collapsed .label {
display: none;
}
.fa-fw {
width: 1.25em;
}
.menu-toggle {
display: none;
position: fixed;
top: 10px;
left: 10px;
background-color: #333;
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 1001;
}
@media (max-width: 768px) {
.sidebar {
width: 60px; /* Collapse the sidebar width to only show icons */
transform: translateX(0); /* Ensure the sidebar is visible */
top: 0; /* Ensure it stays below the top nav */
}
.label {
display: none; /* Hide the labels on mobile */
}
.menu-toggle {
display: block;
}
.content {
margin-left: 60px; /* Expand content to fill space left by collapsed sidebar */
}
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<a href="https://www.mhacbo.org/en/admin/dashboard-view/" id="dashboard">
<i class="fas fa-home fa-fw"></i>
<span class="label">Dashboard</span>
</a>
<a href="https://www.mhacbo.org/en/admin/registry-query/" id="registry">
<i class="fas fa-clipboard fa-fw"></i>
<span class="label">Registry</span>
</a>
<div class="dropdown">
<button class="dropdown-btn" id="Knowledgebase">
<i class="fas fa-book fa-fw"></i>
<span class="label">Knowledgebase</span>
</button>
<div class="dropdown-container">
<a href="https://www.mhacbo.org/en/admin/post-answer" id="post">Post</a>
<a href="https://www.mhacbo.org/en/admin/answers/" id="Search">Search</a>
<a href="https://www.mhacbo.org/en/admin/pending/" id="Pending">Pending</a>
</div>
</div>
<a href="https://www.mhacbo.org/en/admin/locate-payment/" id="payments">
<i class="fas fa-dollar-sign fa-fw"></i>
<span class="label">Payments</span>
</a>
<a href="https://www.mhacbo.org/en/admin/education/" id="education">
<i class="fas fa-book fa-fw"></i>
<span class="label">Education</span>
</a>
<a href="https://www.mhacbo.org/en/admin/jobs/" id="jobs">
<i class="fas fa-briefcase fa-fw"></i>
<span class="label">Jobs</span>
</a>
<a href="https://www.mhacbo.org/en/admin/transcripts/" id="transcripts">
<i class="fas fa-file-alt fa-fw"></i>
<span class="label">Transcripts</span>
</a>
<a href="https://form.jotform.com/220065237704045" id="timesheet">
<i class="fas fa-clock fa-fw"></i>
<span class="label">Timesheet</span>
</a>
<div class="dropdown">
<button class="dropdown-btn" id="assessments">
<i class="fas fa-check fa-fw"></i>
<span class="label">Assessments</span>
</button>
<div class="dropdown-container">
<a href="https://www.mhacbo.org/en/admin/admin-assessment/" id="registrants">Registrants</a>
<a href="https://www.mhacbo.org/en/admin/comprehensive-assessment/" id="qmha-exam">QMHA Exam</a>
<a href="https://www.mhacbo.org/en/admin/qmhp-supervision/" id="qmhp-exam">QMHP Exam</a>
</div>
</div>
<div class="dropdown">
<button class="dropdown-btn" id="verifications">
<i class="fas fa-check-double fa-fw"></i>
<span class="label">Verifications</span>
</button>
<div class="dropdown-container">
<a href="https://www.mhacbo.org/en/admin/mail/" id="washington">Washington</a>
<a href="https://www.mhacbo.org/en/admin/lpc/" id="lpc">LPC</a>
</div>
</div>
<div class="dropdown">
<button class="dropdown-btn" id="Testing">
<i class="fas fa-vials fa-fw"></i>
<span class="label">Testing</span>
</button>
<div class="dropdown-container">
<a href="https://www.mhacbo.org/en/admin/testing-registration/" id="Register">Register</a>
<a href="https://www.mhacbo.org/en/admin/all-testers/" id="Search">Search</a>
<a href="https://www.mhacbo.org/en/admin/download-testers-naadac/" id="NAADAC">NAADAC</a>
<a href="https://www.mhacbo.org/en/admin/download-testers-icrc/" id="ICRC">ICRC</a>
<a href="https://www.mhacbo.org/en/admin/download-testers/" id="CES">CES</a>
</div>
</div>
<a href="https://www.mhacbo.org/en/admin/oral-health" id="oral">
<i class="fas fa-tooth fa-fw"></i>
<span class="label">Oral</span>
</a>
<a href="https://www.mhacbo.org/en/admin/jurisprudence/" id="calendar">
<i class="fas fa-calendar-alt fa-fw"></i>
<span class="label">Calendar</span>
</a>
<a href="https://mhacbo.org/en/portal/ethics-admin/admin-cases/" id="ethics">
<i class="fas fa-balance-scale fa-fw"></i>
<span class="label">Ethics</span>
</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var sidebarLinks = document.querySelectorAll('.sidebar a, .dropdown-btn');
var currentLocation = window.location.href;
sidebarLinks.forEach(function (link) {
if (link.href === currentLocation) {
link.classList.add('active');
if (link.parentElement.classList.contains('dropdown-container')) {
link.parentElement.style.display = 'block';
}
}
});
var dropdownBtns = document.querySelectorAll('.dropdown-btn');
dropdownBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
var dropdownContainer = this.nextElementSibling;
if (dropdownContainer.style.display === 'block') {
dropdownContainer.style.display = 'none';
} else {
dropdownContainer.style.display = 'block';
}
});
});
var sidebar = document.querySelector('.sidebar');
var container = document.querySelector('.container');
document.addEventListener('click', function (event) {
var isClickInside = sidebar.contains(event.target) || event.target.classList.contains('menu-toggle');
if (!isClickInside) {
sidebar.classList.add('collapsed');
var dropdownContainers = document.querySelectorAll('.dropdown-container');
dropdownContainers.forEach(function (dropdown) {
dropdown.style.display = 'none';
});
}
});
sidebar.addEventListener('mouseover', function () {
sidebar.classList.remove('collapsed');
sidebar.classList.add('expanded');
});
sidebar.addEventListener('mouseout', function () {
sidebar.classList.remove('expanded');
});
});
</script>
</body>
</html>