@media (max-width: 768px) {
    .main--panel {
        position: fixed;
        left: -250px; /* Adjust based on the width of the main--panel */
        top: 0;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    .main--panel:hover {
        left: 0;
    }
    .trigger-area {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 20px; /* Trigger area width for mouse */
        z-index: 999; /* Ensure it is above other elements but below main--panel */
    }
}