Drawer Header - Copy this React, Mui Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Enhanced Sidebar Example</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" /> <style> .sidebar { min-height: 100vh; background-color: #f7f7f8; color: white; transition: all 0.3s; width: 15rem; position: relative; } @media (max-width: 900px) { .sidebar:hover { width: 250px; } .sidebar:hover .menu-text, .sidebar:hover .sidebar-title, .sidebar:hover .submenu { display: block; } .menu-text, .sidebar-title { display: none; } .sidebar.collapsed { width: 64px; } .menu-item .fa-chevron-right { display: none; } } .icon { padding: 1rem 0rem; } .sidebar.collapsed { width: 64px; } .menu-item { display: flex; align-items: center; gap: 1rem; padding: 0rem 1rem; cursor: pointer; transition: background-color 0.2s; color: #9ca3af; text-decoration: none; position: relative; } .menu-item:hover { background-color: #2d3748; color: #9ca3af; } .menu-item i { width: 20px; text-align: center; } .sidebar-header { border-bottom: 1px solid #374151; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .toggle-btn { background-color: #2d3748; border: none; color: white; padding: 0.375rem 0.75rem; border-radius: 0.375rem; z-index: 2; } .toggle-btn:hover { background-color: #4a5568; } .menu-text { transition: opacity 0.3s; display: flex; align-items: center; justify-content: space-between; width: 100%; } .collapsed .menu-text, .collapsed .sidebar-title, .collapsed .submenu { display: none; } .submenu { display: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .submenu.show { display: block; max-height: 500px; /* Adjust as needed */ } .submenu-item { padding: 0.75rem 4.5rem; color: #b3b8c2; text-decoration: none; display: block; position: relative; } .submenu-item:hover { background-color: #404450; color: #ffffff; } .menu-item:hover.has-submenu > .nested-submenu{ display: block; } .nested-submenu { display: none; position: absolute; top: 10%; left: 100%; background-color: red; border-radius: 4px; z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); overflow: hidden; min-width: 10px; margin: 0.5rem; } .menu-item.has-submenu > .menu-text::after { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.8em; margin-left: auto; color: #b3b8c2; transition: transform 0.3s; } .menu-item:hover.has-submenu > .menu-text::after { transform: rotate(90deg); } .menu-item.active > .menu-text::after { transform: rotate(90deg); } span { font-weight: 700; } </style> </head> <body> <div class="sidebar-container"> <div class="sidebar collapsed" id="sidebar"> <div class="sidebar-header"> <img src="logo.png" alt="" class="img-fluid" width="100px" /> <button class="toggle-btn" onclick="toggleSidebar()"> <i class="fas fa-chevron-left" id="toggleIcon"></i> </button> </div> <a class="menu-item has-submenu"> <i class="fas fa-home icon"></i> <span class="menu-text" data-bs-toggle="collapse" data-bs-target="#homeSubmenu" aria-expanded="false" aria-controls="homeSubmenu" >Home</span > <div class="collapse" id="homeSubmenu"> <a href="#" class="submenu-item"> Dashboard </a> <a href="#" class="submenu-item">Settings</a> <a href="#" class="submenu-item">Profile</a> </div> <div class="nested-submenu"> <a href="#" class="submenu-item">Dashboard Item 1</a> <a href="#" class="submenu-item">Dashboard Item 2</a> </div> </a> <a class="menu-item has-submenu"> <i class="fas fa-info-circle icon"></i> <span class="menu-text" data-bs-toggle="collapse" data-bs-target="#aboutSubmenu" aria-expanded="false" aria-controls="aboutSubmenu" >About</span > <div class="collapse" id="aboutSubmenu"> <a href="#" class="submenu-item">About Us</a> <a href="#" class="submenu-item">Our Team</a> </div> </a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script> function checkWidth() { const sidebar = document.getElementById("sidebar"); const toggleIcon = document.getElementById("toggleIcon"); if (window.innerWidth <= 900) { sidebar.classList.add("collapsed"); toggleIcon.classList.remove("fa-chevron-left"); toggleIcon.classList.add("fa-chevron-right"); } else { sidebar.classList.remove("collapsed"); toggleIcon.classList.remove("fa-chevron-right"); toggleIcon.classList.add("fa-chevron-left"); } } checkWidth(); window.addEventListener("resize", checkWidth); function toggleSidebar() { const sidebar = document.getElementById("sidebar"); const toggleIcon = document.getElementById("toggleIcon"); sidebar.classList.toggle("collapsed"); if (sidebar.classList.contains("collapsed")) { toggleIcon.classList.remove("fa-chevron-left"); toggleIcon.classList.add("fa-chevron-right"); } else { toggleIcon.classList.remove("fa-chevron-right"); toggleIcon.classList.add("fa-chevron-left"); } } </script> </body> </html> In this code when we hover on dashboard link then show a nested sidebar repeat all the code only add this functionality