<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
height: 100vh;
overflow-x: hidden;
display: flex;
}
/* Sidebar */
.sidebar {
width: 250px;
height: 100vh;
background: #1E3A5F;
color: #E0E0E0;
padding-top: 20px;
transition: left 0.3s ease;
z-index: 1000;
}
.sidebar .logo {
text-align: center;
font-size: 22px;
font-weight: bold;
margin: 20px 0;
/* padding-top:20px; */
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin: 10px 0;
}
.sidebar ul li a {
display: flex;
align-items: center;
padding: 12px 20px;
color: #E0E0E0;
text-decoration: none;
transition: background 0.3s;
}
.sidebar ul li a:hover {
background: #3A4D6F;
}
.sidebar ul li a svg {
margin-right: 10px;
}
/* Main content */
.content {
flex: 1;
padding: 20px;
}
.sidebar .close-menu {
display: none;
}
/* Mobile Menu */
.mobile-menu {
display: none;
position: absolute;
top: 15px;
left: 15px;
cursor: pointer;
background: #1E3A5F;
color: white;
padding: 10px;
padding-bottom:5px;
border-radius: 5px;
/* z-index: 1100; */
}
/* Responsive styling */
@media (max-width: 768px) {
.sidebar {
position: fixed;
left: -250px;
}
.content{
padding-top:90px;
}
.sidebar.open {
left: 0;
}
.sidebar .close-menu {
text-align: right;
padding-right: 15px;
cursor: pointer;
display: block;
}
.mobile-menu {
display: block;
}
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="close-menu">
<svg onclick="toggleSidebar()" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</div>
<div class="logo">Name</div>
<ul>
<li><a href="/dashboard">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9.5L12 3l9 6.5V21a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5z"></path>
<polyline points="9 21 9 12 15 12 15 21"></polyline>
</svg>
<span>Home</span>
</a></li>
<li><a href="/dashboard">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect width="7" height="9" x="3" y="3" rx="1"></rect>
<rect width="7" height="5" x="14" y="3" rx="1"></rect>
<rect width="7" height="9" x="14" y="12" rx="1"></rect>
<rect width="7" height="5" x="3" y="16" rx="1"></rect>
</svg>
<span>Dashboard</span>
</a></li>
<li><a href="/dashboard">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="10" r="3"></circle>
<path d="M12 14c-2 0-4 1-4 3v1h8v-1c0-2-2-3-4-3z"></path>
</svg>
<span>About</span>
</a></li>
<li><a href="/dashboard">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92V19a2 2 0 0 1-2 2c-9.39 0-17-7.61-17-17a2 2 0 0 1 2-2h2.08a2 2 0 0 1 2 1.72c.12.81.32 1.61.59 2.36a2 2 0 0 1-.45 2.11l-.88.88a14.72 14.72 0 0 0 6.6 6.6l.88-.88a2 2 0 0 1 2.11-.45c.75.27 1.55.47 2.36.59a2 2 0 0 1 1.72 2z"></path>
</svg>
<span>Contact Us</span>
</a></li>
<li><a href="/logout">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 17 21 12 16 7"></polyline>
<line x1="21" x2="9" y1="12" y2="12"></line>
</svg>
<span>Logout</span>
</a></li>
</ul>
</div>
<!-- Mobile Menu Button -->
<div class="mobile-menu" onclick="toggleSidebar()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" x2="20" y1="12" y2="12"></line>
<line x1="4" x2="20" y1="6" y2="6"></line>
<line x1="4" x2="20" y1="18" y2="18"></line>
</svg>
</div>
<!-- Main Content -->
<div class="content">
<h1>Welcome to Your Dashboard</h1>
<p>This is the main content area. On desktop, the sidebar is always visible. On mobile, you can toggle it using the menu button.</p>
</div>
<script>
function toggleSidebar() {
const sidebar = document.getElementById("sidebar");
sidebar.classList.toggle("open");
}
</script>
</body>
</html>