OneCompiler

new1

75
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Customer List</title> <style> body { margin: 0; font-family: Arial, sans-serif; } 
.topbar {
  background: #2f4050;
  color: white;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  height: 50px;
}

.hamburger {
  font-size: 24px;
  background: none;
  border: none;
  color: white;
  margin-right: 15px;
  cursor: pointer;
}

.topbar-title {
  font-size: 20px;
}

.container {
  display: flex;
  height: calc(100vh - 50px);
}

.sidebar {
  width: 250px;
  background: #2f4050;
  color: white;
  padding: 20px;
  transition: all 0.3s ease;
}

.sidebar.hidden {
  display: none;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 10px 0;
  cursor: pointer;
}

.sidebar li:hover {
  background-color: #1c2b36;
}

.content {
  flex-grow: 1;
  padding: 20px;
  background-color: #f9f9f9;
}

a {
  text-decoration: none;
  color: white;
}
</style> </head> <body> <div class="topbar"> <button class="hamburger" onclick="toggleSidebar()">☰</button> <span class="topbar-title">GVS Pulse Reflex</span> </div> <div class="container"> <div class="sidebar" id="sidebar"> <ul> <li><a href="/pnc/administration/customer-list.html">Administration</a></li> <li><a href="#">Role Management</a></li> <li><a href="#">Charge Management</a></li> <li><a href="../bulk-upload-download/upload-file-product.html">Bulk Upload Downloads</a></li> <li><a href="#">Rate Management</a></li> <li><a href="#">Amendment</a></li> <li><a href="#">Scheduler</a></li> </ul> </div> 
<div class="content">
  <h2>Customer List</h2>
  <ul>
    <li>John Doe</li>
    <li>Jane Smith</li>
    <li>Acme Corporation</li>
  </ul>
</div>
</div> <script> function toggleSidebar() { const sidebar = document.getElementById('sidebar'); sidebar.classList.toggle('hidden'); } </script> </body> </html>