<!-- sidebar.php -->
<style>
	.sideNav{
		background: #1B263B
	}
	.the-logo{
		background: #1B263B
	}
	.nav-links a{
		color: #fff;
	}
</style>
<?php ob_start();?>
<?php
if (isset($_SESSION['username'])) {
	$username = $_SESSION['username']; // username = email
	$staffRole = $_SESSION['role'];

	// Get staff Id
	$getstf = "SELECT * FROM staff WHERE email = ? ";
	$stmt = $pdo->prepare($getstf);
	$stmt->execute([$username]);
	$row = $stmt->fetch(PDO::FETCH_ASSOC);

	$staffId = $row['staffId'];

	$title = $row['title'];
	$names 	= $row['fullname'];
	$email = $row['email'];
	$mobile = $row['phone_number'];
	$password = $row['password'];
	$roles 	= $row['roles'];
}else{
	header('Location:login.php');
}



?>


<script>
	function openStd() {
		const content = document.getElementById('openStud');

			if (content.classList.contains('expanded')) {
				// Get the current height before collapsing
				content.style.height = content.scrollHeight + 'px';

				// Force reflow to make sure browser registers the height
				content.offsetHeight; // This line is very important

				// Now collapse
				content.style.height = '0';
				content.classList.remove('expanded');
			} else {
				// Expand
				content.style.height = content.scrollHeight + 'px';
				content.classList.add('expanded');

				// After transition, reset to auto so resizing works naturally
				content.addEventListener('transitionend', function removeHeight() {
					if (content.classList.contains('expanded')) {
						content.style.height = 'auto';
					}
					content.removeEventListener('transitionend', removeHeight);
				});
			}
			
	}
	// function DropClick(){
	//     const dropSidebar = document.getElementById('dropdown');
	//     dropSidebar.classList.toggle('active');   
	// }

	function DropClick() {
	  if (window.innerWidth <= 992) {
	    document.getElementById('dropdown').classList.toggle('active');
	  }
	}

	function ShowNav(){
		let dropLinks = document.getElementById('dropLink');
		dropLinks.classList.toggle('active');
	}

	function flexing(){
		const myDrops = document.getElementById('myDrop');
		myDrops.classList.toggle('active');
	}

</script>
<?php



?>