<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Bootstrap 4 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Boxicons --> <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <!-- Mobile Overlay --> <div class="overlay" id="overlay" onclick="closeMobileSidebar()"></div> <!-- Sidebar --> <div class="sidebar" id="sidebar"> <!-- Desktop Toggle --> <div class="toggle-btn" onclick="toggleSidebar()"> <i class='bx bx-chevron-right' id="toggle-icon"></i> </div> <!-- Mobile Close --> <div class="close-btn" onclick="closeMobileSidebar()"> <i class='bx bx-x'></i> </div> <nav class="nav flex-column mt-5"> <a href="#" class="nav-link"><i class='bx bx-home'></i><span class="link-text">Home</span></a> <a href="#" class="nav-link"><i class='bx bx-user'></i><span class="link-text">Profile</span></a> <a href="#" class="nav-link"><i class='bx bx-cog'></i><span class="link-text">Settings</span></a> <a href="#" class="nav-link"><i class='bx bx-help-circle'></i><span class="link-text">Help</span></a> </nav> </div> <!-- Main Content --> <div class="main-content" id="main-content"> <!-- Mobile Menu Button --> <div class="mobile-menu-btn" onclick="openMobileSidebar()"> <i class='bx bx-menu'></i> </div> <h1>Dashboard</h1> <p>This is your main content area.</p> </div>

body { margin: 0; padding: 0; overflow-x: hidden; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; background: #343a40; color: white; width: 4%; transition: width 0.3s, left 0.3s; z-index: 1000; } .sidebar.expanded { width: 15%; } .sidebar .toggle-btn, .sidebar .close-btn { position: absolute; top: 10px; background-color: #343a40; color: white; padding: 5px; border-radius: 50%; cursor: pointer; z-index: 1001; } .sidebar .toggle-btn { left: 10px; } .sidebar .close-btn { right: 10px; display: none; } .sidebar .nav-link { color: white; padding: 15px; display: flex; align-items: center; } .sidebar .nav-link:hover { background: #495057; } .sidebar i { font-size: 20px; min-width: 30px; } .sidebar .link-text { display: none; } .sidebar.expanded .link-text { display: inline; } @media (max-width: 768px) { .sidebar .link-text { display: inline !important; } } .main-content { margin-left: 6%; transition: margin-left 0.3s; padding: 20px; } .sidebar.expanded ~ .main-content { margin-left: 20%; } /* Mobile styles */ @media (max-width: 768px) { .sidebar { left: -100%; width: 75%; } .sidebar.mobile-active { left: 0; } .sidebar .toggle-btn { display: none; } .sidebar .close-btn { display: block; } .main-content { margin-left: 0; } .sidebar.expanded ~ .main-content { margin-left: 0; } .mobile-menu-btn { display: inline-block; font-size: 24px; cursor: pointer; margin-bottom: 20px; } .overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; display: none; } .overlay.active { display: block; } } @media (min-width: 769px) { .mobile-menu-btn { display: none; } }

const sidebar = document.getElementById("sidebar"); const icon = document.getElementById("toggle-icon"); const overlay = document.getElementById("overlay"); function toggleSidebar() { if (window.innerWidth <= 768) return; sidebar.classList.toggle("expanded"); icon.classList.toggle("bx-chevron-right"); icon.classList.toggle("bx-chevron-left"); } function openMobileSidebar() { if (window.innerWidth > 768) return; sidebar.classList.add("mobile-active"); overlay.classList.add("active"); } function closeMobileSidebar() { sidebar.classList.remove("mobile-active"); overlay.classList.remove("active"); } window.addEventListener("resize", () => { if (window.innerWidth > 768) { closeMobileSidebar(); } });