<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Approval list</title>
<style>
  /* Existing CSS styles remain unchanged */

  /* New styles for the sidebar */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: black;
    padding-top: 20px;
    text-align: center;
  }


  .sidebar-icon {
    color: white;
    font-size: 24px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: transform 0.3s; /* Add transition for smooth effect */
  }

 
  .sidebar-item:hover .sidebar-icon {
    transform: scale(1.2); /* Zoom effect on hover */
  }

  .sidebar-item:hover {
    background-color: pink; /* Pink background color on hover */
  }

  .sidebar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }

  .sidebar-text {
    color: white;
    font-size: 18px; /* Adjust font size as needed */
    margin-left: 10px; /* Add margin to separate icon and text */
  }

  /* New styles for the footer */
  .footer {
    background-color: none;
    padding: 20px;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 250px; /* Adjusted left position to accommodate sidebar width */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  /* New styles for centering content */
  .content-divv {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-left: 150px; /* Adjusted left margin to accommodate sidebar width */
  }

  /* Existing styles for the rest of the page remain unchanged */
</style>
</head>
<body>
<div class="sidebar">
  <div class="sidebar-item" onclick="Profile_pic()">
    <img src="/rythm/assets/music.png" alt="music" style="height:4vh;width:4vh;" class="sidebar-icon">
    <span id="musicText" class="sidebar-text">Profile_pic</span>
  </div>
  <div class="sidebar-item" onclick="Profile_details()">
    <img src="/rythm/assets/event.png" alt="addevent" style="height:4vh;width:4vh;" class="sidebar-icon">
    <span id="addeventText" class="sidebar-text">Profile_details</span>
  </div>
</div>


<div class="content-divv">
  <label for="" style="position: absolute; top:24px; right: 71px;font-size:20px;" >Admin</label>
  <a href="/rythm/adminlogin/login.php" style="position: absolute; top: 10px; right: 10px;">
    <img src="/rythm/assets/switch.png" style="height: 40px; width: 40px;">
  </a>
  <div class="card">
    <label style="text-align: center; color: deeppink; font-size: 25px;">Welcome To Rythmwoods ...</label>
  </div>
</div>

<!-- <div class="footer">
  <label class="footer-label">© All rights reserved @2024</label><br>
  <label class="footer-label">Developed and Maintained by Bluebase Software Services Private Limited</label>
</div> -->

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  // Existing JavaScript code remains unchanged
</script>
</body>
</html>


<script>
function Profile_pic()
{
	debugger;
$.ajax({
        url: 'admin_approval_list.php', // Replace with your server-side script URL
        type: 'POST',
        // Pass useriddd to the server
        success: function(data) {
            console.warn(data);
			$('.content-divv').html(data);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });

	
}

function Profile_details()
{
	debugger;
	$.ajax({
        url: 'adminappravalpage.php', // Replace with your server-side script URL
        type: 'POST',
        // Pass useriddd to the server
        success: function(data) {
            console.warn(data);
			$('.content-divv').html(data);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
}

</script>